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—