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#292E42
  • activityBar.activeBorder#7AA2F7
  • activityBar.background#16161E
  • activityBar.border#3B4261
  • activityBar.foreground#A9B1D6
  • button.background#292E42
  • button.border#3B4261
  • button.foreground#A9B1D6
  • button.hoverBackground#3B4261
  • debugIcon.continueForeground#9ECE6A
  • debugIcon.disconnectForeground#E0AF68
  • debugIcon.pauseForeground#E0AF68
  • debugIcon.restartForeground#9ECE6A
  • debugIcon.startForeground#9ECE6A
  • debugIcon.stepBackForeground#BB9AF7
  • debugIcon.stepIntoForeground#7AA2F7
  • debugIcon.stepOutForeground#7AA2F7
  • debugIcon.stepOverForeground#7AA2F7
  • debugIcon.stopForeground#F7768E
  • debugToolBar.background#1A1B26
  • dropdown.background#1A1B26
  • dropdown.border#3B4261
  • dropdown.foreground#A9B1D6
  • editor.background#1A1B26
  • editor.findMatchBackground#E0AF6855
  • editor.findMatchBorder#E0AF68
  • editor.findMatchHighlightBackground#E0AF6825
  • editor.findMatchHighlightBorder#E0AF6870
  • editor.foreground#A9B1D6
  • editor.inactiveSelectionBackground#7AA2F725
  • editor.lineHighlightBackground#292E42
  • editor.selectionBackground#7AA2F740
  • editor.selectionHighlightBackground#7AA2F720
  • editor.selectionHighlightBorder#7AA2F760
  • editor.wordHighlightBackground#BB9AF740
  • editor.wordHighlightBorder#BB9AF790
  • editor.wordHighlightStrongBackground#F7768E40
  • editor.wordHighlightStrongBorder#F7768E
  • editorGroup.border#3B4261
  • editorGroupHeader.tabsBorder#16161E
  • editorIndentGuide.activeBackground#3B4261
  • editorIndentGuide.background#292E42
  • editorLineNumber.activeForeground#7AA2F7
  • editorLineNumber.foreground#3B4261
  • editorSuggestWidget.background#1A1B26
  • editorSuggestWidget.border#3B4261
  • editorSuggestWidget.highlightForeground#7AA2F7
  • editorSuggestWidget.selectedBackground#292E42
  • editorWidget.background#1A1B26
  • editorWidget.border#3B4261
  • extensionButton.prominentBackground#7AA2F7
  • extensionButton.prominentForeground#16161E
  • extensionButton.prominentHoverBackground#BB9AF7
  • gitDecoration.addedResourceForeground#9ECE6A
  • gitDecoration.conflictingResourceForeground#F7768E
  • gitDecoration.deletedResourceForeground#F7768E
  • gitDecoration.ignoredResourceForeground#3B4261
  • gitDecoration.modifiedResourceForeground#E0AF68
  • gitDecoration.renamedResourceForeground#7AA2F7
  • gitDecoration.untrackedResourceForeground#BB9AF7
  • input.background#1A1B26
  • input.border#3B4261
  • input.foreground#A9B1D6
  • input.placeholderForeground#3B4261
  • list.activeSelectionBackground#292E42
  • list.activeSelectionForeground#7AA2F7
  • list.background#16161E
  • list.focusBackground#292E42
  • list.focusForeground#7AA2F7
  • list.foreground#A9B1D6
  • list.hoverBackground#292E42
  • list.inactiveSelectionBackground#1A1B26
  • list.inactiveSelectionForeground#A9B1D6
  • notification.background#1A1B26
  • notification.border#3B4261
  • notification.foreground#A9B1D6
  • panel.background#16161E
  • panel.border#3B4261
  • peekView.border#7AA2F7
  • peekViewEditor.background#1A1B26
  • peekViewEditor.matchHighlightBackground#E0AF6840
  • peekViewResult.background#16161E
  • peekViewResult.fileForeground#A9B1D6
  • peekViewResult.lineForeground#3B4261
  • peekViewResult.matchHighlightBackground#E0AF6840
  • peekViewTitle.background#292E42
  • peekViewTitleDescription.foreground#3B4261
  • peekViewTitleLabel.foreground#A9B1D6
  • progressBar.background#7AA2F7
  • scrollbar.shadow#16161E
  • scrollbarSlider.activeBackground#BB9AF7
  • scrollbarSlider.background#3B4261
  • scrollbarSlider.hoverBackground#7AA2F7
  • sideBar.background#16161E
  • sideBar.border#3B4261
  • sideBar.foreground#A9B1D6
  • sideBarSectionHeader.background#1A1B26
  • sideBarSectionHeader.border#3B4261
  • sideBarSectionHeader.foreground#7AA2F7
  • sideBarTitle.foreground#7AA2F7
  • statusBar.background#16161E
  • statusBar.border#3B4261
  • statusBar.debuggingBackground#F7768E
  • statusBar.debuggingForeground#16161E
  • statusBar.foreground#A9B1D6
  • tab.activeBackground#1A1B26
  • tab.activeBorder#7AA2F7
  • tab.activeBorderTop#7AA2F7
  • tab.activeForeground#A9B1D6
  • tab.border#16161E
  • tab.inactiveBackground#16161E
  • tab.inactiveForeground#3B4261
  • terminal.background#1A1B26
  • terminal.foreground#A9B1D6
  • titleBar.activeBackground#16161E
  • titleBar.activeForeground#A9B1D6
  • titleBar.border#3B4261
  • titleBar.inactiveBackground#16161E
  • titleBar.inactiveForeground#3B4261
  • tree.indentGuidesStroke#292E42
  • tree.tableColumnsBorder#3B4261
  • welcomePage.background#1A1B26
  • welcomePage.progress.background#7AA2F7
  • welcomePage.progress.foreground#A9B1D6
  • welcomePage.tileBackground#16161E
  • welcomePage.tileBorder#3B4261
  • welcomePage.tileHoverBackground#292E42
  • widget.shadow#16161E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.line.double-slash, comment.line.number-sign#565F89italic
