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#131B25
  • activityBar.border#2A313C
  • activityBar.foreground#DC1829
  • activityBarBadge.background#DC1829
  • activityBarBadge.foreground#0F161F
  • badge.background#DC1829
  • badge.foreground#0F161F
  • button.background#DC1829
  • button.foreground#0F161F
  • button.hoverBackground#E7AF23
  • dropdown.background#18202A
  • dropdown.border#39626A
  • dropdown.foreground#EEF0F2
  • editor.background#0C1018
  • editor.foreground#E2E6E9
  • editor.lineHighlightBackground#131B2599
  • editor.selectionBackground#21304580
  • editorBracketMatch.background#21304555
  • editorBracketMatch.border#DC1829
  • editorCursor.foreground#DC1829
  • editorGroupHeader.tabsBackground#131B25
  • editorIndentGuide.activeBackground#39626A
  • editorIndentGuide.background#2A313C88
  • editorLineNumber.activeForeground#47BAD1
  • editorLineNumber.foreground#79A6AFAA
  • editorWhitespace.foreground#2A313C66
  • focusBorder#39626A
  • foreground#E2E6E9
  • gitDecoration.deletedResourceForeground#F05161
  • gitDecoration.modifiedResourceForeground#E8C545
  • gitDecoration.untrackedResourceForeground#5E91E8
  • input.background#18202A
  • input.border#39626A
  • input.foreground#EEF0F2
  • inputOption.activeBorder#DC1829
  • list.activeSelectionBackground#213045
  • list.activeSelectionForeground#E2E6E9
  • list.focusOutline#DC1829
  • list.hoverBackground#1A2028
  • list.inactiveSelectionBackground#171D26
  • minimap.selectionHighlight#213045AA
  • panel.background#131B25
  • panel.border#2A313C
  • peekView.border#39626A
  • peekViewEditor.background#121821
  • peekViewTitle.background#131B25
  • scrollbarSlider.activeBackground#DC1829AA
  • scrollbarSlider.background#39626A66
  • scrollbarSlider.hoverBackground#39626A99
  • sideBar.background#0F161F
  • sideBar.border#2A313C
  • sideBar.foreground#DDE0E4
  • sideBarTitle.foreground#E2E6E9
  • statusBar.background#131B25
  • statusBar.border#2A313C
  • statusBar.foreground#89949F
  • tab.activeBackground#0C1018
  • tab.activeForeground#E2E6E9
  • tab.border#2A313C
  • tab.inactiveBackground#171D26
  • tab.inactiveForeground#4DB6CB
  • terminal.ansiBlack#0C1018
  • terminal.ansiBlue#4DB6CB
  • terminal.ansiCyan#79A6AF
  • terminal.ansiGreen#47BAD1
  • terminal.ansiMagenta#2FBEDA
  • terminal.ansiRed#DC1829
  • terminal.ansiWhite#E2E6E9
  • terminal.ansiYellow#765C19
  • terminal.background#0C1018
  • terminal.foreground#E2E6E9
  • titleBar.activeBackground#131B25
  • titleBar.activeForeground#E2E6E9
  • titleBar.inactiveBackground#0F161F
  • titleBar.inactiveForeground#79A6AF
  • widget.shadow#05070B55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#89949Fitalic
string, constant.other.symbol, string.regexp, string.template#5E91E8
constant.character.escape#A0E1EE
constant.numeric#E8C545
constant.language.boolean, constant.language.null, constant.language.undefined#F5D151
constant, entity.name.constant, support.constant#F4DA9A
keyword, storage.type, storage.modifier, storage.type.function#F05161
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#FF7081
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#808A93
storage.type.class, storage.type.interface, storage.type.enum#F05161
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#778088
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#90D2DF
support.type.builtin, entity.name.type.primitive#A5DDE9
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#FF8091
variable.parameter, variable.parameter.function#BDC2C7
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#85C9D6
variable, meta.definition.variable, variable.other.readwrite#E2E6E9
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#F05161
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#89949F
entity.other.attribute-name, entity.other.attribute-name.html#90D2DF
support.class.component, entity.name.tag.template.value#E8C545
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#5E91E8
entity.other.attribute-name.class.css, entity.other.attribute-name.class#F5D151
entity.other.attribute-name.id.css, entity.other.attribute-name.id#F05161
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#90D2DF
markup.heading#F05161bold
markup.boldbold
markup.italicitalic
markup.quote#E2E6E9
markup.inline.raw, markup.fenced_code#5E91E8
invalid, invalid.illegal#FF6B6B