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.activeBackground#313244
  • activityBar.activeBorder#CBA6F7
  • activityBar.background#181825
  • activityBar.border#45475A
  • activityBar.foreground#CDD6F4
  • button.background#313244
  • button.border#45475A
  • button.foreground#CDD6F4
  • button.hoverBackground#45475A
  • debugIcon.continueForeground#A6E3A1
  • debugIcon.disconnectForeground#F9E2AF
  • debugIcon.pauseForeground#F9E2AF
  • debugIcon.restartForeground#A6E3A1
  • debugIcon.startForeground#A6E3A1
  • debugIcon.stepBackForeground#CBA6F7
  • debugIcon.stepIntoForeground#89B4FA
  • debugIcon.stepOutForeground#89B4FA
  • debugIcon.stepOverForeground#89B4FA
  • debugIcon.stopForeground#F38BA8
  • debugToolBar.background#1E1E2E
  • dropdown.background#1E1E2E
  • dropdown.border#45475A
  • dropdown.foreground#CDD6F4
  • editor.background#1E1E2E
  • editor.findMatchBackground#F9E2AF55
  • editor.findMatchBorder#F9E2AF
  • editor.findMatchHighlightBackground#F9E2AF25
  • editor.findMatchHighlightBorder#F9E2AF70
  • editor.foreground#CDD6F4
  • editor.inactiveSelectionBackground#89B4FA25
  • editor.lineHighlightBackground#313244
  • editor.selectionBackground#89B4FA40
  • editor.selectionHighlightBackground#89B4FA20
  • editor.selectionHighlightBorder#89B4FA60
  • editor.wordHighlightBackground#CBA6F740
  • editor.wordHighlightBorder#CBA6F790
  • editor.wordHighlightStrongBackground#F38BA840
  • editor.wordHighlightStrongBorder#F38BA8
  • editorGroup.border#45475A
  • editorGroupHeader.tabsBorder#11111B
  • editorIndentGuide.activeBackground#45475A
  • editorIndentGuide.background#313244
  • editorLineNumber.activeForeground#89B4FA
  • editorLineNumber.foreground#45475A
  • editorSuggestWidget.background#1E1E2E
  • editorSuggestWidget.border#45475A
  • editorSuggestWidget.highlightForeground#CBA6F7
  • editorSuggestWidget.selectedBackground#313244
  • editorWidget.background#1E1E2E
  • editorWidget.border#45475A
  • extensionButton.prominentBackground#89B4FA
  • extensionButton.prominentForeground#1E1E2E
  • extensionButton.prominentHoverBackground#CBA6F7
  • gitDecoration.addedResourceForeground#A6E3A1
  • gitDecoration.conflictingResourceForeground#FAB387
  • gitDecoration.deletedResourceForeground#F38BA8
  • gitDecoration.ignoredResourceForeground#45475A
  • gitDecoration.modifiedResourceForeground#F9E2AF
  • gitDecoration.renamedResourceForeground#89B4FA
  • gitDecoration.untrackedResourceForeground#CBA6F7
  • input.background#1E1E2E
  • input.border#45475A
  • input.foreground#CDD6F4
  • input.placeholderForeground#6C7086
  • list.activeSelectionBackground#313244
  • list.activeSelectionForeground#89B4FA
  • list.background#181825
  • list.focusBackground#313244
  • list.focusForeground#89B4FA
  • list.foreground#CDD6F4
  • list.hoverBackground#313244
  • list.inactiveSelectionBackground#1E1E2E
  • list.inactiveSelectionForeground#CDD6F4
  • notification.background#1E1E2E
  • notification.border#45475A
  • notification.foreground#CDD6F4
  • panel.background#181825
  • panel.border#45475A
  • peekView.border#89B4FA
  • peekViewEditor.background#1E1E2E
  • peekViewEditor.matchHighlightBackground#F9E2AF40
  • peekViewResult.background#181825
  • peekViewResult.fileForeground#CDD6F4
  • peekViewResult.lineForeground#6C7086
  • peekViewResult.matchHighlightBackground#F9E2AF40
  • peekViewTitle.background#313244
  • peekViewTitleDescription.foreground#6C7086
  • peekViewTitleLabel.foreground#CDD6F4
  • progressBar.background#89B4FA
  • scrollbar.shadow#11111B
  • scrollbarSlider.activeBackground#CBA6F7
  • scrollbarSlider.background#45475A
  • scrollbarSlider.hoverBackground#89B4FA
  • sideBar.background#181825
  • sideBar.border#45475A
  • sideBar.foreground#CDD6F4
  • sideBarSectionHeader.background#1E1E2E
  • sideBarSectionHeader.border#45475A
  • sideBarSectionHeader.foreground#89B4FA
  • sideBarTitle.foreground#89B4FA
  • statusBar.background#11111B
  • statusBar.border#45475A
  • statusBar.debuggingBackground#F38BA8
  • statusBar.debuggingForeground#1E1E2E
  • statusBar.foreground#CDD6F4
  • tab.activeBackground#1E1E2E
  • tab.activeBorder#CBA6F7
  • tab.activeBorderTop#CBA6F7
  • tab.activeForeground#CDD6F4
  • tab.border#11111B
  • tab.inactiveBackground#181825
  • tab.inactiveForeground#6C7086
  • terminal.background#1E1E2E
  • terminal.foreground#CDD6F4
  • titleBar.activeBackground#181825
  • titleBar.activeForeground#CDD6F4
  • titleBar.border#45475A
  • titleBar.inactiveBackground#11111B
  • titleBar.inactiveForeground#45475A
  • tree.indentGuidesStroke#313244
  • tree.tableColumnsBorder#45475A
  • welcomePage.background#1E1E2E
  • welcomePage.progress.background#89B4FA
  • welcomePage.progress.foreground#CDD6F4
  • welcomePage.tileBackground#181825
  • welcomePage.tileBorder#45475A
  • welcomePage.tileHoverBackground#313244
  • widget.shadow#11111B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.line.double-slash, comment.line.number-sign#585B70italic
