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#161722
  • activityBar.border#2D2F39
  • activityBar.foreground#AB54DE
  • activityBarBadge.background#AB54DE
  • activityBarBadge.foreground#11121D
  • badge.background#AB54DE
  • badge.foreground#11121D
  • button.background#AB54DE
  • button.foreground#11121D
  • button.hoverBackground#EA2A30
  • dropdown.background#1B1C28
  • dropdown.border#40444F
  • dropdown.foreground#EEEFF1
  • editor.background#0D0D17
  • editor.foreground#E3E5E8
  • editor.lineHighlightBackground#16172299
  • editor.selectionBackground#1C3F3380
  • editorBracketMatch.background#1C3F3355
  • editorBracketMatch.border#AB54DE
  • editorCursor.foreground#AB54DE
  • editorGroupHeader.tabsBackground#161722
  • editorIndentGuide.activeBackground#40444F
  • editorIndentGuide.background#2D2F3988
  • editorLineNumber.activeForeground#2DBE62
  • editorLineNumber.foreground#808593AA
  • editorWhitespace.foreground#2D2F3966
  • focusBorder#40444F
  • foreground#E3E5E8
  • gitDecoration.deletedResourceForeground#D165EC
  • gitDecoration.modifiedResourceForeground#F6CD28
  • gitDecoration.untrackedResourceForeground#36C96C
  • input.background#1B1C28
  • input.border#40444F
  • input.foreground#EEEFF1
  • inputOption.activeBorder#AB54DE
  • list.activeSelectionBackground#1C3F33
  • list.activeSelectionForeground#E3E5E8
  • list.focusOutline#AB54DE
  • list.hoverBackground#1A1C23
  • list.inactiveSelectionBackground#171921
  • minimap.selectionHighlight#1C3F33AA
  • panel.background#161722
  • panel.border#2D2F39
  • peekView.border#40444F
  • peekViewEditor.background#12131C
  • peekViewTitle.background#161722
  • scrollbarSlider.activeBackground#AB54DEAA
  • scrollbarSlider.background#40444F66
  • scrollbarSlider.hoverBackground#40444F99
  • sideBar.background#11121D
  • sideBar.border#2D2F39
  • sideBar.foreground#DDDFE3
  • sideBarTitle.foreground#E3E5E8
  • statusBar.background#161722
  • statusBar.border#2D2F39
  • statusBar.foreground#838895
  • tab.activeBackground#0D0D17
  • tab.activeForeground#E3E5E8
  • tab.border#2D2F39
  • tab.inactiveBackground#171921
  • tab.inactiveForeground#3389EB
  • terminal.ansiBlack#0D0D17
  • terminal.ansiBlue#3389EB
  • terminal.ansiCyan#808593
  • terminal.ansiGreen#2DBE62
  • terminal.ansiMagenta#0FC3F0
  • terminal.ansiRed#AB54DE
  • terminal.ansiWhite#E3E5E8
  • terminal.ansiYellow#CEA609
  • terminal.background#0D0D17
  • terminal.foreground#E3E5E8
  • titleBar.activeBackground#161722
  • titleBar.activeForeground#E3E5E8
  • titleBar.inactiveBackground#11121D
  • titleBar.inactiveForeground#808593
  • widget.shadow#05060A55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#808593italic
string, constant.other.symbol, string.regexp, string.template#36C96C
constant.character.escape#36CCF2
constant.numeric#F6CD28
constant.language.boolean, constant.language.null, constant.language.undefined#EDC626
constant, entity.name.constant, support.constant#EE4F54
keyword, storage.type, storage.modifier, storage.type.function#AB54DE
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#CF67E9
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#808593
storage.type.class, storage.type.interface, storage.type.enum#AB54DE
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#6E727C
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#3389EB
support.type.builtin, entity.name.type.primitive#5298F4
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#41C873
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#DB7DF2
variable.parameter, variable.parameter.function#B2B5BD
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#B981DA
variable, meta.definition.variable, variable.other.readwrite#DDDFE3
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#AB54DE
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#808593
entity.other.attribute-name, entity.other.attribute-name.html#3389EB
support.class.component, entity.name.tag.template.value#F6CD28
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#36C96C
entity.other.attribute-name.class.css, entity.other.attribute-name.class#EDC626
entity.other.attribute-name.id.css, entity.other.attribute-name.id#AB54DE
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#3389EB
markup.heading#AB54DEbold
markup.boldbold
markup.italicitalic
markup.quote#DDDFE3
markup.inline.raw, markup.fenced_code#36C96C
invalid, invalid.illegal#FF6B6B