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#EBE7E0
  • activityBar.border#D6D2CD
  • activityBar.foreground#A02222
  • activityBarBadge.background#A02222
  • activityBarBadge.foreground#FAF8F5
  • badge.background#A02222
  • badge.foreground#FAF8F5
  • button.background#A02222
  • button.foreground#FAF8F5
  • button.hoverBackground#A02222
  • dropdown.background#F5F3EF
  • dropdown.border#A5ABB6
  • dropdown.foreground#000000
  • editor.background#FAF8F5
  • editor.foreground#000000
  • editor.lineHighlightBackground#EBE7E0CC
  • editor.selectionBackground#D2DBE466
  • editorBracketMatch.background#D2DBE455
  • editorBracketMatch.border#A02222
  • editorCursor.foreground#A02222
  • editorGroupHeader.tabsBackground#EBE7E0
  • editorIndentGuide.activeBackground#A5ABB6
  • editorIndentGuide.background#D6D2CD88
  • editorLineNumber.activeForeground#455C73
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#D6D2CD66
  • focusBorder#A5ABB6
  • foreground#000000
  • gitDecoration.deletedResourceForeground#A02222
  • gitDecoration.modifiedResourceForeground#987116
  • gitDecoration.untrackedResourceForeground#396A52
  • input.background#F5F3EF
  • input.border#A5ABB6
  • input.foreground#000000
  • inputOption.activeBorder#A02222
  • list.activeSelectionBackground#D2DBE4
  • list.activeSelectionForeground#000000
  • list.focusOutline#A02222
  • list.hoverBackground#F7F5F3
  • list.inactiveSelectionBackground#E1E6EA
  • minimap.selectionHighlight#D2DBE4AA
  • panel.background#EBE7E0
  • panel.border#D6D2CD
  • peekView.border#A5ABB6
  • peekViewEditor.background#F1E7D0
  • peekViewTitle.background#EBE7E0
  • scrollbarSlider.activeBackground#A02222AA
  • scrollbarSlider.background#A5ABB666
  • scrollbarSlider.hoverBackground#A5ABB699
  • sideBar.background#F2EEE8
  • sideBar.border#D6D2CD
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#EBE7E0
  • statusBar.border#D6D2CD
  • statusBar.foreground#000000
  • tab.activeBackground#FAF8F5
  • tab.activeForeground#000000
  • tab.border#D6D2CD
  • tab.inactiveBackground#E1E6EA
  • tab.inactiveForeground#385775
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#385775
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#455C73
  • terminal.ansiMagenta#DCA218
  • terminal.ansiRed#A02222
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#EACC86
  • terminal.background#FAF8F5
  • terminal.foreground#000000
  • titleBar.activeBackground#EBE7E0
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F2EEE8
  • titleBar.inactiveForeground#000000
  • widget.shadow#454E5E55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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