Skip to main content
Coding Theme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.activeBorder#00B5D8
  • activityBar.background#F5F0E6
  • activityBar.foreground#2B2D2F
  • activityBarBadge.background#00B5D8
  • activityBarBadge.foreground#FFFDF5
  • badge.background#00B5D8
  • badge.foreground#FFFDF5
  • button.background#00B5D8
  • button.foreground#FFFFFF
  • button.hoverBackground#0099B9
  • dropdown.background#FFFFFF
  • dropdown.border#00B5D8
  • dropdown.foreground#2B2D2F
  • editor.background#FFFDF5
  • editor.findMatchBackground#00B5D844
  • editor.findMatchHighlightBackground#00B5D822
  • editor.foreground#2B2D2F
  • editor.lineHighlightBackground#E5F7FA
  • editor.lineHighlightBorder#00B5D822
  • editor.selectionBackground#00B5D833
  • editor.selectionHighlightBackground#00B5D822
  • editorBracketMatch.background#00B5D822
  • editorBracketMatch.border#00B5D8
  • editorCursor.foreground#00B5D8
  • editorGroupHeader.tabsBackground#FFFDF5
  • editorIndentGuide.activeBackground#00B5D888
  • editorIndentGuide.background#6E778144
  • editorLineNumber.activeForeground#00B5D8
  • editorLineNumber.foreground#6E7781
  • editorWhitespace.foreground#6E778188
  • focusBorder#00B5D8
  • gitDecoration.conflictingResourceForeground#F9C64A
  • gitDecoration.deletedResourceForeground#E75454
  • gitDecoration.modifiedResourceForeground#00B5D8
  • gitDecoration.untrackedResourceForeground#79D867
  • input.background#FFFFFF
  • input.border#00B5D8
  • input.foreground#2B2D2F
  • input.placeholderForeground#6E7781
  • inputOption.activeBorder#00B5D8
  • list.activeSelectionBackground#00B5D833
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#00B5D833
  • list.highlightForeground#00B5D8
  • list.hoverBackground#00B5D81A
  • minimap.background#FFFDF5
  • minimapSlider.activeBackground#00B5D866
  • minimapSlider.background#00B5D822
  • minimapSlider.hoverBackground#00B5D844
  • panel.background#FFFDF5
  • panel.border#00B5D8
  • panelTitle.activeBorder#00B5D8
  • panelTitle.activeForeground#00B5D8
  • panelTitle.inactiveForeground#6E7781
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#6E778188
  • scrollbarSlider.background#6E778144
  • scrollbarSlider.hoverBackground#6E778166
  • sideBar.background#FAF7F0
  • sideBar.foreground#2B2D2F
  • sideBarSectionHeader.background#FAF7F0
  • sideBarSectionHeader.foreground#00B5D8
  • sideBarTitle.foreground#00B5D8
  • statusBar.background#00B5D8
  • statusBar.debuggingBackground#FFB200
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#00B5D8
  • statusBarItem.hoverBackground#009DC57A
  • tab.activeBackground#FFFDF5
  • tab.activeBorder#00B5D8
  • tab.activeForeground#2B2D2F
  • tab.border#DAD5CB
  • tab.inactiveBackground#EDEAE3
  • tab.inactiveForeground#6E7781
  • terminal.ansiBlue#00B5D8
  • terminal.ansiBrightBlue#3FD6FF
  • terminal.ansiBrightCyan#5FF9FF
  • terminal.ansiBrightGreen#9CFF8E
  • terminal.ansiBrightMagenta#FF84FF
  • terminal.ansiBrightRed#FF7777
  • terminal.ansiBrightYellow#FFE066
  • terminal.ansiCyan#00F0FF
  • terminal.ansiGreen#79D867
  • terminal.ansiMagenta#D96ED9
  • terminal.ansiRed#E75454
  • terminal.ansiYellow#F9C64A
  • terminal.background#FFFDF5
  • terminal.foreground#2B2D2F
  • titleBar.activeBackground#F5F0E6
  • titleBar.activeForeground#2B2D2F
  • titleBar.inactiveBackground#FFFDF5
  • titleBar.inactiveForeground#6E7781

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6E7781italic
string, string.quoted, string.template#79D867—
keyword, storage.type, storage.modifier#00B5D8bold
keyword.operator, punctuation.accessor#00F0FF—
variable, variable.other#2B2D2F—
variable.parameter#00B5D8italic
entity.name.function, support.function#00F0FF—
meta.function-call#00B5D8—
entity.name.class, entity.name.type.class, support.class#00B5D8bold
entity.name.type, support.type#00F0FF—
entity.name.type.interface#79D867italic
constant.numeric#F9C64A—
constant, constant.language, constant.character#D96ED9—
constant.language.boolean#00B5D8bold
variable.other.property, support.variable.property#00B5D8—
meta.object-literal.key#00B5D8—
entity.name.tag, punctuation.definition.tag#D96ED9—
entity.other.attribute-name#79D867italic
punctuation, meta.brace#6E7781—
string.regexp#F9C64A—
constant.character.escape#D96ED9—
meta.decorator, punctuation.decorator#F9C64A—
invalid, invalid.illegal#E75454strikethrough
markup.heading, entity.name.section#00B5D8bold
markup.bold#00B5D8bold
markup.italic#79D867italic
markup.underline.link#00F0FF—
markup.inline.raw, markup.fenced_code#79D867—
support.type.property-name.json#00B5D8—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#F9C64A—
support.type.property-name.css#00B5D8—
support.constant.property-value.css#79D867—