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#1D2026
  • activityBar.border#3C4149
  • activityBar.foreground#D35845
  • activityBarBadge.background#D35845
  • activityBarBadge.foreground#15181E
  • badge.background#D35845
  • badge.foreground#15181E
  • button.background#D35845
  • button.foreground#15181E
  • button.hoverBackground#D35845
  • dropdown.background#1D2026
  • dropdown.border#3C4149
  • dropdown.foreground#FFFFFF
  • editor.background#0E1015
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#1D202699
  • editor.selectionBackground#22303A80
  • editorBracketMatch.background#22303A55
  • editorBracketMatch.border#D35845
  • editorCursor.foreground#D35845
  • editorGroupHeader.tabsBackground#1D2026
  • editorIndentGuide.activeBackground#3C4149
  • editorIndentGuide.background#3C414988
  • editorLineNumber.activeForeground#8EB8CC
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#3C414966
  • focusBorder#3C4149
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#D74E42
  • gitDecoration.modifiedResourceForeground#D49A35
  • gitDecoration.untrackedResourceForeground#5CA37A
  • input.background#1D2026
  • input.border#3C4149
  • input.foreground#FFFFFF
  • inputOption.activeBorder#D35845
  • list.activeSelectionBackground#22303A
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#D35845
  • list.hoverBackground#1D2026
  • list.inactiveSelectionBackground#22303A
  • minimap.selectionHighlight#22303AAA
  • panel.background#1D2026
  • panel.border#3C4149
  • peekView.border#3C4149
  • peekViewEditor.background#1D2026
  • peekViewTitle.background#1D2026
  • scrollbarSlider.activeBackground#D35845AA
  • scrollbarSlider.background#3C414966
  • scrollbarSlider.hoverBackground#3C414999
  • sideBar.background#15181E
  • sideBar.border#3C4149
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#1D2026
  • statusBar.border#3C4149
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#0E1015
  • tab.activeForeground#FFFFFF
  • tab.border#3C4149
  • tab.inactiveBackground#22303A
  • tab.inactiveForeground#8EB8CC
  • terminal.ansiBlack#0E1015
  • terminal.ansiBlue#8EB8CC
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#8EB8CC
  • terminal.ansiMagenta#D35845
  • terminal.ansiRed#D35845
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#22303A
  • terminal.background#0E1015
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#1D2026
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#15181E
  • titleBar.inactiveForeground#FFFFFF
  • widget.shadow#0A0A0A55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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