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