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#F2F0ED
  • activityBar.border#DAD7D2
  • activityBar.foreground#CA5B2B
  • activityBarBadge.background#CA5B2B
  • activityBarBadge.foreground#FFFFFF
  • badge.background#CA5B2B
  • badge.foreground#FFFFFF
  • button.background#CA5B2B
  • button.foreground#FFFFFF
  • button.hoverBackground#3A885A
  • dropdown.background#FFFFFF
  • dropdown.border#D1BCB3
  • dropdown.foreground#563325
  • editor.background#FFFFFF
  • editor.foreground#683B27
  • editor.lineHighlightBackground#F2F0EDCC
  • editor.selectionBackground#DAE7DF66
  • editorBracketMatch.background#DAE7DF55
  • editorBracketMatch.border#CA5B2B
  • editorCursor.foreground#CA5B2B
  • editorGroupHeader.tabsBackground#F2F0ED
  • editorIndentGuide.activeBackground#D1BCB3
  • editorIndentGuide.background#DAD7D288
  • editorLineNumber.activeForeground#3A7854
  • editorLineNumber.foreground#5E7869AA
  • editorWhitespace.foreground#DAD7D266
  • focusBorder#D1BCB3
  • foreground#683B27
  • gitDecoration.deletedResourceForeground#C72929
  • gitDecoration.modifiedResourceForeground#8C6908
  • gitDecoration.untrackedResourceForeground#037C36
  • input.background#FFFFFF
  • input.border#D1BCB3
  • input.foreground#563325
  • inputOption.activeBorder#CA5B2B
  • list.activeSelectionBackground#DAE7DF
  • list.activeSelectionForeground#683B27
  • list.focusOutline#CA5B2B
  • list.hoverBackground#FBFAF9
  • list.inactiveSelectionBackground#E7EEEA
  • minimap.selectionHighlight#DAE7DFAA
  • panel.background#F2F0ED
  • panel.border#DAD7D2
  • peekView.border#D1BCB3
  • peekViewEditor.background#F0EEEB
  • peekViewTitle.background#F2F0ED
  • scrollbarSlider.activeBackground#CA5B2BAA
  • scrollbarSlider.background#D1BCB366
  • scrollbarSlider.hoverBackground#D1BCB399
  • sideBar.background#F7F5F3
  • sideBar.border#DAD7D2
  • sideBar.foreground#563325
  • sideBarTitle.foreground#683B27
  • statusBar.background#F2F0ED
  • statusBar.border#DAD7D2
  • statusBar.foreground#4C6C58
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#683B27
  • tab.border#DAD7D2
  • tab.inactiveBackground#E7EEEA
  • tab.inactiveForeground#3F835B
  • terminal.ansiBlack#683B27
  • terminal.ansiBlue#3F835B
  • terminal.ansiCyan#5E7869
  • terminal.ansiGreen#3A7854
  • terminal.ansiMagenta#3791BE
  • terminal.ansiRed#CA5B2B
  • terminal.ansiWhite#683B27
  • terminal.ansiYellow#C6DFEC
  • terminal.background#FFFFFF
  • terminal.foreground#683B27
  • titleBar.activeBackground#F2F0ED
  • titleBar.activeForeground#683B27
  • titleBar.inactiveBackground#F7F5F3
  • titleBar.inactiveForeground#5E7869
  • widget.shadow#744F3E55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#79717Fitalic
string, constant.other.symbol, string.regexp, string.template#037C36
constant.character.escape#8C5508
constant.numeric#8C6908
constant.language.boolean, constant.language.null, constant.language.undefined#A27910
constant, entity.name.constant, support.constant#B62020
keyword, storage.type, storage.modifier, storage.type.function#C72929
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#A72020
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#69676F
storage.type.class, storage.type.interface, storage.type.enum#C72929
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#8B8990
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#049F45
support.type.builtin, entity.name.type.primitive#0A9941
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#6A4F10
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#D84141
variable.parameter, variable.parameter.function#4B4950
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#188C48
variable, meta.definition.variable, variable.other.readwrite#29272F
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#C72929
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#79717F
entity.other.attribute-name, entity.other.attribute-name.html#049F45
support.class.component, entity.name.tag.template.value#8C6908
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#037C36
entity.other.attribute-name.class.css, entity.other.attribute-name.class#A27910
entity.other.attribute-name.id.css, entity.other.attribute-name.id#C72929
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#049F45
markup.heading#C72929bold
markup.boldbold
markup.italicitalic
markup.quote#29272F
markup.inline.raw, markup.fenced_code#037C36
invalid, invalid.illegal#C22929