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#171D26
  • activityBar.border#31373F
  • activityBar.foreground#E72333
  • activityBarBadge.background#E72333
  • activityBarBadge.foreground#121821
  • badge.background#E72333
  • badge.foreground#121821
  • button.background#E72333
  • button.foreground#121821
  • button.hoverBackground#4D8CCB
  • dropdown.background#1D232B
  • dropdown.border#415262
  • dropdown.foreground#EDECE8
  • editor.background#0F131A
  • editor.foreground#E5E2DC
  • editor.lineHighlightBackground#171D2699
  • editor.selectionBackground#27384980
  • editorBracketMatch.background#27384955
  • editorBracketMatch.border#E72333
  • editorCursor.foreground#E72333
  • editorGroupHeader.tabsBackground#171D26
  • editorIndentGuide.activeBackground#415262
  • editorIndentGuide.background#31373F88
  • editorLineNumber.activeForeground#538CC6
  • editorLineNumber.foreground#8494A4AA
  • editorWhitespace.foreground#31373F66
  • focusBorder#415262
  • foreground#E5E2DC
  • gitDecoration.deletedResourceForeground#F05161
  • gitDecoration.modifiedResourceForeground#E8C545
  • gitDecoration.untrackedResourceForeground#5E91E8
  • input.background#1D232B
  • input.border#415262
  • input.foreground#EDECE8
  • inputOption.activeBorder#E72333
  • list.activeSelectionBackground#273849
  • list.activeSelectionForeground#E5E2DC
  • list.focusOutline#E72333
  • list.hoverBackground#1E2329
  • list.inactiveSelectionBackground#1B2027
  • minimap.selectionHighlight#273849AA
  • panel.background#171D26
  • panel.border#31373F
  • peekView.border#415262
  • peekViewEditor.background#161B22
  • peekViewTitle.background#171D26
  • scrollbarSlider.activeBackground#E72333AA
  • scrollbarSlider.background#41526266
  • scrollbarSlider.hoverBackground#41526299
  • sideBar.background#121821
  • sideBar.border#31373F
  • sideBar.foreground#DFDDD8
  • sideBarTitle.foreground#E5E2DC
  • statusBar.background#171D26
  • statusBar.border#31373F
  • statusBar.foreground#818C98
  • tab.activeBackground#0F131A
  • tab.activeForeground#E5E2DC
  • tab.border#31373F
  • tab.inactiveBackground#1B2027
  • tab.inactiveForeground#5494D4
  • terminal.ansiBlack#0F131A
  • terminal.ansiBlue#5494D4
  • terminal.ansiCyan#8494A4
  • terminal.ansiGreen#538CC6
  • terminal.ansiMagenta#EEB72B
  • terminal.ansiRed#E72333
  • terminal.ansiWhite#E5E2DC
  • terminal.ansiYellow#795D15
  • terminal.background#0F131A
  • terminal.foreground#E5E2DC
  • titleBar.activeBackground#171D26
  • titleBar.activeForeground#E5E2DC
  • titleBar.inactiveBackground#121821
  • titleBar.inactiveForeground#8494A4
  • widget.shadow#070A0E55

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#75A6D7
constant.character.escape#86B8EA
constant.numeric#E8C545
constant.language.boolean, constant.language.null, constant.language.undefined#F1C555
constant, entity.name.constant, support.constant#E68991
keyword, storage.type, storage.modifier, storage.type.function#EB707A
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#F08992
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#EB707A
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#85ADD6
support.type.builtin, entity.name.type.primitive#9CBFE2
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#EB848D
variable.parameter, variable.parameter.function#C8C4BC
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#81A8CF
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#EB707A
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#89949F
entity.other.attribute-name, entity.other.attribute-name.html#85ADD6
support.class.component, entity.name.tag.template.value#E8C545
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#75A6D7
entity.other.attribute-name.class.css, entity.other.attribute-name.class#F1C555
entity.other.attribute-name.id.css, entity.other.attribute-name.id#EB707A
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#85ADD6
markup.heading#EB707Abold
markup.boldbold
markup.italicitalic
markup.quote#E9E7E2
markup.inline.raw, markup.fenced_code#75A6D7
invalid, invalid.illegal#FF6B6B