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#FF7043
  • activityBar.background#141418
  • activityBar.foreground#D83A28
  • activityBarBadge.background#D83A28
  • activityBarBadge.foreground#0B0B0F
  • badge.background#D83A28
  • badge.foreground#0B0B0F
  • button.background#1A1A23
  • button.foreground#FFFFFF
  • button.hoverBackground#2E2E3A
  • dropdown.background#111117
  • dropdown.border#1A1A23
  • dropdown.foreground#CCCCCC
  • editor.background#0B0B0F
  • editor.findMatchBackground#D83A2844
  • editor.findMatchHighlightBackground#D83A2822
  • editor.foreground#CCCCCC
  • editor.lineHighlightBackground#1E1E2A80
  • editor.lineHighlightBorder#D83A2880
  • editor.selectionBackground#3B3B5F80
  • editor.selectionHighlightBackground#3B3B5F40
  • editorBracketMatch.background#D83A2733
  • editorBracketMatch.border#FF7043
  • editorCursor.foreground#FF7043
  • editorGroupHeader.tabsBackground#0B0B0F
  • editorIndentGuide.activeBackground#55556688
  • editorIndentGuide.background#33334444
  • editorLineNumber.activeForeground#FF7043
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#333344
  • focusBorder#D83A07
  • gitDecoration.conflictingResourceForeground#FF8A65
  • gitDecoration.deletedResourceForeground#FF7043
  • gitDecoration.modifiedResourceForeground#FFC107
  • gitDecoration.untrackedResourceForeground#00E5C0
  • input.background#111117
  • input.border#1A1A23
  • input.foreground#CCCCCC
  • input.placeholderForeground#555555
  • inputOption.activeBorder#FF7043
  • list.activeSelectionBackground#1A1A23
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1A1A23
  • list.highlightForeground#FF7043
  • list.hoverBackground#1A1A2366
  • minimap.background#0B0B0F
  • minimapSlider.activeBackground#D83A0766
  • minimapSlider.background#D83A0722
  • minimapSlider.hoverBackground#D83A0744
  • panel.background#0B0B0F
  • panel.border#1A1A23
  • panelTitle.activeBorder#FF7043
  • panelTitle.activeForeground#FF7043
  • panelTitle.inactiveForeground#888888
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#D83A0788
  • scrollbarSlider.background#3B3B5F44
  • scrollbarSlider.hoverBackground#3B3B5F88
  • sideBar.background#111117
  • sideBar.foreground#AAAAAA
  • sideBarSectionHeader.background#141418
  • sideBarSectionHeader.foreground#FF7043
  • sideBarTitle.foreground#D83A28
  • statusBar.background#1A1A23
  • statusBar.debuggingBackground#D83A28
  • statusBar.foreground#CCCCCC
  • statusBar.noFolderBackground#141418
  • statusBarItem.hoverBackground#2E2E3A
  • tab.activeBackground#1A1A23
  • tab.activeBorder#FF7043
  • tab.activeForeground#FFFFFF
  • tab.border#0B0B0F
  • tab.inactiveBackground#111117
  • tab.inactiveForeground#888888
  • terminal.ansiBlue#5C6BC0
  • terminal.ansiBrightBlue#7986CB
  • terminal.ansiBrightCyan#66FFFF
  • terminal.ansiBrightGreen#5EFCC0
  • terminal.ansiBrightMagenta#D181EA
  • terminal.ansiBrightRed#FF8A65
  • terminal.ansiBrightYellow#FFD54F
  • terminal.ansiCyan#40E0D0
  • terminal.ansiGreen#00E5C0
  • terminal.ansiMagenta#C158DC
  • terminal.ansiRed#FF7043
  • terminal.ansiYellow#FFC107
  • terminal.background#0B0B0F
  • terminal.foreground#CCCCCC
  • titleBar.activeBackground#141418
  • titleBar.activeForeground#CCCCCC
  • titleBar.inactiveBackground#0B0B0F
  • titleBar.inactiveForeground#888888

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#00E5C0
keyword, storage.type, storage.modifier#D83A28bold
keyword.operator, punctuation.accessor#C158DC
variable, variable.other#CCCCCC
variable.parameter#FFC107italic
entity.name.function, support.function#FF7043
meta.function-call#CCCCCC
entity.name.class, entity.name.type.class, support.class#FFC107bold
entity.name.type, support.type#FFC107
entity.name.type.interface#5C6BC0italic
constant.numeric#FF8A65
constant, constant.language, constant.character#FFC107
constant.language.boolean#FF8A65bold
variable.other.property, support.variable.property#CCCCCC
meta.object-literal.key#FF7043
entity.name.tag, punctuation.definition.tag#D83A28
entity.other.attribute-name#C158DCitalic
punctuation, meta.brace#AAAAAA
string.regexp#FF8A65
constant.character.escape#C158DC
meta.decorator, punctuation.decorator#FFC107
invalid, invalid.illegal#FF7043strikethrough
markup.heading, entity.name.section#D83A28bold
markup.bold#FFC107bold
markup.italic#C158DCitalic
markup.underline.link#5C6BC0
markup.inline.raw, markup.fenced_code#00E5C0
support.type.property-name.json#FF7043
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFC107
support.type.property-name.css#FF7043
support.constant.property-value.css#5C6BC0