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#180113
  • activityBar.border#261b2c
  • activityBarBadge.background#4F2E63
  • activityBarBadge.foreground#f5f2f8
  • badge.background#4F2E63
  • badge.foreground#f5f2f8
  • button.background#4F2E63
  • button.foreground#f5f2f8
  • button.hoverBackground#180113
  • debugExceptionWidget.background#211429
  • debugExceptionWidget.border#180113
  • dropdown.background#180113
  • dropdown.border#261b2c
  • dropdown.foreground#f5f2f8
  • editor.background#261b2c
  • editor.findMatchBackground#4F2E63
  • editor.findMatchHighlightBackground#4F2E63
  • editor.findRangeHighlightBackground#4F2E63
  • editor.foreground#f5f2f8
  • editor.hoverHighlightBackground#4F2E63
  • editor.lineHighlightBackground#35263d
  • editor.rangeHighlightBackground#4F2E63
  • editor.selectionBackground#6d0132
  • editor.selectionHighlightBackground#ff00ff33
  • editor.wordHighlightForeground#edf3d1
  • editorBracketMatch.background#940c49
  • editorBracketMatch.border#9379a1
  • editorCursor.foreground#edf3d1
  • editorError.foreground#ff0033
  • editorGroup.background#261b2c
  • editorGroup.border#180113
  • editorGroup.dropBackground#180113
  • editorGroupHeader.noTabsBackground#180113
  • editorGroupHeader.tabsBackground#180113
  • editorGroupHeader.tabsBorder#180113
  • editorGutter.addedBackground#940c49
  • editorGutter.background#211429
  • editorGutter.deletedBackground#940c49
  • editorGutter.modifiedBackground#940c49
  • editorHoverWidget.background#211429
  • editorHoverWidget.border#180113
  • editorIndentGuide.background#211429
  • editorInfo.foreground#f3d681
  • editorLineNumber.foreground#9379a1
  • editorLink.activeForeground#f5f2f8
  • editorMarkerNavigation.background#211429
  • editorOverviewRuler.addedForeground#940c49
  • editorOverviewRuler.border#211429
  • editorOverviewRuler.deletedForeground#940c49
  • editorOverviewRuler.errorForeground#ff0033
  • editorOverviewRuler.findMatchForeground#edf3d1
  • editorOverviewRuler.infoForeground#f3d681
  • editorOverviewRuler.modifiedForeground#940c49
  • editorOverviewRuler.rangeHighlightForeground#edf3d1
  • editorOverviewRuler.warningForeground#ffae1a
  • editorOverviewRuler.wordHighlightForeground#edf3d1
  • editorSuggestWidget.background#211429
  • editorSuggestWidget.border#180113
  • editorWarning.foreground#ffae1a
  • editorWhitespace.foreground#180113
  • editorWidget.background#211429
  • editorWidget.border#180113
  • input.background#180113
  • input.border#4F2E63
  • input.foreground#f5f2f8
  • input.placeholderForeground#9379a1
  • inputOption.activeBorder#4F2E63
  • list.activeSelectionBackground#4F2E63
  • list.activeSelectionForeground#f5f2f8
  • list.dropBackground#261b2c
  • list.focusBackground#4F2E63
  • list.focusForeground#f5f2f8
  • list.highlightForeground#9379a1
  • list.hoverBackground#4F2E63
  • list.hoverForeground#f5f2f8
  • list.inactiveSelectionBackground#2a1a35
  • list.inactiveSelectionForeground#f5f2f8
  • merge.border#211429
  • merge.currentContentBackground#0d1300
  • merge.currentHeaderBackground#293a00
  • merge.incomingContentBackground#180113
  • merge.incomingHeaderBackground#4F2E63
  • notification.background#211429
  • notification.buttonBackground#4F2E63
  • notification.buttonForeground#f5f2f8
  • notification.buttonHoverBackground#180113
  • notification.errorBackground#211429
  • notification.errorForeground#f5f2f8
  • notification.foreground#f5f2f8
  • notification.infoBackground#211429
  • notification.infoForeground#f5f2f8
  • notification.warningBackground#211429
  • notification.warningForeground#f5f2f8
  • panel.background#211429
  • panel.border#180113
  • panel.dropBackground#180113
  • panelTitle.activeBorder#9379a1
  • panelTitle.activeForeground#f5f2f8
  • panelTitle.inactiveForeground#9379a1
  • progressBar.background#4F2E63
  • scrollbar.shadow#180113
  • scrollbarSlider.activeBackground#180113
  • sideBar.background#211429
  • sideBar.border#180113
  • sideBar.dropBackground#4F2E63
  • sideBar.foreground#f5f2f8
  • sideBarSectionHeader.background#180113
  • sideBarSectionHeader.foreground#f5f2f8
  • sideBarTitle.foreground#f5f2f8
  • statusBar.background#261b2c
  • statusBar.border#180113
  • statusBar.debuggingBackground#6d0132
  • statusBar.debuggingBorder#940c49
  • statusBar.debuggingForeground#f5f2f8
  • statusBar.foreground#f5f2f8
  • statusBar.noFolderBackground#261b2c
  • statusBar.noFolderBorder#180113
  • statusBar.noFolderForeground#f5f2f8
  • statusBarItem.activeBackground#4F2E63
  • statusBarItem.hoverBackground#180113
  • statusBarItem.prominentBackground#4F2E63
  • statusBarItem.prominentHoverBackground#180113
  • tab.activeBackground#211429
  • tab.activeBorder#4F2E63
  • tab.activeForeground#f5f2f8
  • tab.border#261b2c
  • tab.inactiveBackground#34253b
  • titleBar.activeBackground#261b2c
  • titleBar.activeForeground#f5f2f8
  • titleBar.border#180113
  • titleBar.inactiveBackground#261b2c
  • titleBar.inactiveForeground#f5f2f8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#8091B3bold italic
