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#16221E
  • activityBar.border#2D3935
  • activityBar.foreground#E02929
  • activityBarBadge.background#E02929
  • activityBarBadge.foreground#121C19
  • badge.background#E02929
  • badge.foreground#121C19
  • button.background#E02929
  • button.foreground#121C19
  • button.hoverBackground#CA6D2B
  • dropdown.background#1B2723
  • dropdown.border#3B544C
  • dropdown.foreground#E9EBEC
  • editor.background#0E1614
  • editor.foreground#DDE1E3
  • editor.lineHighlightBackground#16221E99
  • editor.selectionBackground#26403780
  • editorBracketMatch.background#26403755
  • editorBracketMatch.border#E02929
  • editorCursor.foreground#E02929
  • editorGroupHeader.tabsBackground#16221E
  • editorIndentGuide.activeBackground#3B544C
  • editorIndentGuide.background#2D393588
  • editorLineNumber.activeForeground#5495B6
  • editorLineNumber.foreground#7B9D92AA
  • editorWhitespace.foreground#2D393566
  • focusBorder#3B544C
  • foreground#DDE1E3
  • gitDecoration.deletedResourceForeground#F05161
  • gitDecoration.modifiedResourceForeground#E8C545
  • gitDecoration.untrackedResourceForeground#5AAF93
  • input.background#1B2723
  • input.border#3B544C
  • input.foreground#E9EBEC
  • inputOption.activeBorder#E02929
  • list.activeSelectionBackground#264037
  • list.activeSelectionForeground#DDE1E3
  • list.focusOutline#E02929
  • list.hoverBackground#1D2623
  • list.inactiveSelectionBackground#1A2320
  • minimap.selectionHighlight#264037AA
  • panel.background#16221E
  • panel.border#2D3935
  • peekView.border#3B544C
  • peekViewEditor.background#151E1B
  • peekViewTitle.background#16221E
  • scrollbarSlider.activeBackground#E02929AA
  • scrollbarSlider.background#3B544C66
  • scrollbarSlider.hoverBackground#3B544C99
  • sideBar.background#121C19
  • sideBar.border#2D3935
  • sideBar.foreground#D8DCDE
  • sideBarTitle.foreground#DDE1E3
  • statusBar.background#16221E
  • statusBar.border#2D3935
  • statusBar.foreground#819890
  • tab.activeBackground#0E1614
  • tab.activeForeground#DDE1E3
  • tab.border#2D3935
  • tab.inactiveBackground#1A2320
  • tab.inactiveForeground#6AAF98
  • terminal.ansiBlack#0E1614
  • terminal.ansiBlue#6AAF98
  • terminal.ansiCyan#7B9D92
  • terminal.ansiGreen#5495B6
  • terminal.ansiMagenta#438DB1
  • terminal.ansiRed#E02929
  • terminal.ansiWhite#DDE1E3
  • terminal.ansiYellow#673C1E
  • terminal.background#0E1614
  • terminal.foreground#DDE1E3
  • titleBar.activeBackground#16221E
  • titleBar.activeForeground#DDE1E3
  • titleBar.inactiveBackground#121C19
  • titleBar.inactiveForeground#7B9D92
  • widget.shadow#060A0855

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#899F97italic
string, constant.other.symbol, string.regexp, string.template#6EB9A0
constant.character.escape#94C3DB
constant.numeric#E8C545
constant.language.boolean, constant.language.null, constant.language.undefined#DA9A6C
constant, entity.name.constant, support.constant#E68989
keyword, storage.type, storage.modifier, storage.type.function#E87373
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#EE8B8B
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#80938D
storage.type.class, storage.type.interface, storage.type.enum#E87373
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#778882
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#8DB8CE
support.type.builtin, entity.name.type.primitive#A3C9DC
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#EA8686
variable.parameter, variable.parameter.function#BEC3C5
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#8EC2B1
variable, meta.definition.variable, variable.other.readwrite#E3E6E8
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#E87373
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#899F97
entity.other.attribute-name, entity.other.attribute-name.html#8DB8CE
support.class.component, entity.name.tag.template.value#E8C545
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#6EB9A0
entity.other.attribute-name.class.css, entity.other.attribute-name.class#DA9A6C
entity.other.attribute-name.id.css, entity.other.attribute-name.id#E87373
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#8DB8CE
markup.heading#E87373bold
markup.boldbold
markup.italicitalic
markup.quote#E3E6E8
markup.inline.raw, markup.fenced_code#6EB9A0
invalid, invalid.illegal#FF6B6B