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#281B28
  • activityBar.border#392D39
  • activityBar.foreground#E87DB3
  • activityBarBadge.background#E87DB3
  • activityBarBadge.foreground#1F141F
  • badge.background#E87DB3
  • badge.foreground#1F141F
  • button.background#E87DB3
  • button.foreground#1F141F
  • button.hoverBackground#E87DB3
  • dropdown.background#2D1F2D
  • dropdown.border#533C53
  • dropdown.foreground#FFFFFF
  • editor.background#160E16
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#281B2899
  • editor.selectionBackground#24484C80
  • editorBracketMatch.background#24484C55
  • editorBracketMatch.border#E87DB3
  • editorCursor.foreground#E87DB3
  • editorGroupHeader.tabsBackground#281B28
  • editorIndentGuide.activeBackground#533C53
  • editorIndentGuide.background#392D3988
  • editorLineNumber.activeForeground#75B7BD
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#392D3966
  • focusBorder#533C53
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#DD5F74
  • gitDecoration.modifiedResourceForeground#DDB43C
  • gitDecoration.untrackedResourceForeground#54B695
  • input.background#2D1F2D
  • input.border#533C53
  • input.foreground#FFFFFF
  • inputOption.activeBorder#E87DB3
  • list.activeSelectionBackground#24484C
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#E87DB3
  • list.hoverBackground#1C2626
  • list.inactiveSelectionBackground#1C2A2C
  • minimap.selectionHighlight#24484CAA
  • panel.background#281B28
  • panel.border#392D39
  • peekView.border#533C53
  • peekViewEditor.background#251825
  • peekViewTitle.background#281B28
  • scrollbarSlider.activeBackground#E87DB3AA
  • scrollbarSlider.background#533C5366
  • scrollbarSlider.hoverBackground#533C5399
  • sideBar.background#1F141F
  • sideBar.border#392D39
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#281B28
  • statusBar.border#392D39
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#160E16
  • tab.activeForeground#FFFFFF
  • tab.border#392D39
  • tab.inactiveBackground#1C2A2C
  • tab.inactiveForeground#7EC7CE
  • terminal.ansiBlack#160E16
  • terminal.ansiBlue#7EC7CE
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#75B7BD
  • terminal.ansiMagenta#DDC23C
  • terminal.ansiRed#E87DB3
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#642B47
  • terminal.background#160E16
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#281B28
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#1F141F
  • titleBar.inactiveForeground#FFFFFF
  • widget.shadow#0A050A55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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