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#231E1A
  • activityBar.border#38332E
  • activityBar.foreground#C89D74
  • activityBarBadge.background#C89D74
  • activityBarBadge.foreground#1B1713
  • badge.background#C89D74
  • badge.foreground#1B1713
  • button.background#C89D74
  • button.foreground#1B1713
  • button.hoverBackground#C89D74
  • dropdown.background#29231F
  • dropdown.border#4F4740
  • dropdown.foreground#FFFFFF
  • editor.background#15120F
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#231E1A99
  • editor.selectionBackground#3B2B2180
  • editorBracketMatch.background#3B2B2155
  • editorBracketMatch.border#C89D74
  • editorCursor.foreground#C89D74
  • editorGroupHeader.tabsBackground#231E1A
  • editorIndentGuide.activeBackground#4F4740
  • editorIndentGuide.background#38332E88
  • editorLineNumber.activeForeground#709966
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#38332E66
  • focusBorder#4F4740
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#BF7469
  • gitDecoration.modifiedResourceForeground#C29266
  • gitDecoration.untrackedResourceForeground#6F9C63
  • input.background#29231F
  • input.border#4F4740
  • input.foreground#FFFFFF
  • inputOption.activeBorder#C89D74
  • list.activeSelectionBackground#3B2B21
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#C89D74
  • list.hoverBackground#26211D
  • list.inactiveSelectionBackground#1C221B
  • minimap.selectionHighlight#3B2B21AA
  • panel.background#231E1A
  • panel.border#38332E
  • peekView.border#4F4740
  • peekViewEditor.background#211C18
  • peekViewTitle.background#231E1A
  • scrollbarSlider.activeBackground#C89D74AA
  • scrollbarSlider.background#4F474066
  • scrollbarSlider.hoverBackground#4F474099
  • sideBar.background#1B1713
  • sideBar.border#38332E
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#231E1A
  • statusBar.border#38332E
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#15120F
  • tab.activeForeground#FFFFFF
  • tab.border#38332E
  • tab.inactiveBackground#1C221B
  • tab.inactiveForeground#74A06A
  • terminal.ansiBlack#15120F
  • terminal.ansiBlue#74A06A
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#709966
  • terminal.ansiMagenta#BE8B5B
  • terminal.ansiRed#C89D74
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#4A3526
  • terminal.background#15120F
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#231E1A
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#1B1713
  • titleBar.inactiveForeground#FFFFFF
  • widget.shadow#09080655

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#918578italic
string, constant.other.symbol, string.regexp, string.template#74A06A
constant.character.escape#C89D74
constant.numeric#C29266
constant.language.boolean, constant.language.null, constant.language.undefined#B6885D
constant, entity.name.constant, support.constant#BC8D62
keyword, storage.type, storage.modifier, storage.type.function#C89D74
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#BC8662
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#877A6E
storage.type.class, storage.type.interface, storage.type.enum#C89D74
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#746B63
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#AB927C
support.type.builtin, entity.name.type.primitive#B59D87
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#BC8D62
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#CEA783
variable.parameter, variable.parameter.function#BDB3A8
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#AE9E8F
variable, meta.definition.variable, variable.other.readwrite#E7E0DA
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#C89D74
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#877A6E
entity.other.attribute-name, entity.other.attribute-name.html#AB927C
support.class.component, entity.name.tag.template.value#C29266
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#74A06A
entity.other.attribute-name.class.css, entity.other.attribute-name.class#A79481
entity.other.attribute-name.id.css, entity.other.attribute-name.id#C89D74
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#AB927C
markup.heading#C89D74bold
markup.boldbold
markup.italicitalic
markup.quote#D5CCC3
markup.inline.raw, markup.fenced_code#74A06A
invalid, invalid.illegal#FF6B6B