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#1A231E
  • activityBar.border#37433D
  • activityBar.foreground#D15E47
  • activityBarBadge.background#D15E47
  • activityBarBadge.foreground#131B17
  • badge.background#D15E47
  • badge.foreground#131B17
  • button.background#D15E47
  • button.foreground#131B17
  • button.hoverBackground#D15E47
  • dropdown.background#1A231E
  • dropdown.border#37433D
  • dropdown.foreground#FFFFFF
  • editor.background#0C1210
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#1A231E99
  • editor.selectionBackground#20322980
  • editorBracketMatch.background#20322955
  • editorBracketMatch.border#D15E47
  • editorCursor.foreground#D15E47
  • editorGroupHeader.tabsBackground#1A231E
  • editorIndentGuide.activeBackground#37433D
  • editorIndentGuide.background#37433D88
  • editorLineNumber.activeForeground#7CC098
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#37433D66
  • focusBorder#37433D
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#D74E42
  • gitDecoration.modifiedResourceForeground#D49F35
  • gitDecoration.untrackedResourceForeground#53AC78
  • input.background#1A231E
  • input.border#37433D
  • input.foreground#FFFFFF
  • inputOption.activeBorder#D15E47
  • list.activeSelectionBackground#203229
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#D15E47
  • list.hoverBackground#1A231E
  • list.inactiveSelectionBackground#203229
  • minimap.selectionHighlight#203229AA
  • panel.background#1A231E
  • panel.border#37433D
  • peekView.border#37433D
  • peekViewEditor.background#1A231E
  • peekViewTitle.background#1A231E
  • scrollbarSlider.activeBackground#D15E47AA
  • scrollbarSlider.background#37433D66
  • scrollbarSlider.hoverBackground#37433D99
  • sideBar.background#131B17
  • sideBar.border#37433D
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#1A231E
  • statusBar.border#37433D
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#0C1210
  • tab.activeForeground#FFFFFF
  • tab.border#37433D
  • tab.inactiveBackground#203229
  • tab.inactiveForeground#7CC098
  • terminal.ansiBlack#0C1210
  • terminal.ansiBlue#7CC098
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#7CC098
  • terminal.ansiMagenta#D15E47
  • terminal.ansiRed#D15E47
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#203229
  • terminal.background#0C1210
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#1A231E
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#131B17
  • titleBar.inactiveForeground#FFFFFF
  • widget.shadow#0A0A0A55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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