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.activeBorder#6127f5
  • activityBar.background#0f0719
  • activityBar.foreground#8b7ba8
  • activityBarBadge.background#6127f5
  • activityBarBadge.foreground#ffffff
  • badge.background#6127f5
  • badge.foreground#ffffff
  • button.background#6127f5
  • button.foreground#ffffff
  • button.hoverBackground#5718f5
  • dropdown.background#1a0f2e
  • dropdown.border#5718f540
  • dropdown.foreground#e8dff5
  • editor.background#0a0412
  • editor.cursorForeground#6127f5
  • editor.findMatchBackground#6127f560
  • editor.findMatchBorder#6127f5
  • editor.foreground#e8dff5
  • editor.inactiveSelectionBackground#5718f530
  • editor.lineHighlightBackground#1a0f2e
  • editor.lineNumberColor#6127f5
  • editor.selectionBackground#5718f544
  • editorBracketMatch.background#5718f533
  • editorBracketMatch.border#6127f5
  • editorCursor.foreground#6127f5
  • editorError.foreground#ff5555
  • editorHint.foreground#7b68ee
  • editorIndentGuide.background#2d1a45
  • editorInfo.foreground#33ccff
  • editorWarning.foreground#ffcc33
  • editorWhitespace.foreground#3d2555
  • input.background#1a0f2e
  • input.border#5718f540
  • input.foreground#e8dff5
  • input.placeholderForeground#8b7ba8
  • inputOption.activeBorder#6127f5
  • list.activeSelectionBackground#5718f550
  • list.activeSelectionForeground#e8dff5
  • list.hoverBackground#2d1a45
  • list.inactiveSelectionBackground#2d1a45
  • panel.background#0f0719
  • panel.border#2d1a45
  • panelTitle.activeBorder#6127f5
  • panelTitle.activeForeground#6127f5
  • progressBar.background#6127f5
  • scrollbar.shadow#00000030
  • scrollbarSlider.activeBackground#6127f5
  • scrollbarSlider.background#5718f540
  • scrollbarSlider.hoverBackground#5718f570
  • sideBar.background#0f0719
  • sideBar.foreground#c9bde6
  • sideBarSectionHeader.background#1a0f2e
  • sideBarSectionHeader.foreground#6127f5
  • statusBar.background#1a0f2e
  • statusBar.debuggingBackground#5718f5
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#e8dff5
  • statusBarItem.hoverBackground#5718f550
  • tab.activeBackground#1a0f2e
  • tab.activeForeground#e8dff5
  • tab.activeModifiedBorder#6127f5
  • tab.border#2d1a45
  • tab.inactiveBackground#0a0412
  • tab.inactiveForeground#8b7ba8
  • titleBar.activeBackground#0f0719
  • titleBar.activeForeground#e8dff5
  • titleBar.inactiveBackground#0a0412
  • titleBar.inactiveForeground#8b7ba8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a6a8a
variable, string constant.other.placeholder#E8D5FF
constant.other.color#FFFFFF
invalid, invalid.illegal#FF6B9D
keyword, keyword.control, storage.type, storage.modifier#B8A8FF
constant.other.color, meta.tag#87CEEB
punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#E8D5FF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FF6B9D
entity.name.tag, entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#B8A8FF
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#87CEEB
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#87CEEB
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#D8A8FF
variable.language#FF87CC
entity.other.attribute-name#FF87CC
markup.inserted#98FF98
markup.deleted#FF6B9D
markup.changed#B8A8FF
string.regexp#87CEEB
constant.character.escape#87CEEB
*url*, *link*, *uri*underline
punctuation.definition.arguments.begin, punctuation.definition.arguments.end#E8D5FF
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#B8A8FF
punctuation.definition.decorator.python#B8A8FF
keyword.other.fn.rust#B8A8FF
keyword.other.sql#B8A8FF
Purple Vibe by Sz4bcsi - VS Code Theme