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#B33A3A
  • activityBar.background#0D1115
  • activityBar.foreground#B33A3A
  • activityBarBadge.background#B33A3A
  • activityBarBadge.foreground#0A0E12
  • badge.background#B33A3A
  • badge.foreground#0A0E12
  • button.background#151A1F
  • button.foreground#FFFFFF
  • button.hoverBackground#21262D
  • dropdown.background#0D1115
  • dropdown.border#151A1F
  • dropdown.foreground#C0C2C4
  • editor.background#0A0E12
  • editor.findMatchBackground#B33A44AA
  • editor.findMatchHighlightBackground#B33A4422
  • editor.foreground#C0C2C4
  • editor.lineHighlightBackground#1C283340
  • editor.lineHighlightBorder#1C283380
  • editor.selectionBackground#3B5365AA
  • editor.selectionHighlightBackground#3B536533
  • editorBracketMatch.background#B33A4433
  • editorBracketMatch.border#B33A3A
  • editorCursor.foreground#B33A3A
  • editorGroupHeader.tabsBackground#0A0E12
  • editorIndentGuide.activeBackground#21262D88
  • editorIndentGuide.background#21262D44
  • editorLineNumber.activeForeground#B33A3A
  • editorLineNumber.foreground#4C5A60
  • editorWhitespace.foreground#21262D
  • focusBorder#B33A3A
  • gitDecoration.conflictingResourceForeground#DFA85F
  • gitDecoration.deletedResourceForeground#B33A3A
  • gitDecoration.modifiedResourceForeground#6C8EB0
  • gitDecoration.untrackedResourceForeground#8FBC8F
  • input.background#0D1115
  • input.border#151A1F
  • input.foreground#C0C2C4
  • input.placeholderForeground#4C5A60
  • inputOption.activeBorder#B33A3A
  • list.activeSelectionBackground#151A1F
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#151A1F
  • list.highlightForeground#B33A3A
  • list.hoverBackground#151A1F66
  • minimap.background#0A0E12
  • minimapSlider.activeBackground#B33A4466
  • minimapSlider.background#B33A4422
  • minimapSlider.hoverBackground#B33A4444
  • panel.background#0A0E12
  • panel.border#151A1F
  • panelTitle.activeBorder#B33A3A
  • panelTitle.activeForeground#B33A3A
  • panelTitle.inactiveForeground#A0A3A5
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#B33A4488
  • scrollbarSlider.background#4C5A6044
  • scrollbarSlider.hoverBackground#4C5A6088
  • sideBar.background#0D1115
  • sideBar.foreground#C0C2C4
  • sideBarSectionHeader.background#0D1115
  • sideBarSectionHeader.foreground#6E8A9F
  • sideBarTitle.foreground#6E8A9F
  • statusBar.background#151A1F
  • statusBar.debuggingBackground#B33A3A
  • statusBar.foreground#E0E2E3
  • statusBar.noFolderBackground#0D1115
  • statusBarItem.hoverBackground#21262D
  • tab.activeBackground#151A1F
  • tab.activeBorder#B33A3A
  • tab.activeForeground#FFFFFF
  • tab.border#0A0E12
  • tab.inactiveBackground#0D1115
  • tab.inactiveForeground#8A8D8F
  • terminal.ansiBlue#6C8EB0
  • terminal.ansiBrightBlue#8DABC1
  • terminal.ansiBrightCyan#9FCED4
  • terminal.ansiBrightGreen#A5CFA5
  • terminal.ansiBrightMagenta#C3A1D8
  • terminal.ansiBrightRed#C9545F
  • terminal.ansiBrightYellow#E2B877
  • terminal.ansiCyan#6FA8B5
  • terminal.ansiGreen#8FBC8F
  • terminal.ansiMagenta#A78EBF
  • terminal.ansiRed#B33A3A
  • terminal.ansiYellow#DFA85F
  • terminal.background#0A0E12
  • terminal.foreground#C0C2C4
  • titleBar.activeBackground#0D1115
  • titleBar.activeForeground#E0E2E3
  • titleBar.inactiveBackground#0A0E12
  • titleBar.inactiveForeground#A0A3A5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A6D7Bitalic
string, string.quoted, string.template#F4A261
keyword, storage.type, storage.modifier#C23B44bold
keyword.operator, punctuation.accessor#D8D9D7
variable, variable.other#D8D9D7
variable.parameter#F4A261italic
entity.name.function, support.function#6B8CAE
meta.function-call#A8A9A7
entity.name.class, entity.name.type.class, support.class#8BA691bold
entity.name.type, support.type#8BA691
entity.name.type.interface#7EC8E3italic
constant.numeric#D4A061
constant, constant.language, constant.character#D4A061
constant.language.boolean#D4A061bold
variable.other.property, support.variable.property#A8A9A7
meta.object-literal.key#6B8CAE
entity.name.tag, punctuation.definition.tag#C23B44
entity.other.attribute-name#A87CA0italic
punctuation, meta.brace#D8D9D7
string.regexp#D4A061
constant.character.escape#A87CA0
meta.decorator, punctuation.decorator#D4A061
invalid, invalid.illegal#E25B64strikethrough
markup.heading, entity.name.section#C23B44bold
markup.bold#F4A261bold
markup.italic#A87CA0italic
markup.underline.link#7EC8E3
markup.inline.raw, markup.fenced_code#8BA691
support.type.property-name.json#6B8CAE
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D4A061
support.type.property-name.css#6B8CAE
support.constant.property-value.css#7EC8E3