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.variablebold
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