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#1A2223
  • activityBar.border#364145
  • activityBar.foreground#D17147
  • activityBarBadge.background#D17147
  • activityBarBadge.foreground#12191C
  • badge.background#D17147
  • badge.foreground#12191C
  • button.background#D17147
  • button.foreground#12191C
  • button.hoverBackground#D17147
  • dropdown.background#1A2223
  • dropdown.border#364145
  • dropdown.foreground#FFFFFF
  • editor.background#0C1113
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#1A222399
  • editor.selectionBackground#1D303480
  • editorBracketMatch.background#1D303455
  • editorBracketMatch.border#D17147
  • editorCursor.foreground#D17147
  • editorGroupHeader.tabsBackground#1A2223
  • editorIndentGuide.activeBackground#364145
  • editorIndentGuide.background#36414588
  • editorLineNumber.activeForeground#82C4C9
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#36414566
  • focusBorder#364145
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#D74E42
  • gitDecoration.modifiedResourceForeground#D49F35
  • gitDecoration.untrackedResourceForeground#53AC80
  • input.background#1A2223
  • input.border#364145
  • input.foreground#FFFFFF
  • inputOption.activeBorder#D17147
  • list.activeSelectionBackground#1D3034
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#D17147
  • list.hoverBackground#1A2223
  • list.inactiveSelectionBackground#1D3034
  • minimap.selectionHighlight#1D3034AA
  • panel.background#1A2223
  • panel.border#364145
  • peekView.border#364145
  • peekViewEditor.background#1A2223
  • peekViewTitle.background#1A2223
  • scrollbarSlider.activeBackground#D17147AA
  • scrollbarSlider.background#36414566
  • scrollbarSlider.hoverBackground#36414599
  • sideBar.background#12191C
  • sideBar.border#364145
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#1A2223
  • statusBar.border#364145
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#0C1113
  • tab.activeForeground#FFFFFF
  • tab.border#364145
  • tab.inactiveBackground#1D3034
  • tab.inactiveForeground#82C4C9
  • terminal.ansiBlack#0C1113
  • terminal.ansiBlue#82C4C9
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#82C4C9
  • terminal.ansiMagenta#D17147
  • terminal.ansiRed#D17147
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#1D3034
  • terminal.background#0C1113
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#1A2223
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#12191C
  • 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#82C4C9
constant.character.escape#D17147
constant.numeric#D17147
constant.language.boolean, constant.language.null, constant.language.undefined#D17147
constant, entity.name.constant, support.constant#D17147
keyword, storage.type, storage.modifier, storage.type.function#D17147
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#D17147
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#D17147
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#82C4C9
support.type.builtin, entity.name.type.primitive#82C4C9
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#E5E2DC
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#D17147
variable.parameter, variable.parameter.function#E5E2DC
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#82C4C9
variable, meta.definition.variable, variable.other.readwrite#E5E2DC
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#D17147
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#989081
entity.other.attribute-name, entity.other.attribute-name.html#82C4C9
support.class.component, entity.name.tag.template.value#D17147
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#53AC80
entity.other.attribute-name.class.css, entity.other.attribute-name.class#D17147
entity.other.attribute-name.id.css, entity.other.attribute-name.id#D17147
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#82C4C9
markup.heading#D17147bold
markup.boldbold
markup.italicitalic
markup.quote#E5E2DC
markup.inline.raw, markup.fenced_code#82C4C9
invalid, invalid.illegal#FF6B6B