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#709ECD
  • activityBarBadge.background#709ECD
  • activityBarBadge.foreground#15181E
  • badge.background#709ECD
  • badge.foreground#15181E
  • button.background#709ECD
  • button.foreground#15181E
  • button.hoverBackground#709ECD
  • dropdown.background#1D2026
  • dropdown.border#3C4149
  • dropdown.foreground#FFFFFF
  • editor.background#0E1015
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#1D202699
  • editor.selectionBackground#29312180
  • editorBracketMatch.background#29312155
  • editorBracketMatch.border#709ECD
  • editorCursor.foreground#709ECD
  • editorGroupHeader.tabsBackground#1D2026
  • editorIndentGuide.activeBackground#3C4149
  • editorIndentGuide.background#3C414988
  • editorLineNumber.activeForeground#A3BD7F
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#3C414966
  • focusBorder#3C4149
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#D15347
  • gitDecoration.modifiedResourceForeground#D49F35
  • gitDecoration.untrackedResourceForeground#5CA37A
  • input.background#1D2026
  • input.border#3C4149
  • input.foreground#FFFFFF
  • inputOption.activeBorder#709ECD
  • list.activeSelectionBackground#293121
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#709ECD
  • list.hoverBackground#1D2026
  • list.inactiveSelectionBackground#293121
  • minimap.selectionHighlight#293121AA
  • panel.background#1D2026
  • panel.border#3C4149
  • peekView.border#3C4149
  • peekViewEditor.background#1D2026
  • peekViewTitle.background#1D2026
  • scrollbarSlider.activeBackground#709ECDAA
  • 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#293121
  • tab.inactiveForeground#A3BD7F
  • terminal.ansiBlack#0E1015
  • terminal.ansiBlue#A3BD7F
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#A3BD7F
  • terminal.ansiMagenta#709ECD
  • terminal.ansiRed#709ECD
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#293121
  • 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#8C9881italic
string, constant.other.symbol, string.regexp, string.template#A3BD7F
constant.character.escape#709ECD
constant.numeric#709ECD
constant.language.boolean, constant.language.null, constant.language.undefined#709ECD
constant, entity.name.constant, support.constant#709ECD
keyword, storage.type, storage.modifier, storage.type.function#709ECD
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#709ECD
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#8C9881
storage.type.class, storage.type.interface, storage.type.enum#709ECD
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#8C9881
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#A3BD7F
support.type.builtin, entity.name.type.primitive#A3BD7F
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#709ECD
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#A3BD7F
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#709ECD
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#8C9881
entity.other.attribute-name, entity.other.attribute-name.html#A3BD7F
support.class.component, entity.name.tag.template.value#709ECD
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#709ECD
entity.other.attribute-name.id.css, entity.other.attribute-name.id#709ECD
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#A3BD7F
markup.heading#709ECDbold
markup.boldbold
markup.italicitalic
markup.quote#E4E2DD
markup.inline.raw, markup.fenced_code#A3BD7F
invalid, invalid.illegal#FF6B6B