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#FFCC00
  • activityBar.background#001522
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#FFCC00
  • activityBarBadge.foreground#001B33
  • badge.background#FFCC00
  • badge.foreground#001B33
  • button.background#FFCC00
  • button.foreground#001B33
  • button.hoverBackground#E6B800
  • dropdown.background#001522
  • dropdown.border#FFCC00
  • dropdown.foreground#D8DEE9
  • editor.background#001B33
  • editor.findMatchBackground#FFCC0040
  • editor.findMatchHighlightBackground#FFCC0020
  • editor.foreground#D8DEE9
  • editor.lineHighlightBackground#4CAF5080
  • editor.lineHighlightBorder#4CAF50
  • editor.selectionBackground#4CAF5080
  • editor.selectionHighlightBackground#4CAF5040
  • editorBracketMatch.background#FFCC0030
  • editorBracketMatch.border#FFCC00
  • editorCursor.foreground#FFCC00
  • editorGroupHeader.tabsBackground#001B33
  • editorIndentGuide.activeBackground#FFCC0080
  • editorIndentGuide.background#5C7A8950
  • editorLineNumber.activeForeground#FFCC00
  • editorLineNumber.foreground#5C7A89
  • editorWhitespace.foreground#5C7A89
  • focusBorder#FFCC00
  • gitDecoration.conflictingResourceForeground#FFEB3B
  • gitDecoration.deletedResourceForeground#FF6F61
  • gitDecoration.modifiedResourceForeground#4CAF50
  • gitDecoration.untrackedResourceForeground#80DEEA
  • input.background#001522
  • input.border#FFCC00
  • input.foreground#D8DEE9
  • input.placeholderForeground#5C7A89
  • inputOption.activeBorder#FFCC00
  • list.activeSelectionBackground#4CAF5030
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#4CAF5040
  • list.highlightForeground#FFCC00
  • list.hoverBackground#4CAF5020
  • minimap.background#001B33
  • minimapSlider.activeBackground#4CAF5060
  • minimapSlider.background#4CAF5020
  • minimapSlider.hoverBackground#4CAF5040
  • panel.background#001B33
  • panel.border#001B33
  • panelTitle.activeBorder#FFCC00
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#FFCC0080
  • scrollbarSlider.background#5C7A8950
  • scrollbarSlider.hoverBackground#5C7A8960
  • sideBar.background#001522
  • sideBar.foreground#D8DEE9
  • sideBarSectionHeader.background#001B33
  • sideBarSectionHeader.foreground#FFCC00
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#001522
  • statusBar.debuggingBackground#4CAF50
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#001B33
  • statusBarItem.hoverBackground#FFCC0080
  • tab.activeBackground#001B33
  • tab.activeBorder#FFCC00
  • tab.activeForeground#FFFFFF
  • tab.border#001B33
  • tab.inactiveBackground#001522
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#4DD0E1
  • terminal.ansiBrightBlue#80D7FF
  • terminal.ansiBrightCyan#A5F3FF
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiBrightMagenta#FFB6C1
  • terminal.ansiBrightRed#FF928A
  • terminal.ansiBrightYellow#FFF59D
  • terminal.ansiCyan#80DEEA
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#FF80AB
  • terminal.ansiRed#FF6F61
  • terminal.ansiYellow#FFEB3B
  • terminal.background#001B33
  • terminal.foreground#D8DEE9
  • titleBar.activeBackground#001B33
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#001522
  • titleBar.inactiveForeground#D8DEE9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5C7A89italic
string, string.quoted, string.template#80DEEA—
keyword, storage.type, storage.modifier#FFCC00bold
keyword.operator, punctuation.accessor#D8DEE9—
variable, variable.other#D8DEE9—
variable.parameter#FFCC00italic
entity.name.function, support.function#4CAF50—
meta.function-call#80DEEA—
entity.name.class, entity.name.type.class, support.class#FFCC00bold
entity.name.type, support.type#D8DEE9—
entity.name.type.interface#80DEEAitalic
constant.numeric#FFEB3B—
constant, constant.language, constant.character#FF6F61—
constant.language.boolean#FFEB3Bbold
variable.other.property, support.variable.property#D8DEE9—
meta.object-literal.key#FFCC00—
entity.name.tag, punctuation.definition.tag#FFCC00—
entity.other.attribute-name#80DEEAitalic
punctuation, meta.brace#D8DEE9—
string.regexp#80DEEA—
constant.character.escape#FF6F61—
meta.decorator, punctuation.decorator#FFEB3B—
invalid, invalid.illegal#FF6F61strikethrough
markup.heading, entity.name.section#FFCC00bold
markup.bold#D8DEE9bold
markup.italic#80DEEAitalic
markup.underline.link#FFCC00—
markup.inline.raw, markup.fenced_code#80DEEA—
support.type.property-name.json#FFCC00—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFEB3B—
support.type.property-name.css#FFCC00—
support.constant.property-value.css#80DEEA—