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#2C202C
  • activityBar.border#3D323E
  • activityBar.foreground#AB7C94
  • activityBarBadge.background#AB7C94
  • activityBarBadge.foreground#271B27
  • badge.background#AB7C94
  • badge.foreground#271B27
  • button.background#AB7C94
  • button.foreground#271B27
  • button.hoverBackground#A76285
  • dropdown.background#312531
  • dropdown.border#4D3F50
  • dropdown.foreground#E2DDE4
  • editor.background#1E141F
  • editor.foreground#CFC7D1
  • editor.lineHighlightBackground#2C202C99
  • editor.selectionBackground#37274980
  • editorBracketMatch.background#37274955
  • editorBracketMatch.border#AB7C94
  • editorCursor.foreground#AB7C94
  • editorGroupHeader.tabsBackground#2C202C
  • editorIndentGuide.activeBackground#4D3F50
  • editorIndentGuide.background#3D323E88
  • editorLineNumber.activeForeground#7F6996
  • editorLineNumber.foreground#8A7B8EAA
  • editorWhitespace.foreground#3D323E66
  • focusBorder#4D3F50
  • foreground#CFC7D1
  • gitDecoration.deletedResourceForeground#BD6B7D
  • gitDecoration.modifiedResourceForeground#C8A241
  • gitDecoration.untrackedResourceForeground#649075
  • input.background#312531
  • input.border#4D3F50
  • input.foreground#E2DDE4
  • inputOption.activeBorder#AB7C94
  • list.activeSelectionBackground#372749
  • list.activeSelectionForeground#CFC7D1
  • list.focusOutline#AB7C94
  • list.hoverBackground#281F27
  • list.inactiveSelectionBackground#231C2C
  • minimap.selectionHighlight#372749AA
  • panel.background#2C202C
  • panel.border#3D323E
  • peekView.border#4D3F50
  • peekViewEditor.background#231A23
  • peekViewTitle.background#2C202C
  • scrollbarSlider.activeBackground#AB7C94AA
  • scrollbarSlider.background#4D3F5066
  • scrollbarSlider.hoverBackground#4D3F5099
  • sideBar.background#271B27
  • sideBar.border#3D323E
  • sideBar.foreground#C9C1CD
  • sideBarTitle.foreground#CFC7D1
  • statusBar.background#2C202C
  • statusBar.border#3D323E
  • statusBar.foreground#96879C
  • tab.activeBackground#1E141F
  • tab.activeForeground#CFC7D1
  • tab.border#3D323E
  • tab.inactiveBackground#231C2C
  • tab.inactiveForeground#8869AB
  • terminal.ansiBlack#1E141F
  • terminal.ansiBlue#8869AB
  • terminal.ansiCyan#8A7B8E
  • terminal.ansiGreen#7F6996
  • terminal.ansiMagenta#6E81B9
  • terminal.ansiRed#AB7C94
  • terminal.ansiWhite#CFC7D1
  • terminal.ansiYellow#5A2B42
  • terminal.background#1E141F
  • terminal.foreground#CFC7D1
  • titleBar.activeBackground#2C202C
  • titleBar.activeForeground#CFC7D1
  • titleBar.inactiveBackground#271B27
  • titleBar.inactiveForeground#8A7B8E
  • widget.shadow#100A1055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#8A7B8Eitalic
string, constant.other.symbol, string.regexp, string.template#6979AB
constant.character.escape#6E81B9
constant.numeric#A4708A
constant.language.boolean, constant.language.null, constant.language.undefined#966985
constant, entity.name.constant, support.constant#9A81A7
keyword, storage.type, storage.modifier, storage.type.function#AB7C94
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#9D6C88
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#7D7184
storage.type.class, storage.type.interface, storage.type.enum#AB7C94
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#6D6572
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#857198
support.type.builtin, entity.name.type.primitive#8E7F9F
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#79678E
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#AE7A96
variable.parameter, variable.parameter.function#AAA0B1
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#8B799A
variable, meta.definition.variable, variable.other.readwrite#CFC7D1
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#AB7C94
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#8A7B8E
entity.other.attribute-name, entity.other.attribute-name.html#857198
support.class.component, entity.name.tag.template.value#A4708A
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#678378
entity.other.attribute-name.class.css, entity.other.attribute-name.class#79678E
entity.other.attribute-name.id.css, entity.other.attribute-name.id#AB7C94
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#857198
markup.heading#AB7C94bold
markup.boldbold
markup.italicitalic
markup.quote#CFC7D1
markup.inline.raw, markup.fenced_code#6979AB
invalid, invalid.illegal#FF6B6B
Minor Themes by Lenik - VS Code Theme