variable, variable.other, variable.parameter, variable.language, string constant.other.placeholder#A9B1D6—
constant.other.color#ffffff—
invalid, invalid.illegal, invalid.broken#1A1B26—
keyword, storage.type, storage.modifier#BB9AF7—
storage.type, keyword.control—italic
keyword.operator, punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.section.embedded#89DDFF—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#F7768E—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level#7AA2F7—
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit#FF9E64—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter#9ECE6Anormal
entity.name.class, entity.name.type.class, support.type, support.class, markup.changed.git_gutter, support.type.sys-types#2AC3DE—
source.css support.type, source.sass support.type, source.scss support.type#2AC3DE—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#F7768E—
variable.language#F7768Eitalic
entity.name.method.js#7AA2F7—
entity.other.attribute-name#BB9AF7—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#E0AF68italic
entity.other.attribute-name.class#E0AF68—
source.sass keyword.control#7AA2F7—
markup.inserted#9ECE6A—
markup.deleted#F7768E—
markup.changed#E0AF68—
string.regexp#89DDFF—
constant.character.escape#89DDFF—
*url*, *link*, *uri*—underline
entity.name.filename.find-in-files#9ECE6A—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#BB9AF7italic
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json#7AA2F7—
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#BB9AF7—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#7AA2F7—
markup.italic#9ECE6Aitalic
markup.bold, markup.bold string#E0AF68bold
markup.bold markup.italic, markup.italic markup.bold—bold italic
markup.underline#2AC3DEunderline
string.other.link.title.markdown#7AA2F7—
string.other.link.description.title.markdown#BB9AF7—
markup.table#A9B1D6—
markup.inserted.git_gutter#9ECE6A—
markup.changed.git_gutter#E0AF68—
markup.deleted.git_gutter#F7768E—
brackethighlighter.default#A9B1D6—
brackethighlighter.unmatched#F7768E—