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#1a1724
  • activityBar.border#2d2640
  • activityBar.foreground#F9A8D4
  • activityBar.inactiveForeground#3D3554
  • activityBarBadge.background#C084FC
  • activityBarBadge.foreground#13111a
  • badge.background#C084FC
  • badge.foreground#13111a
  • breadcrumb.activeSelectionForeground#C084FC
  • breadcrumb.focusForeground#E8E0FF
  • breadcrumb.foreground#4C4370
  • button.background#C084FC
  • button.foreground#13111a
  • button.hoverBackground#9333EA
  • dropdown.background#1a1724
  • dropdown.border#2d2640
  • dropdown.foreground#E8E0FF
  • editor.background#13111a
  • editor.findMatchBackground#C084FC50
  • editor.findMatchHighlightBackground#C084FC30
  • editor.foreground#E8E0FF
  • editor.inactiveSelectionBackground#C084FC18
  • editor.lineHighlightBackground#1a1724
  • editor.selectionBackground#C084FC30
  • editorBracketMatch.background#C084FC25
  • editorBracketMatch.border#C084FC
  • editorCursor.foreground#C084FC
  • editorError.foreground#F87171
  • editorGroupHeader.tabsBackground#1a1724
  • editorGroupHeader.tabsBorder#2d2640
  • editorGutter.addedBackground#86EFAC60
  • editorGutter.deletedBackground#F8717160
  • editorGutter.modifiedBackground#F9A8D460
  • editorHint.foreground#C084FC
  • editorIndentGuide.activeBackground1#C084FC50
  • editorIndentGuide.background1#2d2640
  • editorInfo.foreground#F9A8D4
  • editorLineNumber.activeForeground#C084FC
  • editorLineNumber.foreground#2d2640
  • editorOverviewRuler.addedForeground#86EFAC
  • editorOverviewRuler.border#2d2640
  • editorOverviewRuler.deletedForeground#F87171
  • editorOverviewRuler.modifiedForeground#F9A8D4
  • editorWarning.foreground#FDE68A
  • editorWhitespace.foreground#2d2640
  • focusBorder#C084FC
  • gitDecoration.addedResourceForeground#86EFAC
  • gitDecoration.conflictingResourceForeground#FDE68A
  • gitDecoration.deletedResourceForeground#F87171
  • gitDecoration.ignoredResourceForeground#3D3554
  • gitDecoration.modifiedResourceForeground#F9A8D4
  • gitDecoration.untrackedResourceForeground#C084FC
  • input.background#1a1724
  • input.border#2d2640
  • input.foreground#E8E0FF
  • input.placeholderForeground#3D3554
  • inputOption.activeBackground#C084FC20
  • inputOption.activeBorder#C084FC
  • list.activeSelectionBackground#2d2640
  • list.activeSelectionForeground#E8E0FF
  • list.focusBackground#2d2640
  • list.highlightForeground#C084FC
  • list.hoverBackground#2d264080
  • list.inactiveSelectionBackground#2d264080
  • menu.background#1a1724
  • menu.foreground#E8E0FF
  • menu.selectionBackground#2d2640
  • menu.selectionForeground#E8E0FF
  • menu.separatorBackground#2d2640
  • notifications.background#1a1724
  • notifications.border#2d2640
  • notifications.foreground#E8E0FF
  • panel.background#13111a
  • panel.border#2d2640
  • panelTitle.activeBorder#C084FC
  • panelTitle.activeForeground#C084FC
  • panelTitle.inactiveForeground#4C4370
  • pickerGroup.foreground#C084FC
  • progressBar.background#C084FC
  • quickInput.background#1a1724
  • quickInput.foreground#E8E0FF
  • quickInputHighlightForeground#C084FC
  • scrollbarSlider.activeBackground#C084FC60
  • scrollbarSlider.background#2d264080
  • scrollbarSlider.hoverBackground#C084FC40
  • selection.background#C084FC40
  • sideBar.background#1a1724
  • sideBar.border#2d2640
  • sideBar.foreground#D4C8F0
  • sideBarSectionHeader.background#13111a
  • sideBarSectionHeader.border#2d2640
  • sideBarSectionHeader.foreground#C084FC
  • sideBarTitle.foreground#C084FC
  • statusBar.background#C084FC
  • statusBar.debuggingBackground#9333EA
  • statusBar.foreground#13111a
  • statusBar.noFolderBackground#13111a
  • statusBarItem.hoverBackground#9333EA80
  • statusBarItem.remoteBackground#F9A8D4
  • statusBarItem.remoteForeground#13111a
  • tab.activeBackground#13111a
  • tab.activeBorder#C084FC
  • tab.activeForeground#E8E0FF
  • tab.border#2d2640
  • tab.hoverBackground#2d2640
  • tab.inactiveBackground#1a1724
  • tab.inactiveForeground#4C4370
  • terminal.ansiBlack#2d2640
  • terminal.ansiBlue#93C5FD
  • terminal.ansiBrightBlack#4C4370
  • terminal.ansiBrightBlue#BFDBFE
  • terminal.ansiBrightCyan#A5F3FC
  • terminal.ansiBrightGreen#BBF7D0
  • terminal.ansiBrightMagenta#E9D5FF
  • terminal.ansiBrightRed#FCA5A5
  • terminal.ansiBrightWhite#F8F4FF
  • terminal.ansiBrightYellow#FEF08A
  • terminal.ansiCyan#67E8F9
  • terminal.ansiGreen#86EFAC
  • terminal.ansiMagenta#C084FC
  • terminal.ansiRed#F87171
  • terminal.ansiWhite#E8E0FF
  • terminal.ansiYellow#FDE68A
  • terminal.background#13111a
  • terminal.foreground#E8E0FF
  • terminal.selectionBackground#C084FC40
  • titleBar.activeBackground#13111a
  • titleBar.activeForeground#E8E0FF
  • titleBar.border#2d2640
  • titleBar.inactiveBackground#13111a
  • titleBar.inactiveForeground#4C4370

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#3D3554italic
variable, string constant.other.placeholder#E8E0FF
invalid, invalid.illegal#F87171
keyword, storage.type, storage.modifier#C084FC
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#F9A8D4
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FBCFE8
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#F9A8D4
meta.block variable.other#FBCFE8
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#93C5FD
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#86EFAC
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#FDE68A
support.type#E9D5FF
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#E9D5FF
entity.other.attribute-name#C084FC
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FDE68Aitalic
entity.other.attribute-name.class#FDE68A
markup.inserted#86EFAC
markup.deleted#F87171
markup.changed#C084FC
string.regexp#F9A8D4
constant.character.escape#F9A8D4
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#F9A8D4italic
source.json meta.structure.dictionary.json support.type.property-name.json#C084FC
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F9A8D4
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#86EFAC
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#C084FC
markup.bold, markup.bold string#FBCFE8bold
markup.italic#FBCFE8italic
string.other.link.title.markdown#F9A8D4