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#C75760
  • activityBarBadge.background#C75760
  • activityBarBadge.foreground#15181E
  • badge.background#C75760
  • badge.foreground#15181E
  • button.background#C75760
  • button.foreground#15181E
  • button.hoverBackground#C75760
  • dropdown.background#1D2026
  • dropdown.border#3C4149
  • dropdown.foreground#FFFFFF
  • editor.background#0F1115
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#1D202699
  • editor.selectionBackground#21302A80
  • editorBracketMatch.background#21302A55
  • editorBracketMatch.border#C75760
  • editorCursor.foreground#C75760
  • editorGroupHeader.tabsBackground#1D2026
  • editorIndentGuide.activeBackground#3C4149
  • editorIndentGuide.background#3C414988
  • editorLineNumber.activeForeground#83B99E
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#3C414966
  • focusBorder#3C4149
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#CD515B
  • gitDecoration.modifiedResourceForeground#D49F35
  • gitDecoration.untrackedResourceForeground#5CA380
  • input.background#1D2026
  • input.border#3C4149
  • input.foreground#FFFFFF
  • inputOption.activeBorder#C75760
  • list.activeSelectionBackground#21302A
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#C75760
  • list.hoverBackground#1D2026
  • list.inactiveSelectionBackground#21302A
  • minimap.selectionHighlight#21302AAA
  • panel.background#1D2026
  • panel.border#3C4149
  • peekView.border#3C4149
  • peekViewEditor.background#1D2026
  • peekViewTitle.background#1D2026
  • scrollbarSlider.activeBackground#C75760AA
  • 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#0F1115
  • tab.activeForeground#FFFFFF
  • tab.border#3C4149
  • tab.inactiveBackground#21302A
  • tab.inactiveForeground#83B99E
  • terminal.ansiBlack#0F1115
  • terminal.ansiBlue#83B99E
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#83B99E
  • terminal.ansiMagenta#C75760
  • terminal.ansiRed#C75760
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#21302A
  • terminal.background#0F1115
  • 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#789185italic
string, constant.other.symbol, string.regexp, string.template#83B99E
constant.character.escape#C75760
constant.numeric#C75760
constant.language.boolean, constant.language.null, constant.language.undefined#C75760
constant, entity.name.constant, support.constant#C75760
keyword, storage.type, storage.modifier, storage.type.function#C75760
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#C75760
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#789185
storage.type.class, storage.type.interface, storage.type.enum#C75760
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#789185
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#83B99E
support.type.builtin, entity.name.type.primitive#83B99E
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#E3E2DD
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#C75760
variable.parameter, variable.parameter.function#E3E2DD
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#83B99E
variable, meta.definition.variable, variable.other.readwrite#E3E2DD
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#C75760
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#789185
entity.other.attribute-name, entity.other.attribute-name.html#83B99E
support.class.component, entity.name.tag.template.value#C75760
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#5CA380
entity.other.attribute-name.class.css, entity.other.attribute-name.class#C75760
entity.other.attribute-name.id.css, entity.other.attribute-name.id#C75760
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#83B99E
markup.heading#C75760bold
markup.boldbold
markup.italicitalic
markup.quote#E3E2DD
markup.inline.raw, markup.fenced_code#83B99E
invalid, invalid.illegal#FF6B6B