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#1C2126
  • activityBar.border#3A414A
  • activityBar.foreground#D7A542
  • activityBarBadge.background#D7A542
  • activityBarBadge.foreground#14191F
  • badge.background#D7A542
  • badge.foreground#14191F
  • button.background#D7A542
  • button.foreground#14191F
  • button.hoverBackground#D7A542
  • dropdown.background#1C2126
  • dropdown.border#3A414A
  • dropdown.foreground#FFFFFF
  • editor.background#0E1116
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#1C212699
  • editor.selectionBackground#212E3B80
  • editorBracketMatch.background#212E3B55
  • editorBracketMatch.border#D7A542
  • editorCursor.foreground#D7A542
  • editorGroupHeader.tabsBackground#1C2126
  • editorIndentGuide.activeBackground#3A414A
  • editorIndentGuide.background#3A414A88
  • editorLineNumber.activeForeground#8DB3CE
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#3A414A66
  • focusBorder#3A414A
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#D15347
  • gitDecoration.modifiedResourceForeground#D49F35
  • gitDecoration.untrackedResourceForeground#5CA37A
  • input.background#1C2126
  • input.border#3A414A
  • input.foreground#FFFFFF
  • inputOption.activeBorder#D7A542
  • list.activeSelectionBackground#212E3B
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#D7A542
  • list.hoverBackground#1C2126
  • list.inactiveSelectionBackground#212E3B
  • minimap.selectionHighlight#212E3BAA
  • panel.background#1C2126
  • panel.border#3A414A
  • peekView.border#3A414A
  • peekViewEditor.background#1C2126
  • peekViewTitle.background#1C2126
  • scrollbarSlider.activeBackground#D7A542AA
  • scrollbarSlider.background#3A414A66
  • scrollbarSlider.hoverBackground#3A414A99
  • sideBar.background#14191F
  • sideBar.border#3A414A
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#1C2126
  • statusBar.border#3A414A
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#0E1116
  • tab.activeForeground#FFFFFF
  • tab.border#3A414A
  • tab.inactiveBackground#212E3B
  • tab.inactiveForeground#8DB3CE
  • terminal.ansiBlack#0E1116
  • terminal.ansiBlue#8DB3CE
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#8DB3CE
  • terminal.ansiMagenta#D7A542
  • terminal.ansiRed#D7A542
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#212E3B
  • terminal.background#0E1116
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#1C2126
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#14191F
  • 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#8DB3CE
constant.character.escape#D7A542
constant.numeric#D7A542
constant.language.boolean, constant.language.null, constant.language.undefined#D7A542
constant, entity.name.constant, support.constant#D7A542
keyword, storage.type, storage.modifier, storage.type.function#D7A542
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#D7A542
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#D7A542
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#8DB3CE
support.type.builtin, entity.name.type.primitive#8DB3CE
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#D7A542
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#8DB3CE
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#D7A542
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#989081
entity.other.attribute-name, entity.other.attribute-name.html#8DB3CE
support.class.component, entity.name.tag.template.value#D7A542
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#D7A542
entity.other.attribute-name.id.css, entity.other.attribute-name.id#D7A542
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#8DB3CE
markup.heading#D7A542bold
markup.boldbold
markup.italicitalic
markup.quote#E5E2DC
markup.inline.raw, markup.fenced_code#8DB3CE
invalid, invalid.illegal#FF6B6B