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#EEEAE2
  • activityBar.border#DBD7D1
  • activityBar.foreground#B8281E
  • activityBarBadge.background#B8281E
  • activityBarBadge.foreground#FCFBF8
  • badge.background#B8281E
  • badge.foreground#FCFBF8
  • button.background#B8281E
  • button.foreground#FCFBF8
  • button.hoverBackground#B8281E
  • dropdown.background#F8F6F1
  • dropdown.border#C2B8AE
  • dropdown.foreground#000000
  • editor.background#FCFBF8
  • editor.foreground#000000
  • editor.lineHighlightBackground#EEEAE2CC
  • editor.selectionBackground#D1E6DD66
  • editorBracketMatch.background#D1E6DD55
  • editorBracketMatch.border#B8281E
  • editorCursor.foreground#B8281E
  • editorGroupHeader.tabsBackground#EEEAE2
  • editorIndentGuide.activeBackground#C2B8AE
  • editorIndentGuide.background#DBD7D188
  • editorLineNumber.activeForeground#3E6F5B
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#DBD7D166
  • focusBorder#C2B8AE
  • foreground#000000
  • gitDecoration.deletedResourceForeground#AF261D
  • gitDecoration.modifiedResourceForeground#936F1A
  • gitDecoration.untrackedResourceForeground#317257
  • input.background#F8F6F1
  • input.border#C2B8AE
  • input.foreground#000000
  • inputOption.activeBorder#B8281E
  • list.activeSelectionBackground#D1E6DD
  • list.activeSelectionForeground#000000
  • list.focusOutline#B8281E
  • list.hoverBackground#FAF8F5
  • list.inactiveSelectionBackground#E0EBE6
  • minimap.selectionHighlight#D1E6DDAA
  • panel.background#EEEAE2
  • panel.border#DBD7D1
  • peekView.border#C2B8AE
  • peekViewEditor.background#F4E3E1
  • peekViewTitle.background#EEEAE2
  • scrollbarSlider.activeBackground#B8281EAA
  • scrollbarSlider.background#C2B8AE66
  • scrollbarSlider.hoverBackground#C2B8AE99
  • sideBar.background#F5F1EB
  • sideBar.border#DBD7D1
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#EEEAE2
  • statusBar.border#DBD7D1
  • statusBar.foreground#000000
  • tab.activeBackground#FCFBF8
  • tab.activeForeground#000000
  • tab.border#DBD7D1
  • tab.inactiveBackground#E0EBE6
  • tab.inactiveForeground#356E56
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#356E56
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#3E6F5B
  • terminal.ansiMagenta#DDAC3C
  • terminal.ansiRed#B8281E
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#F1D89D
  • terminal.background#FCFBF8
  • terminal.foreground#000000
  • titleBar.activeBackground#EEEAE2
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F5F1EB
  • titleBar.inactiveForeground#000000
  • widget.shadow#4D4D4D55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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