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#1C2126
  • activityBar.border#3A424A
  • activityBar.foreground#D15347
  • activityBarBadge.background#D15347
  • activityBarBadge.foreground#14191F
  • badge.background#D15347
  • badge.foreground#14191F
  • button.background#D15347
  • button.foreground#14191F
  • button.hoverBackground#D15347
  • dropdown.background#1C2126
  • dropdown.border#3A424A
  • dropdown.foreground#FFFFFF
  • editor.background#0E1116
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#1C212699
  • editor.selectionBackground#21303B80
  • editorBracketMatch.background#21303B55
  • editorBracketMatch.border#D15347
  • editorCursor.foreground#D15347
  • editorGroupHeader.tabsBackground#1C2126
  • editorIndentGuide.activeBackground#3A424A
  • editorIndentGuide.background#3A424A88
  • editorLineNumber.activeForeground#8DB8CE
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#3A424A66
  • focusBorder#3A424A
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#D74E42
  • gitDecoration.modifiedResourceForeground#D49F35
  • gitDecoration.untrackedResourceForeground#5CA380
  • input.background#1C2126
  • input.border#3A424A
  • input.foreground#FFFFFF
  • inputOption.activeBorder#D15347
  • list.activeSelectionBackground#21303B
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#D15347
  • list.hoverBackground#1C2126
  • list.inactiveSelectionBackground#21303B
  • minimap.selectionHighlight#21303BAA
  • panel.background#1C2126
  • panel.border#3A424A
  • peekView.border#3A424A
  • peekViewEditor.background#1C2126
  • peekViewTitle.background#1C2126
  • scrollbarSlider.activeBackground#D15347AA
  • scrollbarSlider.background#3A424A66
  • scrollbarSlider.hoverBackground#3A424A99
  • sideBar.background#14191F
  • sideBar.border#3A424A
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#1C2126
  • statusBar.border#3A424A
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#0E1116
  • tab.activeForeground#FFFFFF
  • tab.border#3A424A
  • tab.inactiveBackground#21303B
  • tab.inactiveForeground#8DB8CE
  • terminal.ansiBlack#0E1116
  • terminal.ansiBlue#8DB8CE
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#8DB8CE
  • terminal.ansiMagenta#D15347
  • terminal.ansiRed#D15347
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#21303B
  • terminal.background#0E1116
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#1C2126
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#14191F
  • titleBar.inactiveForeground#FFFFFF
  • widget.shadow#0A0A0A55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#819098italic
string, constant.other.symbol, string.regexp, string.template#8DB8CE
constant.character.escape#D15347
constant.numeric#D15347
constant.language.boolean, constant.language.null, constant.language.undefined#D15347
constant, entity.name.constant, support.constant#D15347
keyword, storage.type, storage.modifier, storage.type.function#D15347
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#D15347
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#819098
storage.type.class, storage.type.interface, storage.type.enum#D15347
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#819098
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#8DB8CE
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#DDE0E4
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#D15347
variable.parameter, variable.parameter.function#DDE0E4
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#8DB8CE
variable, meta.definition.variable, variable.other.readwrite#DDE0E4
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#D15347
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#819098
entity.other.attribute-name, entity.other.attribute-name.html#8DB8CE
support.class.component, entity.name.tag.template.value#D15347
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#5CA380
entity.other.attribute-name.class.css, entity.other.attribute-name.class#D15347
entity.other.attribute-name.id.css, entity.other.attribute-name.id#D15347
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#8DB8CE
markup.heading#D15347bold
markup.boldbold
markup.italicitalic
markup.quote#DDE0E4
markup.inline.raw, markup.fenced_code#8DB8CE
invalid, invalid.illegal#FF6B6B