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#FF5722
  • activityBar.background#120C12
  • activityBar.foreground#D8CFC7
  • activityBarBadge.background#FF5722
  • activityBarBadge.foreground#0A0A0F
  • badge.background#FFB300
  • badge.foreground#0A0A0F
  • button.background#FF5722
  • button.foreground#0A0A0F
  • button.hoverBackground#FF7043
  • dropdown.background#120C12
  • dropdown.border#FF5722
  • dropdown.foreground#D8CFC7
  • editor.background#0A0A0F
  • editor.findMatchBackground#FF572240
  • editor.findMatchHighlightBackground#FF572230
  • editor.foreground#D8CFC7
  • editor.lineHighlightBackground#FF572240
  • editor.lineHighlightBorder#FFB300
  • editor.selectionBackground#FFB30040
  • editor.selectionHighlightBackground#FFB30030
  • editorBracketMatch.background#FF572330
  • editorBracketMatch.border#FF5722
  • editorCursor.foreground#FFB300
  • editorGroupHeader.tabsBackground#120C12
  • editorIndentGuide.activeBackground#FFB30088
  • editorIndentGuide.background#55555544
  • editorLineNumber.activeForeground#FFB300
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#555555
  • focusBorder#FFB300
  • gitDecoration.conflictingResourceForeground#FFEB3B
  • gitDecoration.deletedResourceForeground#FF5722
  • gitDecoration.modifiedResourceForeground#FFB300
  • gitDecoration.untrackedResourceForeground#81C784
  • input.background#120C12
  • input.border#FF5722
  • input.foreground#D8CFC7
  • input.placeholderForeground#555555
  • inputOption.activeBorder#FFB300
  • list.activeSelectionBackground#FF5722
  • list.activeSelectionForeground#0A0A0F
  • list.focusBackground#FF5722
  • list.highlightForeground#FFB300
  • list.hoverBackground#FF572266
  • minimap.background#120C12
  • minimapSlider.activeBackground#FFB30066
  • minimapSlider.background#FFB30022
  • minimapSlider.hoverBackground#FFB30044
  • panel.background#120C12
  • panel.border#FF5722
  • panelTitle.activeBorder#FFB300
  • panelTitle.activeForeground#FFB300
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FFB30088
  • scrollbarSlider.background#55555544
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#120C12
  • sideBar.foreground#D8CFC7
  • sideBarSectionHeader.background#120C12
  • sideBarSectionHeader.foreground#FFB300
  • sideBarTitle.foreground#FFB300
  • statusBar.background#FF5722
  • statusBar.debuggingBackground#D84315
  • statusBar.foreground#0A0A0F
  • statusBar.noFolderBackground#120C12
  • statusBarItem.hoverBackground#FF572280
  • tab.activeBackground#FF5722
  • tab.activeBorder#FFB300
  • tab.activeForeground#0A0A0F
  • tab.border#120C12
  • tab.inactiveBackground#120C12
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#42A5F5
  • terminal.ansiBrightBlue#90CAF9
  • terminal.ansiBrightCyan#80DEEA
  • terminal.ansiBrightGreen#A5D6A7
  • terminal.ansiBrightMagenta#CE93D8
  • terminal.ansiBrightRed#FF8A80
  • terminal.ansiBrightYellow#FFE082
  • terminal.ansiCyan#26C6DA
  • terminal.ansiGreen#81C784
  • terminal.ansiMagenta#BA68C8
  • terminal.ansiRed#FF5722
  • terminal.ansiYellow#FFB300
  • terminal.background#120C12
  • terminal.foreground#D8CFC7
  • titleBar.activeBackground#120C12
  • titleBar.activeForeground#D8CFC7
  • titleBar.inactiveBackground#120C12
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A5A70italic
string, string.quoted, string.template#FF8A80
keyword, storage.type, storage.modifier#FF5722bold
keyword.operator, punctuation.accessor#FF7043
variable, variable.other#D8CFC7
variable.parameter#FF8A80italic
entity.name.function, support.function#82B1FF
meta.function-call#80CBC4
entity.name.class, entity.name.type.class, support.class#CE93D8bold
entity.name.type, support.type#B39DDB
entity.name.type.interface#4DD0E1italic
constant.numeric#FF5722
constant, constant.language, constant.character#FFEB3B
constant.language.boolean#FF5722bold
variable.other.property, support.variable.property#FF8A80
meta.object-literal.key#FF7043
entity.name.tag, punctuation.definition.tag#FF5722
entity.other.attribute-name#80CBC4italic
punctuation, meta.brace#D8CFC7
string.regexp#CE93D8
constant.character.escape#82B1FF
meta.decorator, punctuation.decorator#FFEB3B
invalid, invalid.illegal#D32F2Fstrikethrough
markup.heading, entity.name.section#FF8A80bold
markup.bold#FF5722bold
markup.italic#FF8A80italic
markup.underline.link#82B1FF
markup.inline.raw, markup.fenced_code#80CBC4
support.type.property-name.json#FF7043
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF5722
support.type.property-name.css#82B1FF
support.constant.property-value.css#FFEB3B