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#F1EEE9
  • activityBar.border#D0C8BE
  • activityBar.foreground#964C2C
  • activityBarBadge.background#964C2C
  • activityBarBadge.foreground#FDFDFC
  • badge.background#964C2C
  • badge.foreground#FDFDFC
  • button.background#964C2C
  • button.foreground#FDFDFC
  • button.hoverBackground#964C2C
  • dropdown.background#FDFDFC
  • dropdown.border#D0C8BE
  • dropdown.foreground#000000
  • editor.background#FDFDFC
  • editor.foreground#000000
  • editor.lineHighlightBackground#F1EEE9CC
  • editor.selectionBackground#DFE3EC66
  • editorBracketMatch.background#DFE3EC55
  • editorBracketMatch.border#964C2C
  • editorCursor.foreground#964C2C
  • editorGroupHeader.tabsBackground#F1EEE9
  • editorIndentGuide.activeBackground#D0C8BE
  • editorIndentGuide.background#D0C8BE88
  • editorLineNumber.activeForeground#374981
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#D0C8BE66
  • focusBorder#D0C8BE
  • foreground#000000
  • gitDecoration.deletedResourceForeground#A82F24
  • gitDecoration.modifiedResourceForeground#AD7E1F
  • gitDecoration.untrackedResourceForeground#3B6852
  • input.background#FDFDFC
  • input.border#D0C8BE
  • input.foreground#000000
  • inputOption.activeBorder#964C2C
  • list.activeSelectionBackground#DFE3EC
  • list.activeSelectionForeground#000000
  • list.focusOutline#964C2C
  • list.hoverBackground#FDFDFC
  • list.inactiveSelectionBackground#DFE3EC
  • minimap.selectionHighlight#DFE3ECAA
  • panel.background#F1EEE9
  • panel.border#D0C8BE
  • peekView.border#D0C8BE
  • peekViewEditor.background#FDFDFC
  • peekViewTitle.background#F1EEE9
  • scrollbarSlider.activeBackground#964C2CAA
  • scrollbarSlider.background#D0C8BE66
  • scrollbarSlider.hoverBackground#D0C8BE99
  • sideBar.background#F8F6F2
  • sideBar.border#D0C8BE
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#F1EEE9
  • statusBar.border#D0C8BE
  • statusBar.foreground#000000
  • tab.activeBackground#FDFDFC
  • tab.activeForeground#000000
  • tab.border#D0C8BE
  • tab.inactiveBackground#DFE3EC
  • tab.inactiveForeground#374981
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#374981
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#374981
  • terminal.ansiMagenta#964C2C
  • terminal.ansiRed#964C2C
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#DFE3EC
  • terminal.background#FDFDFC
  • terminal.foreground#000000
  • titleBar.activeBackground#F1EEE9
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F8F6F2
  • titleBar.inactiveForeground#000000
  • widget.shadow#7E706355

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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