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#F1EEEA
  • activityBar.border#CEC8C0
  • activityBar.foreground#B32E19
  • activityBarBadge.background#B32E19
  • activityBarBadge.foreground#FDFDFC
  • badge.background#B32E19
  • badge.foreground#FDFDFC
  • button.background#B32E19
  • button.foreground#FDFDFC
  • button.hoverBackground#B32E19
  • dropdown.background#FDFDFC
  • dropdown.border#CEC8C0
  • dropdown.foreground#000000
  • editor.background#FDFDFC
  • editor.foreground#000000
  • editor.lineHighlightBackground#F1EEEACC
  • editor.selectionBackground#DEE9ED66
  • editorBracketMatch.background#DEE9ED55
  • editorBracketMatch.border#B32E19
  • editorCursor.foreground#B32E19
  • editorGroupHeader.tabsBackground#F1EEEA
  • editorIndentGuide.activeBackground#CEC8C0
  • editorIndentGuide.background#CEC8C088
  • editorLineNumber.activeForeground#32637B
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#CEC8C066
  • focusBorder#CEC8C0
  • foreground#000000
  • gitDecoration.deletedResourceForeground#A7271B
  • gitDecoration.modifiedResourceForeground#B88114
  • gitDecoration.untrackedResourceForeground#356E52
  • input.background#FDFDFC
  • input.border#CEC8C0
  • input.foreground#000000
  • inputOption.activeBorder#B32E19
  • list.activeSelectionBackground#DEE9ED
  • list.activeSelectionForeground#000000
  • list.focusOutline#B32E19
  • list.hoverBackground#FDFDFC
  • list.inactiveSelectionBackground#DEE9ED
  • minimap.selectionHighlight#DEE9EDAA
  • panel.background#F1EEEA
  • panel.border#CEC8C0
  • peekView.border#CEC8C0
  • peekViewEditor.background#FDFDFC
  • peekViewTitle.background#F1EEEA
  • scrollbarSlider.activeBackground#B32E19AA
  • scrollbarSlider.background#CEC8C066
  • scrollbarSlider.hoverBackground#CEC8C099
  • sideBar.background#F8F6F2
  • sideBar.border#CEC8C0
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#F1EEEA
  • statusBar.border#CEC8C0
  • statusBar.foreground#000000
  • tab.activeBackground#FDFDFC
  • tab.activeForeground#000000
  • tab.border#CEC8C0
  • tab.inactiveBackground#DEE9ED
  • tab.inactiveForeground#32637B
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#32637B
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#32637B
  • terminal.ansiMagenta#B32E19
  • terminal.ansiRed#B32E19
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#DEE9ED
  • terminal.background#FDFDFC
  • terminal.foreground#000000
  • titleBar.activeBackground#F1EEEA
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F8F6F2
  • 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#32637B
constant.character.escape#B32E19
constant.numeric#B32E19
constant.language.boolean, constant.language.null, constant.language.undefined#B32E19
constant, entity.name.constant, support.constant#B32E19
keyword, storage.type, storage.modifier, storage.type.function#B32E19
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#B32E19
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#B32E19
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#32637B
support.type.builtin, entity.name.type.primitive#32637B
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#3C2720
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#B32E19
variable.parameter, variable.parameter.function#3C2720
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#32637B
variable, meta.definition.variable, variable.other.readwrite#3C2720
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#B32E19
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#7E7167
entity.other.attribute-name, entity.other.attribute-name.html#32637B
support.class.component, entity.name.tag.template.value#B32E19
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#356E52
entity.other.attribute-name.class.css, entity.other.attribute-name.class#B32E19
entity.other.attribute-name.id.css, entity.other.attribute-name.id#B32E19
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#32637B
markup.heading#B32E19bold
markup.boldbold
markup.italicitalic
markup.quote#3C2720
markup.inline.raw, markup.fenced_code#32637B
invalid, invalid.illegal#C22929