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.activeBorder#1c1b1d00
  • activityBar.background#211e35
  • activityBar.border#282529
  • activityBar.foreground#d0ade7
  • activityBarBadge.background#9af9e9
  • activityBarBadge.foreground#282529
  • badge.background#ea5594
  • badge.foreground#282529
  • button.background#211e35
  • button.foreground#1c1b1d
  • button.hoverBackground#60c2e0bb
  • debugExceptionWidget.background#282529
  • debugExceptionWidget.border#282529
  • debugToolBar.background#282529
  • debugToolBar.border#bea7ff
  • diffEditor.insertedTextBackground#95e6cb44
  • diffEditor.removedTextBackground#d168d744
  • dropdown.background#1c1b1d
  • dropdown.border#4b3f4d
  • dropdown.foreground#d8b2de
  • dropdown.listBackground#282529
  • editor.background#1c1930
  • editor.findMatchBackground#bea7ff33
  • editor.findMatchHighlightBackground#bea7ff33
  • editor.findRangeHighlightBackground#bea7ff33
  • editor.foreground#d8b2de
  • editor.lineHighlightBackground#242040
  • editor.lineHighlightBorder#28205f
  • editor.rangeHighlightBackground#282529
  • editor.selectionBackground#7556ff33
  • editor.wordHighlightBackground#bea7ff33
  • editor.wordHighlightStrongBackground#bea7ff33
  • editorBracketMatch.border#282529
  • editorCursor.foreground#aac4ff
  • editorError.foreground#da1173
  • editorGroup.border#2a224b
  • editorGroup.emptyBackground#211e35
  • editorGroupHeader.border#211e35
  • editorGroupHeader.noTabsBackground#282529
  • editorGroupHeader.tabsBackground#211e35
  • editorGroupHeader.tabsBorder#282529
  • editorGutter.addedBackground#44d1b9
  • editorGutter.deletedBackground#da1173
  • editorGutter.modifiedBackground#44d1b9
  • editorHoverWidget.background#282529
  • editorHoverWidget.border#282529
  • editorIndentGuide.activeBackground1#9685d3
  • editorIndentGuide.background1#322a44
  • editorLightBulb.foreground#ff90bf
  • editorLineNumber.activeForeground#4b3f4d
  • editorLineNumber.foreground#4b3f4d
  • editorLink.activeForeground#7497e6
  • editorMarkerNavigation.background#282529
  • editorOverviewRuler.addedForeground#bea7ff
  • editorOverviewRuler.border#282529
  • editorOverviewRuler.deletedForeground#d168d7aa
  • editorOverviewRuler.errorForeground#da1173
  • editorOverviewRuler.modifiedForeground#44d1b9aa
  • editorOverviewRuler.warningForeground#7497e6
  • editorPane.background#211e35
  • editorRuler.foreground#282529
  • editorSuggestWidget.background#282529
  • editorSuggestWidget.border#695a6b
  • editorSuggestWidget.foreground#695a6b
  • editorSuggestWidget.highlightForeground#aac4ff
  • editorSuggestWidget.selectedBackground#322d33
  • editorWarning.foreground#7497e6
  • editorWhitespace.foreground#4b3f4d
  • editorWidget.background#211e35
  • editorWidget.border#bea7ff
  • errorForeground#da1173
  • extensionButton.prominentBackground#7497e6aa
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#7497e6bb
  • focusBorder#695a6b8a
  • foreground#b29ee7
  • gitDecoration.conflictingResourceForeground#da117387
  • gitDecoration.deletedResourceForeground#ff75bc87
  • gitDecoration.ignoredResourceForeground#695a6b
  • gitDecoration.modifiedResourceForeground#bea7ff87
  • gitDecoration.untrackedResourceForeground#44d1b987
  • input.background#211e35
  • input.border#695a6b4c
  • input.foreground#d8b2de
  • input.placeholderForeground#695a6b8a
  • inputOption.activeBorder#695a6b8a
  • inputValidation.errorBackground#232323
  • inputValidation.errorBorder#da1173
  • inputValidation.infoBackground#232323
  • inputValidation.infoBorder#bea7ff
  • inputValidation.warningBackground#232323
  • inputValidation.warningBorder#ff90bf
  • list.activeSelectionBackground#7556ff33
  • list.activeSelectionForeground#fb80ff
  • list.errorForeground#da1173
  • list.focusBackground#7556ff33
  • list.focusForeground#d8b2de
  • list.highlightForeground#7497e6
  • list.hoverBackground#7556ff33
  • list.hoverForeground#d8b2de
  • list.inactiveFocusBackground#7556ff33
  • list.inactiveSelectionBackground#7556ff33
  • list.inactiveSelectionForeground#fb80ff
  • list.warningForeground#d168d7
  • listFilterWidget.background#1c1b1d
  • listFilterWidget.noMatchesOutline#da1173
  • listFilterWidget.outline#bea7ff
  • menu.selectionBackground#7556ff33
  • minimap.errorHighlight#da1173
  • minimap.selectionHighlight#60c2e087
  • notificationCenter.border#282529
  • notificationCenterHeader.background#1c1b1d
  • notificationCenterHeader.foreground#bea7ff
  • notificationLink.foreground#ea5594
  • notifications.background#282529
  • notifications.foreground#ffffff
  • notificationToast.border#1c1b1d
  • panel.background#211e35
  • panel.border#282529
  • panelTitle.activeBorder#1c1b1d
  • panelTitle.activeForeground#ea5594
  • panelTitle.inactiveForeground#695a6b
  • peekView.border#282529
  • peekViewEditor.background#282529
  • peekViewEditor.matchHighlightBackground#7497e633
  • peekViewResult.background#282529
  • peekViewResult.fileForeground#695a6b
  • peekViewResult.matchHighlightBackground#7497e633
  • peekViewTitle.background#282529
  • peekViewTitleDescription.foreground#695a6b
  • peekViewTitleLabel.foreground#695a6b
  • pickerGroup.border#282529
  • pickerGroup.foreground#7497e6
  • progressBar.background#bea7ff
  • scrollbar.shadow#1c1b1d00
  • scrollbarSlider.activeBackground#ffffff22
  • scrollbarSlider.background#ffffff11
  • scrollbarSlider.hoverBackground#ffffff22
  • selection.background#7556ff33
  • sideBar.background#1c1930
  • sideBar.border#2a224b
  • sideBar.foreground#9c95af
  • sideBarSectionHeader.background#2d2644
  • sideBarSectionHeader.foreground#bea7ff
  • sideBarTitle.foreground#bea7ff99
  • statusBar.background#1c1930
  • statusBar.border#282529
  • statusBar.debuggingBackground#bea7ff
  • statusBar.debuggingForeground#1c1b1d
  • statusBar.foreground#695a6b
  • statusBar.noFolderBackground#282529
  • tab.activeBackground#211e35
  • tab.activeBorder#4a1ab9
  • tab.activeForeground#bea7ff
  • tab.activeModifiedBorder#cf8f18
  • tab.border#1c1b1d
  • tab.inactiveBackground#1c1930
  • tab.inactiveForeground#695a6b
  • tab.inactiveModifiedBorder#cf8f1899
  • tab.unfocusedActiveForeground#d8b2deaa
  • tab.unfocusedActiveModifiedBorder#cf8f18aa
  • tab.unfocusedInactiveForeground#695a6b
  • tab.unfocusedInactiveModifiedBorder#cf8f1877
  • terminal.ansiBlue#7497e6
  • terminal.ansiBrightBlack#695a6b
  • terminal.ansiBrightBlue#7497e6
  • terminal.ansiBrightCyan#a4eaff
  • terminal.ansiBrightGreen#9af9e9
  • terminal.ansiBrightMagenta#bea7ff
  • terminal.ansiBrightRed#ef9cf4
  • terminal.ansiBrightWhite#fad6ff
  • terminal.ansiBrightYellow#ff90bf
  • terminal.ansiCyan#60c2e0
  • terminal.ansiGreen#44d1b9
  • terminal.ansiMagenta#8b70da
  • terminal.ansiRed#d168d7
  • terminal.ansiWhite#d8b2de
  • terminal.ansiYellow#ea5594
  • terminal.background#242040
  • terminal.border#282529
  • terminal.foreground#d8b2de
  • terminalCursor.background#1c1b1d
  • terminalCursor.foreground#aac4ff
  • textBlockQuote.background#282529
  • textLink.activeForeground#7497e6
  • textLink.foreground#7497e6
  • textPreformat.foreground#d8b2de
  • titleBar.activeBackground#211e35
  • titleBar.activeForeground#695a6b
  • titleBar.border#282529
  • titleBar.inactiveBackground#1c1b1d
  • titleBar.inactiveForeground#695a6b
  • tree.indentGuidesStroke#9685d3
  • walkThrough.embeddedEditorBackground#282529
  • widget.shadow#8c1ab944

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring#695A6Bitalic
variable, string constant.other.placeholder#D8B2DE
constant.other.php#FF90BF
constant.other.color#FFFFFF
invalid, invalid.illegal#DA1173
invalid.deprecated#8B70DA
keyword, storage.type, storage.modifier#8B70DA
Keyword, Storageitalic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#BEA7FF
keyword.operator.logical, keyword.operator.comparison#FF90BF
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#D168D787
meta.tag.block.any.html#D168D7
keyword.controlitalic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#D168D7
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.function-call.python#7497E6
source.cpp meta.block variable.other#D168D7
variable.other.constant#D168D7
support.other.variable, string.other.link#D168D7
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#EA5594
variable.parameter.function.language.special, variable.parameter#8B70DA
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#44D1B9
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FF90BF
support.type#B2CCD6
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#B2CCD6
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#8B70DA
variable.language#8B70DAitalic
entity.name.method.js#BEA7FFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#BEA7FF
entity.other.attribute-name#8B70DAitalic
entity.other.attribute-name.class#FF90BF
source.sass keyword.control#7497E6
markup.inserted#44D1B9
markup.deleted#DA1173
markup.changed#8B70DA
string.regexp#BEA7FF
constant.character.escape#BEA7FF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#7497E6italic
source.js constant.other.object.key.js string.unquoted.label.js#8B70DAitalic
source.json meta.structure.dictionary.json support.type.property-name.json#8B70DA
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF90BF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#EA5594
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8B70DA
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#EA5594
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#BEA7FF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D168D7
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8B70DA
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#44D1B9
text.html.markdown, punctuation.definition.list_item.markdown#D8B2DE
text.html.markdown markup.inline.raw.markdown#8B70DA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#44D1B9
text.html.markdown meta.dummy.line-break#695A6B
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#44D1B9
markup.italic#D168D7italic
markup.bold, markup.bold string#D168D7bold
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#D168D7bold
markup.underline#EA5594underline
markup.strike#695A6B
markup.quote punctuation.definition.blockquote.markdown#44D1B9
markup.quoteitalic
string.other.link.title.markdown#BEA7FF
string.other.link.description.title.markdown#8B70DA
constant.other.reference.link.markdown#FF90BF
markup.raw.block#8B70DA
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#D8B2DE90
variable.language.fenced.markdown#44D1B9
meta.separator#44D1B9bold
markup.table#D8B2DE
entity.name.type#F98EF4
entity.name.function, entity.name.function.tsx#FD54A8
support.class#B8ACFFbold
string#B8ADF7
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6