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—
Omi Theme by Omprakash Chauhan - VS Code Theme