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#FF9500
  • activityBar.background#141414
  • activityBar.foreground#B11226
  • activityBarBadge.background#B11226
  • activityBarBadge.foreground#0F0F0F
  • badge.background#B11226
  • badge.foreground#0F0F0F
  • button.background#1A1A1A
  • button.foreground#E5E0D1
  • button.hoverBackground#2A2A2A
  • dropdown.background#1A1A1A
  • dropdown.border#3A3A3A
  • dropdown.foreground#E5E0D1
  • editor.background#0F0F0F
  • editor.findMatchBackground#FF950044
  • editor.findMatchHighlightBackground#FF950022
  • editor.foreground#E5E0D1
  • editor.lineHighlightBackground#1A1A1A66
  • editor.lineHighlightBorder#B1122620
  • editor.selectionBackground#B1122640
  • editor.selectionHighlightBackground#B1122610
  • editorBracketMatch.background#B1122622
  • editorBracketMatch.border#B11226
  • editorCursor.foreground#FF9500
  • editorGroupHeader.tabsBackground#0F0F0F
  • editorIndentGuide.activeBackground#B1122644
  • editorIndentGuide.background#3A3A3A44
  • editorLineNumber.activeForeground#FF9500
  • editorLineNumber.foreground#5A5A5A
  • editorWhitespace.foreground#3A3A3A
  • focusBorder#B11226
  • gitDecoration.conflictingResourceForeground#FF9500
  • gitDecoration.deletedResourceForeground#B11226
  • gitDecoration.modifiedResourceForeground#FF9500
  • gitDecoration.untrackedResourceForeground#8AB85F
  • input.background#1A1A1A
  • input.border#3A3A3A
  • input.foreground#E5E0D1
  • input.placeholderForeground#5A5A5A
  • inputOption.activeBorder#FF9500
  • list.activeSelectionBackground#B11226
  • list.activeSelectionForeground#E5E0D1
  • list.focusBackground#B1122633
  • list.highlightForeground#FF9500
  • list.hoverBackground#1A1A1A66
  • minimap.background#0F0F0F
  • minimapSlider.activeBackground#B1122666
  • minimapSlider.background#B1122622
  • minimapSlider.hoverBackground#B1122644
  • panel.background#0F0F0F
  • panel.border#1A1A1A
  • panelTitle.activeBorder#FF9500
  • panelTitle.activeForeground#FF9500
  • panelTitle.inactiveForeground#C9B18F
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#B1122666
  • scrollbarSlider.background#3A3A3A44
  • scrollbarSlider.hoverBackground#5A5A5A66
  • sideBar.background#141414
  • sideBar.foreground#C9B18F
  • sideBarSectionHeader.background#1A1A1A
  • sideBarSectionHeader.foreground#B11226
  • sideBarTitle.foreground#FF9500
  • statusBar.background#1A1A1A
  • statusBar.debuggingBackground#B11226
  • statusBar.foreground#E5E0D1
  • statusBar.noFolderBackground#141414
  • statusBarItem.hoverBackground#2A2A2A
  • tab.activeBackground#1A1A1A
  • tab.activeBorder#FF9500
  • tab.activeForeground#E5E0D1
  • tab.border#0F0F0F
  • tab.inactiveBackground#141414
  • tab.inactiveForeground#C9B18F
  • terminal.ansiBlue#2A9E9F
  • terminal.ansiBrightBlue#48B2B2
  • terminal.ansiBrightCyan#69C5C5
  • terminal.ansiBrightGreen#A2D182
  • terminal.ansiBrightMagenta#C89A9A
  • terminal.ansiBrightRed#D13246
  • terminal.ansiBrightYellow#FFE066
  • terminal.ansiCyan#48B2B2
  • terminal.ansiGreen#8AB85F
  • terminal.ansiMagenta#A87A8A
  • terminal.ansiRed#B11226
  • terminal.ansiYellow#FF9500
  • terminal.background#0F0F0F
  • terminal.foreground#E5E0D1
  • titleBar.activeBackground#141414
  • titleBar.activeForeground#E5E0D1
  • titleBar.inactiveBackground#0F0F0F
  • titleBar.inactiveForeground#C9B18F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#C9B18Fitalic
string, string.quoted, string.template#2A9E9F
keyword, storage.type, storage.modifier#B11226bold
keyword.operator, punctuation.accessor#FF9500
variable, variable.other#E5E0D1
variable.parameter#C9B18Fitalic
entity.name.function, support.function#FF9500
meta.function-call#E5E0D1
entity.name.class, entity.name.type.class, support.class#B11226bold
entity.name.type, support.type#48B2B2
entity.name.type.interface#48B2B2italic
constant.numeric#FF9500
constant, constant.language, constant.character#FF9500
constant.language.boolean#B11226bold
variable.other.property, support.variable.property#C9B18F
meta.object-literal.key#FF9500
entity.name.tag, punctuation.definition.tag#B11226
entity.other.attribute-name#48B2B2italic
punctuation, meta.brace#C9B18F
string.regexp#FF9500
constant.character.escape#FF9500
meta.decorator, punctuation.decorator#48B2B2
invalid, invalid.illegal#B11226strikethrough
markup.heading, entity.name.section#B11226bold
markup.bold#FF9500bold
markup.italic#48B2B2italic
markup.underline.link#FF9500
markup.inline.raw, markup.fenced_code#8AB85F
support.type.property-name.json#FF9500
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#B11226
support.type.property-name.css#48B2B2
support.constant.property-value.css#C9B18F