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#F1EDE9
  • activityBar.border#CFC7BF
  • activityBar.foreground#B8331E
  • activityBarBadge.background#B8331E
  • activityBarBadge.foreground#FDFDFC
  • badge.background#B8331E
  • badge.foreground#FDFDFC
  • button.background#B8331E
  • button.foreground#FDFDFC
  • button.hoverBackground#B8331E
  • dropdown.background#FDFDFC
  • dropdown.border#CFC7BF
  • dropdown.foreground#000000
  • editor.background#FDFDFC
  • editor.foreground#000000
  • editor.lineHighlightBackground#F1EDE9CC
  • editor.selectionBackground#DDEEE866
  • editorBracketMatch.background#DDEEE855
  • editorBracketMatch.border#B8331E
  • editorCursor.foreground#B8331E
  • editorGroupHeader.tabsBackground#F1EDE9
  • editorIndentGuide.activeBackground#CFC7BF
  • editorIndentGuide.background#CFC7BF88
  • editorLineNumber.activeForeground#2D7664
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#CFC7BF66
  • focusBorder#CFC7BF
  • foreground#000000
  • gitDecoration.deletedResourceForeground#AD2B1F
  • gitDecoration.modifiedResourceForeground#B88714
  • gitDecoration.untrackedResourceForeground#317252
  • input.background#FDFDFC
  • input.border#CFC7BF
  • input.foreground#000000
  • inputOption.activeBorder#B8331E
  • list.activeSelectionBackground#DDEEE8
  • list.activeSelectionForeground#000000
  • list.focusOutline#B8331E
  • list.hoverBackground#FDFDFC
  • list.inactiveSelectionBackground#DDEEE8
  • minimap.selectionHighlight#DDEEE8AA
  • panel.background#F1EDE9
  • panel.border#CFC7BF
  • peekView.border#CFC7BF
  • peekViewEditor.background#FDFDFC
  • peekViewTitle.background#F1EDE9
  • scrollbarSlider.activeBackground#B8331EAA
  • scrollbarSlider.background#CFC7BF66
  • scrollbarSlider.hoverBackground#CFC7BF99
  • sideBar.background#F8F5F2
  • sideBar.border#CFC7BF
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#F1EDE9
  • statusBar.border#CFC7BF
  • statusBar.foreground#000000
  • tab.activeBackground#FDFDFC
  • tab.activeForeground#000000
  • tab.border#CFC7BF
  • tab.inactiveBackground#DDEEE8
  • tab.inactiveForeground#2D7664
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2D7664
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#2D7664
  • terminal.ansiMagenta#B8331E
  • terminal.ansiRed#B8331E
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#DDEEE8
  • terminal.background#FDFDFC
  • terminal.foreground#000000
  • titleBar.activeBackground#F1EDE9
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F8F5F2
  • titleBar.inactiveForeground#000000
  • widget.shadow#81706555

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#817065italic
string, constant.other.symbol, string.regexp, string.template#2D7664
constant.character.escape#B8331E
constant.numeric#B8331E
constant.language.boolean, constant.language.null, constant.language.undefined#B8331E
constant, entity.name.constant, support.constant#B8331E
keyword, storage.type, storage.modifier, storage.type.function#B8331E
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#B8331E
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#817065
storage.type.class, storage.type.interface, storage.type.enum#B8331E
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#817065
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#2D7664
support.type.builtin, entity.name.type.primitive#2D7664
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#4C2E24
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#B8331E
variable.parameter, variable.parameter.function#4C2E24
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#2D7664
variable, meta.definition.variable, variable.other.readwrite#4C2E24
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#B8331E
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#817065
entity.other.attribute-name, entity.other.attribute-name.html#2D7664
support.class.component, entity.name.tag.template.value#B8331E
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#317252
entity.other.attribute-name.class.css, entity.other.attribute-name.class#B8331E
entity.other.attribute-name.id.css, entity.other.attribute-name.id#B8331E
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#2D7664
markup.heading#B8331Ebold
markup.boldbold
markup.italicitalic
markup.quote#4C2E24
markup.inline.raw, markup.fenced_code#2D7664
invalid, invalid.illegal#C22929