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#b4df51italic
entity.name.method#b4df51italic
entity.name.class#b4df51italic
variable.parameter#cdfcffitalic
variable.language#cdfcffbold
variable.other#cdfcffitalic
entity.name.tag#b4df51italic
entity.other.attribute-name#fed888
support.function#0aacc5bold
support.variable—bold
support.constant#6be5fd
support.type#0aacc5 italic
support.type.property-name#b4df51—
support.class#b4df51 italic
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#cdfcffitalic
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#b4df51italic
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#e15d97italic
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#fab6e3italic
markup.underline#0aacc5underline
markup.quote punctuation.definition.blockquote.markdown#CFCFC2—
markup.quote#CFCFC2italic
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—