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#14181F
  • activityBar.border#282C33
  • activityBar.foreground#DA2F2F
  • activityBarBadge.background#DA2F2F
  • activityBarBadge.foreground#0D1016
  • badge.background#DA2F2F
  • badge.foreground#0D1016
  • button.background#DA2F2F
  • button.foreground#0D1016
  • button.hoverBackground#DA2F2F
  • dropdown.background#181D25
  • dropdown.border#393F4C
  • dropdown.foreground#FFFFFF
  • editor.background#090C10
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#14181F99
  • editor.selectionBackground#1F3A4780
  • editorBracketMatch.background#1F3A4755
  • editorBracketMatch.border#DA2F2F
  • editorCursor.foreground#DA2F2F
  • editorGroupHeader.tabsBackground#14181F
  • editorIndentGuide.activeBackground#393F4C
  • editorIndentGuide.background#282C3388
  • editorLineNumber.activeForeground#69A9BF
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#282C3366
  • focusBorder#393F4C
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#E44444
  • gitDecoration.modifiedResourceForeground#E0A929
  • gitDecoration.untrackedResourceForeground#50A57A
  • input.background#181D25
  • input.border#393F4C
  • input.foreground#FFFFFF
  • inputOption.activeBorder#DA2F2F
  • list.activeSelectionBackground#1F3A47
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#DA2F2F
  • list.hoverBackground#171E21
  • list.inactiveSelectionBackground#172126
  • minimap.selectionHighlight#1F3A47AA
  • panel.background#14181F
  • panel.border#282C33
  • peekView.border#393F4C
  • peekViewEditor.background#12151C
  • peekViewTitle.background#14181F
  • scrollbarSlider.activeBackground#DA2F2FAA
  • scrollbarSlider.background#393F4C66
  • scrollbarSlider.hoverBackground#393F4C99
  • sideBar.background#0D1016
  • sideBar.border#282C33
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#14181F
  • statusBar.border#282C33
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#090C10
  • tab.activeForeground#FFFFFF
  • tab.border#282C33
  • tab.inactiveBackground#172126
  • tab.inactiveForeground#69B9D3
  • terminal.ansiBlack#090C10
  • terminal.ansiBlue#69B9D3
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#69A9BF
  • terminal.ansiMagenta#DFA620
  • terminal.ansiRed#DA2F2F
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#6F2020
  • terminal.background#090C10
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#14181F
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#0D1016
  • titleBar.inactiveForeground#FFFFFF
  • widget.shadow#03050755

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#949EA8italic
string, constant.other.symbol, string.regexp, string.template#69B9D3
constant.character.escape#DFA620
constant.numeric#DA2F2F
constant.language.boolean, constant.language.null, constant.language.undefined#DA2F2F
constant, entity.name.constant, support.constant#DFB249
keyword, storage.type, storage.modifier, storage.type.function#DA2F2F
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#DFB249
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#949EA8
storage.type.class, storage.type.interface, storage.type.enum#DA2F2F
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#949EA8
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#69A9BF
support.type.builtin, entity.name.type.primitive#69B9D3
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#E0E6EB
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#DA2F2F
variable.parameter, variable.parameter.function#E0E6EB
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#69A9BF
variable, meta.definition.variable, variable.other.readwrite#E0E6EB
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#DA2F2F
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#949EA8
entity.other.attribute-name, entity.other.attribute-name.html#69B9D3
support.class.component, entity.name.tag.template.value#DA2F2F
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#50A57A
entity.other.attribute-name.class.css, entity.other.attribute-name.class#DA2F2F
entity.other.attribute-name.id.css, entity.other.attribute-name.id#DA2F2F
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#69B9D3
markup.heading#DA2F2Fbold
markup.boldbold
markup.italicitalic
markup.quote#D0D6DC
markup.inline.raw, markup.fenced_code#69B9D3
invalid, invalid.illegal#FF6B6B