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#292D3E
  • activityBar.foreground#C4A8FF
  • activityBarBadge.background#C4A8FF
  • activityBarBadge.foreground#ffffff
  • badge.background#C4A8FF
  • button.background#705697
  • dropdown.background#363c50
  • dropdown.foreground#decffd
  • editor.background#363c50
  • editor.findMatchBackground#4d4f58
  • editor.findMatchHighlightBackground#60636d
  • editor.lineHighlightBackground#454a5e
  • editor.selectionBackground#454a5e
  • editorCursor.foreground#d2c2f5
  • editorGroupHeader.tabsBackground#33384d
  • editorInlayHint.background#705697
  • editorInlayHint.parameterBackground#705697
  • editorInlayHint.typeBackground#705697
  • editorLineNumber.activeForeground#C4A8FF
  • editorLineNumber.foreground#705697
  • editorSuggestWidget.background#363c50
  • editorSuggestWidget.border#705697
  • editorSuggestWidget.foreground#C4A8FF
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#454a5e
  • errorForeground#f1897f
  • focusBorder#705697
  • foreground#eee7e7
  • input.background#25282e
  • input.foreground#a598b8
  • input.placeholderForeground#a598b8
  • inputOption.activeBorder#adafb7
  • inputValidation.errorBorder#f1897f
  • inputValidation.infoBackground#f2fcff
  • inputValidation.warningBackground#fffee2
  • list.activeSelectionBackground#454a5e
  • list.activeSelectionForeground#FFFFFF
  • list.highlightForeground#f781ed
  • list.hoverBackground#454a5e
  • list.inactiveSelectionBackground#454a5e
  • minimap.selectionHighlight#b5a3df
  • panel.background#363c50
  • panel.border#705697
  • peekView.border#705697
  • peekViewEditor.background#363c50
  • peekViewEditor.matchHighlightBackground#3d4357
  • peekViewResult.background#363c50
  • peekViewResult.matchHighlightBackground#363c50
  • peekViewTitle.background#705697
  • pickerGroup.border#9273c2
  • pickerGroup.foreground#C4A8FF
  • progressBar.background#C4A8FF
  • quickInput.background#363c50
  • quickInput.foreground#dac8ff
  • quickInputList.focusBackground#9273c2
  • selection.background#363c50
  • sideBar.background#33384d
  • sideBarSectionHeader.background#9273c2
  • sideBarSectionHeader.border#8e6dbe
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#705697
  • statusBar.debuggingBackground#705697
  • statusBar.noFolderBackground#705697
  • statusBarItem.remoteBackground#573f7a
  • statusBarItem.remoteForeground#ffffff
  • tab.inactiveBackground#4e5366
  • tab.lastPinnedBorder#C4A8FF
  • textLink.foreground#a591c4
  • titleBar.activeBackground#33384d
  • welcomePage.tileBackground#363c50

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#666666
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#77777
comment, punctuation.definition.comment#AAAAAAitalic
comment.block.preprocessor#AAAAAA
comment.documentation, comment.block.documentation, comment.block.documentation punctuation.definition.comment #8eca76
invalid#f25b5b
invalid.illegal#b07d7d
keyword.operator#777777
keyword, storage#98ace9
storage.type, support.type#c7a4db
constant.language, support.constant, variable.language#e2934d
variable, support.variable#c7a4db
entity.name.function, support.function#d87c77bold
entity.name.type, entity.name.namespace, entity.name.scope-resolution, entity.other.inherited-class, support.class#c7a4dbbold
entity.name.exception#b07d7d
entity.name.sectionbold
constant.numeric, constant.character, constant#e2934d
string#8eca76
constant.character.escape#777777
string.regexp#98ace9
constant.other.symbol#e2934d
punctuation#777777
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#AAAAAA
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#91B3E0
entity.name.tag#98ace9
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#8190A0italic
constant.character.entity, punctuation.definition.entity#e2934d
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#c7a4db
meta.property-name, support.type.property-name#e2934d
meta.property-value, meta.property-value constant.other, support.constant.property-value#8eca76
keyword.other.importantbold
markup.changed#bababa
markup.deleted#bababa
markup.italicitalic
markup.strikethroughstrikethrough
markup.error#b07d7d
markup.inserted#bababa
meta.link#98ace9
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#d87c77
markup.boldbold
markup.traceback#b07d7d
markup.underlineunderline
markup.quote#c7a4db
markup.list#98ace9
markup.bold, markup.italic#8eca76
markup.inline.raw#e2934d
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file, punctuation.definition.from-file.diff#98ace9
meta.diff.header.to-file, punctuation.definition.to-file.diff#98ace9
markup.deleted.diff#e86950
markup.changed.diff#e2934d
markup.inserted.diff#8eca76
punctuation.definition.tag.js, punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js#91B3E0
meta.jsx.children.js#99999