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#312921
  • activityBar.border#433D37
  • activityBar.foreground#C9A036
  • activityBarBadge.background#C9A036
  • activityBarBadge.foreground#2C231C
  • badge.background#C9A036
  • badge.foreground#2C231C
  • button.background#C9A036
  • button.foreground#2C231C
  • button.hoverBackground#B6952B
  • dropdown.background#362D26
  • dropdown.border#564B43
  • dropdown.foreground#E1D6D7
  • editor.background#211C17
  • editor.foreground#D6A4AA
  • editor.lineHighlightBackground#31292199
  • editor.selectionBackground#48324280
  • editorBracketMatch.background#48324255
  • editorBracketMatch.border#C9A036
  • editorCursor.foreground#C9A036
  • editorGroupHeader.tabsBackground#312921
  • editorIndentGuide.activeBackground#564B43
  • editorIndentGuide.background#433D3788
  • editorLineNumber.activeForeground#629368
  • editorLineNumber.foreground#638868AA
  • editorWhitespace.foreground#433D3766
  • focusBorder#564B43
  • foreground#D6A4AA
  • gitDecoration.deletedResourceForeground#CC645C
  • gitDecoration.modifiedResourceForeground#DDB42C
  • gitDecoration.untrackedResourceForeground#5F9568
  • input.background#362D26
  • input.border#564B43
  • input.foreground#E1D6D7
  • inputOption.activeBorder#C9A036
  • list.activeSelectionBackground#483242
  • list.activeSelectionForeground#D6A4AA
  • list.focusOutline#C9A036
  • list.hoverBackground#2C262A
  • list.inactiveSelectionBackground#2B2228
  • minimap.selectionHighlight#483242AA
  • panel.background#312921
  • panel.border#433D37
  • peekView.border#564B43
  • peekViewEditor.background#26201C
  • peekViewTitle.background#312921
  • scrollbarSlider.activeBackground#C9A036AA
  • scrollbarSlider.background#564B4366
  • scrollbarSlider.hoverBackground#564B4399
  • sideBar.background#2C231C
  • sideBar.border#433D37
  • sideBar.foreground#CEA1A7
  • sideBarTitle.foreground#D6A4AA
  • statusBar.background#312921
  • statusBar.border#433D37
  • statusBar.foreground#A78B9F
  • tab.activeBackground#211C17
  • tab.activeForeground#D6A4AA
  • tab.border#433D37
  • tab.inactiveBackground#2B2228
  • tab.inactiveForeground#9F7F96
  • terminal.ansiBlack#211C17
  • terminal.ansiBlue#9F7F96
  • terminal.ansiCyan#638868
  • terminal.ansiGreen#629368
  • terminal.ansiMagenta#BE9C2D
  • terminal.ansiRed#C9A036
  • terminal.ansiWhite#D6A4AA
  • terminal.ansiYellow#6A5A25
  • terminal.background#211C17
  • terminal.foreground#D6A4AA
  • titleBar.activeBackground#312921
  • titleBar.activeForeground#D6A4AA
  • titleBar.inactiveBackground#2C231C
  • titleBar.inactiveForeground#638868
  • widget.shadow#100C0955

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#8C7385italic
string, constant.other.symbol, string.regexp, string.template#5F9568
constant.character.escape#DDB42C
constant.numeric#B6952B
constant.language.boolean, constant.language.null, constant.language.undefined#BEA137
constant, entity.name.constant, support.constant#CD8492
keyword, storage.type, storage.modifier, storage.type.function#CD707C
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#B95B67
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#84717F
storage.type.class, storage.type.interface, storage.type.enum#CD707C
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#72656E
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#987C90
support.type.builtin, entity.name.type.primitive#A3858E
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#C9A036
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#C37988
variable.parameter, variable.parameter.function#B78F96
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#B2767E
variable, meta.definition.variable, variable.other.readwrite#CEA1A7
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#CD707C
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#84717F
entity.other.attribute-name, entity.other.attribute-name.html#987C90
support.class.component, entity.name.tag.template.value#B6952B
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#5F9568
entity.other.attribute-name.class.css, entity.other.attribute-name.class#C9A036
entity.other.attribute-name.id.css, entity.other.attribute-name.id#CD707C
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#987C90
markup.heading#CD707Cbold
markup.boldbold
markup.italicitalic
markup.quote#CEA1A7
markup.inline.raw, markup.fenced_code#5F9568
invalid, invalid.illegal#FF6B6B