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#151D28
  • activityBar.border#2E3642
  • activityBar.foreground#2B7CEE
  • activityBarBadge.background#2B7CEE
  • activityBarBadge.foreground#111822
  • badge.background#2B7CEE
  • badge.foreground#111822
  • button.background#2B7CEE
  • button.foreground#111822
  • button.hoverBackground#ECC113
  • dropdown.background#1A222E
  • dropdown.border#3D4E66
  • dropdown.foreground#EEECE8
  • editor.background#0E131B
  • editor.foreground#E7E4DA
  • editor.lineHighlightBackground#151D2899
  • editor.selectionBackground#22344F80
  • editorBracketMatch.background#22344F55
  • editorBracketMatch.border#2B7CEE
  • editorCursor.foreground#2B7CEE
  • editorGroupHeader.tabsBackground#151D28
  • editorIndentGuide.activeBackground#3D4E66
  • editorIndentGuide.background#2E364288
  • editorLineNumber.activeForeground#4487E4
  • editorLineNumber.foreground#7E90A9AA
  • editorWhitespace.foreground#2E364266
  • focusBorder#3D4E66
  • foreground#E7E4DA
  • gitDecoration.deletedResourceForeground#F05161
  • gitDecoration.modifiedResourceForeground#E8C545
  • gitDecoration.untrackedResourceForeground#5E91E8
  • input.background#1A222E
  • input.border#3D4E66
  • input.foreground#EEECE8
  • inputOption.activeBorder#2B7CEE
  • list.activeSelectionBackground#22344F
  • list.activeSelectionForeground#E7E4DA
  • list.focusOutline#2B7CEE
  • list.hoverBackground#1C222C
  • list.inactiveSelectionBackground#192029
  • minimap.selectionHighlight#22344FAA
  • panel.background#151D28
  • panel.border#2E3642
  • peekView.border#3D4E66
  • peekViewEditor.background#141B24
  • peekViewTitle.background#151D28
  • scrollbarSlider.activeBackground#2B7CEEAA
  • scrollbarSlider.background#3D4E6666
  • scrollbarSlider.hoverBackground#3D4E6699
  • sideBar.background#111822
  • sideBar.border#2E3642
  • sideBar.foreground#E0DED7
  • sideBarTitle.foreground#E7E4DA
  • statusBar.background#151D28
  • statusBar.border#2E3642
  • statusBar.foreground#7E8A9A
  • tab.activeBackground#0E131B
  • tab.activeForeground#E7E4DA
  • tab.border#2E3642
  • tab.inactiveBackground#192029
  • tab.inactiveForeground#EFCB39
  • terminal.ansiBlack#0E131B
  • terminal.ansiBlue#EFCB39
  • terminal.ansiCyan#7E90A9
  • terminal.ansiGreen#4487E4
  • terminal.ansiMagenta#F3C716
  • terminal.ansiRed#2B7CEE
  • terminal.ansiWhite#E7E4DA
  • terminal.ansiYellow#796515
  • terminal.background#0E131B
  • terminal.foreground#E7E4DA
  • titleBar.activeBackground#151D28
  • titleBar.activeForeground#E7E4DA
  • titleBar.inactiveBackground#111822
  • titleBar.inactiveForeground#7E90A9
  • widget.shadow#060A0E55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#8792A1italic
string, constant.other.symbol, string.regexp, string.template#639BE9
constant.character.escape#F7D964
constant.numeric#E8C545
constant.language.boolean, constant.language.null, constant.language.undefined#F1D255
constant, entity.name.constant, support.constant#F1DA7E
keyword, storage.type, storage.modifier, storage.type.function#6CA3EF
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#86B4F3
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#7E8895
storage.type.class, storage.type.interface, storage.type.enum#6CA3EF
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#757E8A
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#7CA5DE
support.type.builtin, entity.name.type.primitive#96B8E9
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#D8B041
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#DE7C7C
variable.parameter, variable.parameter.function#C8C5BC
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#79A0D8
variable, meta.definition.variable, variable.other.readwrite#E9E7E2
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#6CA3EF
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#8792A1
entity.other.attribute-name, entity.other.attribute-name.html#7CA5DE
support.class.component, entity.name.tag.template.value#E8C545
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#639BE9
entity.other.attribute-name.class.css, entity.other.attribute-name.class#F1D255
entity.other.attribute-name.id.css, entity.other.attribute-name.id#6CA3EF
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#7CA5DE
markup.heading#6CA3EFbold
markup.boldbold
markup.italicitalic
markup.quote#E9E7E2
markup.inline.raw, markup.fenced_code#639BE9
invalid, invalid.illegal#FF6B6B