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#7d6fb8
  • activityBar.background#1a1330
  • activityBar.foreground#a99fc9
  • activityBarBadge.background#7d6fb8
  • activityBarBadge.foreground#ffffff
  • badge.background#7d6fb8
  • badge.foreground#ffffff
  • button.background#7d6fb8
  • button.foreground#ffffff
  • button.hoverBackground#8d7fbe
  • dropdown.background#231a3f
  • dropdown.border#6127f545
  • dropdown.foreground#f0e8ff
  • editor.background#161028
  • editor.cursorForeground#7d6fb8
  • editor.findMatchBackground#6127f565
  • editor.findMatchBorder#7d6fb8
  • editor.foreground#f0e8ff
  • editor.inactiveSelectionBackground#6127f540
  • editor.lineHighlightBackground#231a3f
  • editor.lineNumberColor#7d6fb8
  • editor.selectionBackground#6127f555
  • editorBracketMatch.background#6127f540
  • editorBracketMatch.border#7d6fb8
  • editorCursor.foreground#7d6fb8
  • editorError.foreground#ff6b6b
  • editorHint.foreground#8d7fbe
  • editorIndentGuide.background#3d2a60
  • editorInfo.foreground#6bcfff
  • editorWarning.foreground#ffd93d
  • editorWhitespace.foreground#4d3a70
  • input.background#231a3f
  • input.border#6127f545
  • input.foreground#f0e8ff
  • input.placeholderForeground#a99fc9
  • inputOption.activeBorder#7d6fb8
  • list.activeSelectionBackground#6127f555
  • list.activeSelectionForeground#f0e8ff
  • list.hoverBackground#3d2a60
  • list.inactiveSelectionBackground#3d2a60
  • panel.background#1a1330
  • panel.border#3d2a60
  • panelTitle.activeBorder#7d6fb8
  • panelTitle.activeForeground#7d6fb8
  • progressBar.background#7d6fb8
  • scrollbar.shadow#00000030
  • scrollbarSlider.activeBackground#7d6fb8
  • scrollbarSlider.background#6127f545
  • scrollbarSlider.hoverBackground#6127f570
  • sideBar.background#1a1330
  • sideBar.foreground#d5c9e8
  • sideBarSectionHeader.background#231a3f
  • sideBarSectionHeader.foreground#7d6fb8
  • statusBar.background#231a3f
  • statusBar.debuggingBackground#6127f5
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#f0e8ff
  • statusBarItem.hoverBackground#6127f555
  • tab.activeBackground#231a3f
  • tab.activeForeground#f0e8ff
  • tab.activeModifiedBorder#7d6fb8
  • tab.border#3d2a60
  • tab.inactiveBackground#161028
  • tab.inactiveForeground#a99fc9
  • titleBar.activeBackground#1a1330
  • titleBar.activeForeground#f0e8ff
  • titleBar.inactiveBackground#161028
  • titleBar.inactiveForeground#a99fc9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8b7ba8
variable, string constant.other.placeholder#f0e8ff
constant.other.color#D8A8FF
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#f0e8ff
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#f0e8ff
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