comment storage.type#b2bdd1—
comment entity.name.type#ccd3e0—
comment variable.other#99a7c2underline normal
string#fed888—
string.quoted#ffe0ff—
constant.numeric#d8b7fd—
constant.language#9b5fe0—
constant.character, constant.other#9b5fe0—
variable—
keyword#ff58abbold
meta.tag, declaration.tag#e15d97
storage#e15d97
storage.type#0aacc5bold
entity.other.inherited-class#b4df51—
entity.name.function#b4df51—
entity.name.method#b4df51—
entity.name.class#b4df51—
variable.parameter#cdfcff—
variable.language#cdfcffbold
variable.other#cdfcff—
entity.name.tag#b4df51—
entity.other.attribute-name#fed888
support.function#0aacc5bold
support.variable—bold
support.constant#6be5fd
support.type#0aacc5—
support.type.property-name#b4df51—
support.class#b4df51—
support.other.variable—
invalid#F8F8F0
invalid.deprecated#F8F8F0—
meta.structure.dictionary.json, string.quoted.double.json#CFCFC2—
meta.diff, meta.diff.header#6272a4—
meta.template.expression#cdfcff—
markup.deleted#e15d97—
markup.inserted#35ba66—
markup.changed#fed888—
constant.numeric.line-number.find-in-files - match#9b5fe0—
entity.name.filename#fed888—
message.error#ff0033—
punctuation.definition.template-expression#00ffb3—
punctuation.section.embedded#00ffb3—
text.html.markdown, punctuation.definition.list_item.markdown#BEB4C4—
markup.inline.raw.string.markdown#b4df51—
punctuation.definition.raw.markdown#35ba66—
text.html.markdown meta.dummy.line-break—
markup.heading.markdown entity.name.section.markdown#f5f2f8—
markup.heading.markdown punctuation.definition.heading.markdown#b4df51—
markup.italic#e15d97—
markup.bold, markup.bold string#fed888bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#fab6e3—
markup.underline#0aacc5underline
markup.quote punctuation.definition.blockquote.markdown#CFCFC2—
markup.quote#CFCFC2—
string.other.link.title.markdown#0aacc5—
string.other.link.description.title.markdown#0aacc5—
constant.other.reference.link.markdown#0aacc5—
punctuation.definition.link.markdown#cdfcff—
beginning.punctuation.definition.list.markdown#9b5fe0—
markup.raw.block#9b5fe0—
markup.fenced_code.block.markdown#9b5fe0—
punctuation.definition.fenced.markdown#00000050—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF—
variable.language.fenced.markdown#65737E—
meta.separator#65737Ebold
markup.table#EEFFFF—