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#281B1F
  • activityBar.border#392D31
  • activityBar.foreground#E75577
  • activityBarBadge.background#E75577
  • activityBarBadge.foreground#1F1418
  • badge.background#E75577
  • badge.foreground#1F1418
  • button.background#E75577
  • button.foreground#1F1418
  • button.hoverBackground#E75577
  • dropdown.background#2D1F24
  • dropdown.border#57383F
  • dropdown.foreground#FFFFFF
  • editor.background#160E10
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#281B1F99
  • editor.selectionBackground#4C243F80
  • editorBracketMatch.background#4C243F55
  • editorBracketMatch.border#E75577
  • editorCursor.foreground#E75577
  • editorGroupHeader.tabsBackground#281B1F
  • editorIndentGuide.activeBackground#57383F
  • editorIndentGuide.background#392D3188
  • editorLineNumber.activeForeground#BB81B1
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#392D3166
  • focusBorder#57383F
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#E25A71
  • gitDecoration.modifiedResourceForeground#DDAC3C
  • gitDecoration.untrackedResourceForeground#5AAF93
  • input.background#2D1F24
  • input.border#57383F
  • input.foreground#FFFFFF
  • inputOption.activeBorder#E75577
  • list.activeSelectionBackground#4C243F
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#E75577
  • list.hoverBackground#291F27
  • list.inactiveSelectionBackground#2A1D28
  • minimap.selectionHighlight#4C243FAA
  • panel.background#281B1F
  • panel.border#392D31
  • peekView.border#57383F
  • peekViewEditor.background#25181D
  • peekViewTitle.background#281B1F
  • scrollbarSlider.activeBackground#E75577AA
  • scrollbarSlider.background#57383F66
  • scrollbarSlider.hoverBackground#57383F99
  • sideBar.background#1F1418
  • sideBar.border#392D31
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#281B1F
  • statusBar.border#392D31
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#160E10
  • tab.activeForeground#FFFFFF
  • tab.border#392D31
  • tab.inactiveBackground#2A1D28
  • tab.inactiveForeground#D590C9
  • terminal.ansiBlack#160E10
  • terminal.ansiBlue#D590C9
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#BB81B1
  • terminal.ansiMagenta#CBA54D
  • terminal.ansiRed#E75577
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#8B6C23
  • terminal.background#160E10
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#281B1F
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#1F1418
  • titleBar.inactiveForeground#FFFFFF
  • widget.shadow#0A050755

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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