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.background#141F19
  • activityBar.border#28332D
  • activityBar.foreground#DC1829
  • activityBarBadge.background#DC1829
  • activityBarBadge.foreground#101914
  • badge.background#DC1829
  • badge.foreground#101914
  • button.background#DC1829
  • button.foreground#101914
  • button.hoverBackground#D61F2E
  • dropdown.background#19241E
  • dropdown.border#564E39
  • dropdown.foreground#EDECE8
  • editor.background#0C130F
  • editor.foreground#E5E2DC
  • editor.lineHighlightBackground#141F1999
  • editor.selectionBackground#22392C80
  • editorBracketMatch.background#22392C55
  • editorBracketMatch.border#DC1829
  • editorCursor.foreground#DC1829
  • editorGroupHeader.tabsBackground#141F19
  • editorIndentGuide.activeBackground#564E39
  • editorIndentGuide.background#28332D88
  • editorLineNumber.activeForeground#B19243
  • editorLineNumber.foreground#9A927EAA
  • editorWhitespace.foreground#28332D66
  • focusBorder#564E39
  • foreground#E5E2DC
  • gitDecoration.deletedResourceForeground#F05161
  • gitDecoration.modifiedResourceForeground#E8C545
  • gitDecoration.untrackedResourceForeground#7A9F82
  • input.background#19241E
  • input.border#564E39
  • input.foreground#EDECE8
  • inputOption.activeBorder#DC1829
  • list.activeSelectionBackground#22392C
  • list.activeSelectionForeground#E5E2DC
  • list.focusOutline#DC1829
  • list.hoverBackground#1A231E
  • list.inactiveSelectionBackground#18211B
  • minimap.selectionHighlight#22392CAA
  • panel.background#141F19
  • panel.border#28332D
  • peekView.border#564E39
  • peekViewEditor.background#131B16
  • peekViewTitle.background#141F19
  • scrollbarSlider.activeBackground#DC1829AA
  • scrollbarSlider.background#564E3966
  • scrollbarSlider.hoverBackground#564E3999
  • sideBar.background#101914
  • sideBar.border#28332D
  • sideBar.foreground#DFDDD8
  • sideBarTitle.foreground#E5E2DC
  • statusBar.background#141F19
  • statusBar.border#28332D
  • statusBar.foreground#959083
  • tab.activeBackground#0C130F
  • tab.activeForeground#E5E2DC
  • tab.border#28332D
  • tab.inactiveBackground#18211B
  • tab.inactiveForeground#C29F47
  • terminal.ansiBlack#0C130F
  • terminal.ansiBlue#C29F47
  • terminal.ansiCyan#9A927E
  • terminal.ansiGreen#B19243
  • terminal.ansiMagenta#B28E34
  • terminal.ansiRed#DC1829
  • terminal.ansiWhite#E5E2DC
  • terminal.ansiYellow#5C4A1F
  • terminal.background#0C130F
  • terminal.foreground#E5E2DC
  • titleBar.activeBackground#141F19
  • titleBar.activeForeground#E5E2DC
  • titleBar.inactiveBackground#101914
  • titleBar.inactiveForeground#9A927E
  • widget.shadow#060A0755

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#9F9989italic
string, constant.other.symbol, string.regexp, string.template#7A9F82
constant.character.escape#DFC990
constant.numeric#E8C545
constant.language.boolean, constant.language.null, constant.language.undefined#F5D151
constant, entity.name.constant, support.constant#EEA0A6
keyword, storage.type, storage.modifier, storage.type.function#F05161
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#FF7081
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#938E80
storage.type.class, storage.type.interface, storage.type.enum#F05161
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#888377
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#99C2AA
support.type.builtin, entity.name.type.primitive#B1CDBD
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#D8B041
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#FF8091
variable.parameter, variable.parameter.function#C7C4BD
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#CBB786
variable, meta.definition.variable, variable.other.readwrite#E8E7E3
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#F05161
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#9F9989
entity.other.attribute-name, entity.other.attribute-name.html#99C2AA
support.class.component, entity.name.tag.template.value#E8C545
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#7A9F82
entity.other.attribute-name.class.css, entity.other.attribute-name.class#F5D151
entity.other.attribute-name.id.css, entity.other.attribute-name.id#F05161
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#99C2AA
markup.heading#F05161bold
markup.boldbold
markup.italicitalic
markup.quote#E8E7E3
markup.inline.raw, markup.fenced_code#7A9F82
invalid, invalid.illegal#FF6B6B