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