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#0b0517
  • activityBar.border#3d1e6d
  • activityBar.foreground#ff007f
  • activityBar.inactiveForeground#b29ec9
  • activityBarBadge.background#ff7700
  • activityBarBadge.foreground#ffffff
  • badge.background#ff007f
  • badge.foreground#11111b
  • breadcrumb.activeSelectionForeground#ff007f
  • breadcrumb.focusForeground#ff007f
  • breadcrumb.foreground#b29ec9
  • button.background#ff007f
  • button.foreground#11111b
  • button.hoverBackground#d6006b
  • dropdown.background#1b0c33
  • dropdown.border#3d1e6d
  • dropdown.foreground#fbf7ff
  • editor.background#120826
  • editor.findMatchBackground#ff007f75
  • editor.findMatchHighlightBackground#ffe60035
  • editor.foreground#fbf7ff
  • editor.inactiveSelectionBackground#29154a50
  • editor.selectionBackground#ff007f45
  • editor.selectionHighlightBackground#ff007f20
  • editor.wordHighlightBackground#00ffff25
  • editorCursor.foreground#ff007f
  • editorGroupHeader.border#3d1e6d
  • editorGroupHeader.tabsBackground#1b0c33
  • editorLineNumber.activeForeground#ff007f
  • editorLineNumber.foreground#b29ec9
  • focusBorder#ff007f
  • foreground#fbf7ff
  • gitDecoration.deletedResourceForeground#ff0055
  • gitDecoration.modifiedResourceForeground#ffe600
  • gitDecoration.untrackedResourceForeground#05ffa1
  • input.background#1b0c33
  • input.border#3d1e6d
  • input.foreground#fbf7ff
  • input.placeholderForeground#b29ec9
  • list.activeSelectionBackground#29154a80
  • list.activeSelectionForeground#ff007f
  • list.hoverBackground#29154a
  • list.inactiveSelectionBackground#29154a
  • sideBar.background#1b0c33
  • sideBar.border#3d1e6d
  • sideBar.foreground#fbf7ff
  • sideBarSectionHeader.background#0b0517
  • sideBarSectionHeader.foreground#ff007f
  • sideBarTitle.foreground#fbf7ff
  • statusBar.background#06030c
  • statusBar.debuggingBackground#ff7700
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ff007f
  • statusBar.noFolderBackground#0b0517
  • statusBarItem.hoverBackground#29154a
  • tab.activeBackground#120826
  • tab.activeBorder#ff007f
  • tab.activeForeground#fbf7ff
  • tab.border#3d1e6d
  • tab.hoverBackground#29154a
  • tab.inactiveBackground#1b0c33
  • tab.inactiveForeground#b29ec9
  • terminal.ansiBlack#29154a
  • terminal.ansiBlue#00f0ff
  • terminal.ansiBrightBlack#b29ec9
  • terminal.ansiBrightBlue#00f0ff
  • terminal.ansiBrightCyan#00ffff
  • terminal.ansiBrightGreen#05ffa1
  • terminal.ansiBrightMagenta#ff007f
  • terminal.ansiBrightRed#ff0055
  • terminal.ansiBrightWhite#fbf7ff
  • terminal.ansiBrightYellow#ffe600
  • terminal.ansiCyan#00ffff
  • terminal.ansiGreen#05ffa1
  • terminal.ansiMagenta#ff007f
  • terminal.ansiRed#ff0055
  • terminal.ansiWhite#b29ec9
  • terminal.ansiYellow#ffe600
  • terminal.background#120826
  • terminal.foreground#fbf7ff
  • terminalCursor.foreground#ff007f
  • titleBar.activeBackground#0b0517
  • titleBar.activeForeground#fbf7ff
  • titleBar.border#3d1e6d
  • titleBar.inactiveBackground#120826
  • titleBar.inactiveForeground#b29ec9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6f5987italic
variable, string constant.other.placeholder#ff7700
constant.other.color#fbf7ff
invalid, invalid.illegal#ff0055
keyword, storage.type, storage.modifier#ff007f
keyword.control, constant.other.color, punctuation, meta.tag, 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#ff7700
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ff0055
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#00f0ff
meta.block variable.other#fbf7ff
support.other.variable, string.other.link#ff71ce
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ff7700
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#05ffa1
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#ffe600
support.type#00ffff
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#a200ff
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#00f0ff
variable.language#ff7700italic
entity.name.method.js#00f0ffitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#00f0ff
entity.other.attribute-name#a200ff
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ff7700italic
entity.other.attribute-name.class#a200ff
source.sass keyword.control#00f0ff
markup.inserted#05ffa1
markup.deleted#ff0055
markup.changed#00f0ff
string.regexp#00ffff
constant.character.escape#00ffff
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#ff007fitalic
source.js constant.other.object.key.js string.unquoted.label.js#ff7700italic
source.json meta.structure.dictionary.json support.type.property-name.json#00f0ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff007f
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff0055
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff7700
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#05ffa1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#00ffff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#a200ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffe600
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#01cdfe
text.html.markdown, punctuation.definition.list_item.markdown#fbf7ff
text.html.markdown markup.inline.raw.markdown#ff71ce
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#6f5987
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#ff007f
markup.italic#ff71ceitalic
markup.bold, markup.bold string#ff007fbold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#ff71cebold
markup.underline#00f0ffunderline
markup.quote punctuation.definition.blockquote.markdown#6f5987
markup.quoteitalic
string.other.link.title.markdown#00f0ff
string.other.link.description.title.markdown#ff007f
constant.other.reference.link.markdown#ff7700
markup.raw.block#ff71ce
markup.raw.block.fenced.markdown#fbf7ff15
punctuation.definition.fenced.markdown#fbf7ff15
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#fbf7ff
variable.language.fenced.markdown#6f5987
meta.separator#6f5987bold
markup.table#fbf7ff