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#F0EEEA
  • activityBar.border#CEC8C0
  • activityBar.foreground#B32619
  • activityBarBadge.background#B32619
  • activityBarBadge.foreground#FDFDFC
  • badge.background#B32619
  • badge.foreground#FDFDFC
  • button.background#B32619
  • button.foreground#FDFDFC
  • button.hoverBackground#B32619
  • dropdown.background#FDFDFC
  • dropdown.border#CEC8C0
  • dropdown.foreground#000000
  • editor.background#FDFDFC
  • editor.foreground#000000
  • editor.lineHighlightBackground#F0EEEACC
  • editor.selectionBackground#DFE8EC66
  • editorBracketMatch.background#DFE8EC55
  • editorBracketMatch.border#B32619
  • editorCursor.foreground#B32619
  • editorGroupHeader.tabsBackground#F0EEEA
  • editorIndentGuide.activeBackground#CEC8C0
  • editorIndentGuide.background#CEC8C088
  • editorLineNumber.activeForeground#345C79
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#CEC8C066
  • focusBorder#CEC8C0
  • foreground#000000
  • gitDecoration.deletedResourceForeground#A7271B
  • gitDecoration.modifiedResourceForeground#B37A19
  • gitDecoration.untrackedResourceForeground#376C4D
  • input.background#FDFDFC
  • input.border#CEC8C0
  • input.foreground#000000
  • inputOption.activeBorder#B32619
  • list.activeSelectionBackground#DFE8EC
  • list.activeSelectionForeground#000000
  • list.focusOutline#B32619
  • list.hoverBackground#FDFDFC
  • list.inactiveSelectionBackground#DFE8EC
  • minimap.selectionHighlight#DFE8ECAA
  • panel.background#F0EEEA
  • panel.border#CEC8C0
  • peekView.border#CEC8C0
  • peekViewEditor.background#FDFDFC
  • peekViewTitle.background#F0EEEA
  • scrollbarSlider.activeBackground#B32619AA
  • scrollbarSlider.background#CEC8C066
  • scrollbarSlider.hoverBackground#CEC8C099
  • sideBar.background#F7F6F2
  • sideBar.border#CEC8C0
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#F0EEEA
  • statusBar.border#CEC8C0
  • statusBar.foreground#000000
  • tab.activeBackground#FDFDFC
  • tab.activeForeground#000000
  • tab.border#CEC8C0
  • tab.inactiveBackground#DFE8EC
  • tab.inactiveForeground#345C79
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#345C79
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#345C79
  • terminal.ansiMagenta#B32619
  • terminal.ansiRed#B32619
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#DFE8EC
  • terminal.background#FDFDFC
  • terminal.foreground#000000
  • titleBar.activeBackground#F0EEEA
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F7F6F2
  • titleBar.inactiveForeground#000000
  • widget.shadow#7E716755

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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