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#C77591
  • activityBarBadge.background#C77591
  • activityBarBadge.foreground#131B17
  • badge.background#C77591
  • badge.foreground#131B17
  • button.background#C77591
  • button.foreground#131B17
  • button.hoverBackground#C77591
  • 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#C77591
  • editorCursor.foreground#C77591
  • editorGroupHeader.tabsBackground#1A231E
  • editorIndentGuide.activeBackground#37433D
  • editorIndentGuide.background#37433D88
  • editorLineNumber.activeForeground#7CC098
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#37433D66
  • focusBorder#37433D
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#D15347
  • gitDecoration.modifiedResourceForeground#D49F35
  • gitDecoration.untrackedResourceForeground#57A879
  • input.background#1A231E
  • input.border#37433D
  • input.foreground#FFFFFF
  • inputOption.activeBorder#C77591
  • list.activeSelectionBackground#203229
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#C77591
  • 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#C77591AA
  • 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#C77591
  • terminal.ansiRed#C77591
  • 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#889881italic
string, constant.other.symbol, string.regexp, string.template#7CC098
constant.character.escape#C77591
constant.numeric#C77591
constant.language.boolean, constant.language.null, constant.language.undefined#C77591
constant, entity.name.constant, support.constant#C77591
keyword, storage.type, storage.modifier, storage.type.function#C77591
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#C77591
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#889881
storage.type.class, storage.type.interface, storage.type.enum#C77591
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#889881
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#E9E2E4
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#C77591
variable.parameter, variable.parameter.function#E9E2E4
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#E9E2E4
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#C77591
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#889881
entity.other.attribute-name, entity.other.attribute-name.html#7CC098
support.class.component, entity.name.tag.template.value#C77591
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#57A879
entity.other.attribute-name.class.css, entity.other.attribute-name.class#C77591
entity.other.attribute-name.id.css, entity.other.attribute-name.id#C77591
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#7CC098
markup.heading#C77591bold
markup.boldbold
markup.italicitalic
markup.quote#E9E2E4
markup.inline.raw, markup.fenced_code#7CC098
invalid, invalid.illegal#FF6B6B