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#2A2822
  • activityBar.border#38353B
  • activityBar.foreground#5E85A1
  • activityBarBadge.background#5E85A1
  • activityBarBadge.foreground#25221E
  • badge.background#5E85A1
  • badge.foreground#25221E
  • button.background#5E85A1
  • button.foreground#25221E
  • button.hoverBackground#597791
  • dropdown.background#302D27
  • dropdown.border#3F4850
  • dropdown.foreground#E3E4E8
  • editor.background#1D1B16
  • editor.foreground#CDCFD5
  • editor.lineHighlightBackground#2A282299
  • editor.selectionBackground#2A343C80
  • editorBracketMatch.background#2A343C55
  • editorBracketMatch.border#5E85A1
  • editorCursor.foreground#5E85A1
  • editorGroupHeader.tabsBackground#2A2822
  • editorIndentGuide.activeBackground#3F4850
  • editorIndentGuide.background#38353B88
  • editorLineNumber.activeForeground#5E786B
  • editorLineNumber.foreground#7A7283AA
  • editorWhitespace.foreground#38353B66
  • focusBorder#3F4850
  • foreground#CDCFD5
  • gitDecoration.deletedResourceForeground#B27E76
  • gitDecoration.modifiedResourceForeground#A98D4C
  • gitDecoration.untrackedResourceForeground#69967E
  • input.background#302D27
  • input.border#3F4850
  • input.foreground#E3E4E8
  • inputOption.activeBorder#5E85A1
  • list.activeSelectionBackground#2A343C
  • list.activeSelectionForeground#CDCFD5
  • list.focusOutline#5E85A1
  • list.hoverBackground#272421
  • list.inactiveSelectionBackground#202527
  • minimap.selectionHighlight#2A343CAA
  • panel.background#2A2822
  • panel.border#38353B
  • peekView.border#3F4850
  • peekViewEditor.background#241E21
  • peekViewTitle.background#2A2822
  • scrollbarSlider.activeBackground#5E85A1AA
  • scrollbarSlider.background#3F485066
  • scrollbarSlider.hoverBackground#3F485099
  • sideBar.background#25221E
  • sideBar.border#38353B
  • sideBar.foreground#C8C9D0
  • sideBarTitle.foreground#CDCFD5
  • statusBar.background#2A2822
  • statusBar.border#38353B
  • statusBar.foreground#9C8FA3
  • tab.activeBackground#1D1B16
  • tab.activeForeground#CDCFD5
  • tab.border#38353B
  • tab.inactiveBackground#202527
  • tab.inactiveForeground#5B778F
  • terminal.ansiBlack#1D1B16
  • terminal.ansiBlue#5B778F
  • terminal.ansiCyan#7A7283
  • terminal.ansiGreen#5E786B
  • terminal.ansiMagenta#5E8271
  • terminal.ansiRed#5E85A1
  • terminal.ansiWhite#CDCFD5
  • terminal.ansiYellow#4C3942
  • terminal.background#1D1B16
  • terminal.foreground#CDCFD5
  • titleBar.activeBackground#2A2822
  • titleBar.activeForeground#CDCFD5
  • titleBar.inactiveBackground#25221E
  • titleBar.inactiveForeground#7A7283
  • widget.shadow#0F0D0B55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#7A7283italic
string, constant.other.symbol, string.regexp, string.template#69967E
constant.character.escape#7C9CAB
constant.numeric#A98D4C
constant.language.boolean, constant.language.null, constant.language.undefined#9B8450
constant, entity.name.constant, support.constant#AB837C
keyword, storage.type, storage.modifier, storage.type.function#5E85A1
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#517290
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#6B6572
storage.type.class, storage.type.interface, storage.type.enum#5E85A1
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#615C66
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#9085A3
support.type.builtin, entity.name.type.primitive#9B8DB0
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#5E8271
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#708BA4
variable.parameter, variable.parameter.function#A3A5AE
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#A092AA
variable, meta.definition.variable, variable.other.readwrite#C8C9D0
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#5E85A1
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#6B6572
entity.other.attribute-name, entity.other.attribute-name.html#9085A3
support.class.component, entity.name.tag.template.value#A98D4C
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#69967E
entity.other.attribute-name.class.css, entity.other.attribute-name.class#9B8450
entity.other.attribute-name.id.css, entity.other.attribute-name.id#5E85A1
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#9085A3
markup.heading#5E85A1bold
markup.boldbold
markup.italicitalic
markup.quote#C8C9D0
markup.inline.raw, markup.fenced_code#69967E
invalid, invalid.illegal#FF6B6B