variable, variable.other, variable.parameter, variable.language, string constant.other.placeholder#CDD6F4—
constant.other.color#ffffff—
invalid, invalid.illegal, invalid.broken#1E1E2E—
keyword, storage.type, storage.modifier#CBA6F7—
storage.type, keyword.control—italic
keyword.operator, punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.section.embedded#89DCEB—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#F38BA8—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level#89B4FA—
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit#FAB387—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter#A6E3A1normal
entity.name.class, entity.name.type.class, support.type, support.class, markup.changed.git_gutter, support.type.sys-types#94E2D5—
source.css support.type, source.sass support.type, source.scss support.type#94E2D5—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#F38BA8—
variable.language#F38BA8italic
entity.name.method.js#89B4FA—
entity.other.attribute-name#CBA6F7—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#F9E2AFitalic
entity.other.attribute-name.class#F9E2AF—
source.sass keyword.control#89B4FA—
markup.inserted#A6E3A1—
markup.deleted#F38BA8—
markup.changed#F9E2AF—
string.regexp#89DCEB—
constant.character.escape#F5C2E7—
*url*, *link*, *uri*—underline
entity.name.filename.find-in-files#A6E3A1—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#CBA6F7italic
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json#89B4FA—
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json#CBA6F7—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#89B4FA—
markup.italic#A6E3A1italic
markup.bold, markup.bold string#F9E2AFbold
markup.bold markup.italic, markup.italic markup.bold—bold italic
markup.underline#94E2D5underline
string.other.link.title.markdown#89B4FA—
string.other.link.description.title.markdown#CBA6F7—
markup.table#CDD6F4—
markup.inserted.git_gutter#A6E3A1—
markup.changed.git_gutter#F9E2AF—
markup.deleted.git_gutter#F38BA8—
brackethighlighter.default#CDD6F4—
brackethighlighter.unmatched#F38BA8—