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#181325
  • activityBar.border#181325
  • activityBar.dropBorder#48387a
  • activityBar.foreground#8780ac
  • activityBar.inactiveForeground#8780ac99
  • activityBarBadge.background#8b5cf6
  • activityBarBadge.foreground#181325
  • badge.background#8b5cf6
  • badge.foreground#1f192f
  • breadcrumb.activeSelectionForeground#cecadb
  • breadcrumb.background#1f192f
  • breadcrumb.focusForeground#cecadb
  • breadcrumb.foreground#8780ac
  • breadcrumbPicker.background#181325
  • button.background#8b5cf6
  • button.foreground#181325
  • button.hoverBackground#8b5cf699
  • debugExceptionWidget.background#48387a
  • debugExceptionWidget.border#48387a
  • debugToolBar.background#48387a
  • debugToolBar.border#48387a
  • descriptionForeground#cecadb
  • diffEditor.border#48387a
  • diffEditor.insertedTextBackground#c77dff22
  • diffEditor.insertedTextBorder#c77dff44
  • diffEditor.removedTextBackground#ff2d3b22
  • diffEditor.removedTextBorder#ff2d3b44
  • dropdown.background#48387a
  • dropdown.border#48387a
  • dropdown.foreground#cecadb
  • dropdown.listBackground#181325
  • editor.background#1f192f
  • editor.findMatchBackground#8780ac77
  • editor.findMatchBorder#ddd2ff
  • editor.findMatchHighlightBackground#8780ac77
  • editor.findRangeHighlightBackground#8780ac77
  • editor.foreground#aea7b7
  • editor.hoverHighlightBackground#8780ac77
  • editor.inactiveSelectionBackground#8780ac77
  • editor.lineHighlightBackground#48387a
  • editor.lineHighlightBorder#48387a
  • editor.rangeHighlightBackground#48387a
  • editor.selectionBackground#48387a
  • editor.selectionForeground#aea7b7
  • editor.selectionHighlightBackground#ddd2ff15
  • editor.wordHighlightBackground#8780ac77
  • editor.wordHighlightStrongBackground#8780ac77
  • editorBracketMatch.background#ddd2ff20
  • editorBracketMatch.border#ddd2ff70
  • editorCodeLens.foreground#cecadb
  • editorCursor.background#1f192f
  • editorCursor.foreground#8b5cf6
  • editorError.foreground#ff2d3b
  • editorGroup.border#48387a
  • editorGroup.dropBackground#48387a
  • editorGroup.emptyBackground#1f192f
  • editorGroup.focusedEmptyBorder#1f192f
  • editorGroupHeader.noTabsBackground#1f192f
  • editorGroupHeader.tabsBackground#181325
  • editorGroupHeader.tabsBorder#181325
  • editorGutter.addedBackground#c77dff
  • editorGutter.background#1f192f
  • editorGutter.deletedBackground#ff2d3b
  • editorGutter.modifiedBackground#4cc9f0
  • editorHint.foreground#8b5cf6
  • editorHoverWidget.background#48387a
  • editorHoverWidget.border#48387a
  • editorIndentGuide.activeBackground#8780ac77
  • editorIndentGuide.background#8780ac33
  • editorInfo.foreground#4cc9f0
  • editorInlayHint.background#181325
  • editorInlayHint.foreground#8780ac99
  • editorLineNumber.activeForeground#8780ac
  • editorLineNumber.foreground#8780ac55
  • editorLink.activeForeground#8b5cf6
  • editorMarkerNavigation.background#48387a
  • editorMarkerNavigationError.background#ff2d3b
  • editorMarkerNavigationInfo.background#4cc9f0
  • editorMarkerNavigationWarning.background#8b5cf6
  • editorOverviewRuler.addedForeground#c77dff
  • editorOverviewRuler.border#48387a
  • editorOverviewRuler.bracketMatchForeground#8b5cf6
  • editorOverviewRuler.commonContentForeground#48387a
  • editorOverviewRuler.currentContentForeground#4cc9f0
  • editorOverviewRuler.deletedForeground#ff2d3b
  • editorOverviewRuler.errorForeground#ff2d3b
  • editorOverviewRuler.findMatchForeground#8b5cf6
  • editorOverviewRuler.incomingContentForeground#c77dff
  • editorOverviewRuler.infoForeground#4cc9f0
  • editorOverviewRuler.modifiedForeground#4cc9f0
  • editorOverviewRuler.rangeHighlightForeground#8780ac
  • editorOverviewRuler.selectionHighlightForeground#8780ac
  • editorOverviewRuler.warningForeground#f7b801
  • editorOverviewRuler.wordHighlightForeground#8780ac
  • editorOverviewRuler.wordHighlightStrongForeground#8780ac
  • editorPane.background#1f192f
  • editorRuler.foreground#48387a
  • editorSuggestWidget.background#48387a
  • editorSuggestWidget.border#48387a
  • editorSuggestWidget.foreground#cecadb
  • editorSuggestWidget.highlightForeground#8b5cf6
  • editorSuggestWidget.selectedBackground#1f192f
  • editorWarning.foreground#f7b801
  • editorWhitespace.foreground#8780ac77
  • editorWidget.background#181325
  • editorWidget.border#181325
  • errorForeground#ff2d3b
  • extensionButton.prominentBackground#8b5cf6
  • extensionButton.prominentForeground#1f192f
  • extensionButton.prominentHoverBackground#8b5cf699
  • focusBorder#8780ac77
  • foreground#8780ac
  • gitDecoration.conflictingResourceForeground#ff2d3b
  • gitDecoration.deletedResourceForeground#ff2d3b
  • gitDecoration.ignoredResourceForeground#8780ac77
  • gitDecoration.modifiedResourceForeground#4cc9f0
  • gitDecoration.untrackedResourceForeground#c77dff
  • input.background#1f192f
  • input.border#48387a
  • input.foreground#cecadb
  • input.placeholderForeground#8780ac77
  • inputOption.activeBorder#48387a
  • inputValidation.errorBackground#1f192f
  • inputValidation.errorBorder#ff2d3b
  • inputValidation.errorForeground#ff2d3b
  • inputValidation.infoBackground#1f192f
  • inputValidation.infoBorder#4cc9f0
  • inputValidation.infoForeground#4cc9f0
  • inputValidation.warningBackground#1f192f
  • inputValidation.warningBorder#f7b801
  • inputValidation.warningForeground#f7b801
  • list.activeSelectionBackground#48387a
  • list.activeSelectionForeground#cecadb
  • list.dropBackground#48387a
  • list.errorForeground#ff2d3b
  • list.focusBackground#48387a
  • list.focusForeground#cecadb
  • list.highlightForeground#8b5cf6
  • list.hoverBackground#48387a
  • list.hoverForeground#cecadb
  • list.inactiveFocusBackground#48387a
  • list.inactiveSelectionBackground#48387a
  • list.inactiveSelectionForeground#cecadb
  • list.invalidItemForeground#ff2d3b
  • list.warningForeground#f7b801
  • listFilterWidget.background#48387a
  • listFilterWidget.noMatchesOutline#ff2d3b
  • listFilterWidget.outline#48387a
  • menu.background#181325
  • menu.foreground#8780ac
  • menu.selectionBackground#48387a
  • menu.selectionForeground#cecadb
  • menubar.selectionBackground#48387a
  • menubar.selectionForeground#cecadb
  • merge.border#8780ac
  • merge.commonContentBackground#48387a55
  • merge.commonHeaderBackground#48387a77
  • merge.currentContentBackground#4cc9f022
  • merge.currentHeaderBackground#4cc9f077
  • merge.incomingContentBackground#c77dff22
  • merge.incomingHeaderBackground#c77dff77
  • notificationCenter.border#181325
  • notificationCenterHeader.background#181325
  • notificationCenterHeader.foreground#cecadb
  • notificationLink.foreground#cecadb
  • notifications.background#181325
  • notifications.border#181325
  • notifications.foreground#cecadb
  • notificationToast.border#181325
  • panel.background#181325
  • panel.border#1f192f
  • panel.dropBorder#48387a
  • panelInput.border#8780ac
  • panelSection.border#48387a
  • panelSection.dropBackground#48387a
  • panelSectionHeader.background#1f192f
  • panelSectionHeader.foreground#8b5cf6
  • panelTitle.activeBorder#8b5cf6
  • panelTitle.activeForeground#cecadb
  • panelTitle.inactiveForeground#8780ac
  • peekView.border#8b5cf6
  • peekViewEditor.background#48387a
  • peekViewEditor.matchHighlightBackground#8780ac
  • peekViewEditor.matchHighlightBorder#8b5cf6
  • peekViewEditorGutter.background#1f192f
  • peekViewResult.background#48387a
  • peekViewResult.fileForeground#8780ac
  • peekViewResult.lineForeground#cecadb
  • peekViewResult.matchHighlightBackground#8b5cf633
  • peekViewResult.selectionBackground#48387a
  • peekViewResult.selectionForeground#cecadb
  • peekViewTitle.background#48387a
  • peekViewTitleDescription.foreground#8780ac
  • peekViewTitleLabel.foreground#8780ac
  • pickerGroup.border#48387a
  • pickerGroup.foreground#8b5cf6
  • progressBar.background#8b5cf6
  • scrollbar.shadow#08030c
  • scrollbarSlider.activeBackground#8780ac77
  • scrollbarSlider.background#8780ac55
  • scrollbarSlider.hoverBackground#8780ac99
  • selection.background#8780ac77
  • settings.checkboxBackground#48387a
  • settings.checkboxBorder#48387a
  • settings.checkboxForeground#cecadb
  • settings.dropdownBackground#48387a
  • settings.dropdownBorder#48387a
  • settings.dropdownForeground#cecadb
  • settings.dropdownListBorder#48387a
  • settings.headerForeground#cecadb
  • settings.modifiedItemIndicator#4cc9f0
  • settings.numberInputBackground#48387a
  • settings.numberInputBorder#48387a
  • settings.numberInputForeground#cecadb
  • settings.textInputBackground#48387a
  • settings.textInputBorder#48387a
  • settings.textInputForeground#cecadb
  • sideBar.background#181325
  • sideBar.foreground#8780ac
  • sideBarSectionHeader.background#1f192f
  • sideBarSectionHeader.border#181325
  • sideBarSectionHeader.foreground#8b5cf6
  • sideBarTitle.foreground#8b5cf6
  • statusBar.background#181325
  • statusBar.border#181325
  • statusBar.debuggingBackground#181325
  • statusBar.debuggingForeground#8780ac
  • statusBar.foreground#8780ac
  • statusBar.noFolderBackground#181325
  • statusBar.noFolderForeground#8780ac
  • statusBarItem.activeBackground#48387a
  • statusBarItem.hoverBackground#1f192f
  • statusBarItem.remoteBackground#181325
  • statusBarItem.remoteForeground#8780ac
  • tab.activeBackground#1f192f
  • tab.activeBorder#8b5cf6
  • tab.activeBorderTop#181325
  • tab.activeForeground#cecadb
  • tab.border#181325
  • tab.hoverBackground#48387a
  • tab.hoverBorder#8b5cf6
  • tab.inactiveBackground#181325
  • tab.inactiveForeground#cecadb77
  • tab.unfocusedActiveBackground#1f192f
  • tab.unfocusedActiveBorder#8b5cf677
  • tab.unfocusedActiveBorderTop#1f192f
  • tab.unfocusedActiveForeground#cecadb
  • tab.unfocusedHoverBackground#1f192f
  • tab.unfocusedHoverBorder#8b5cf677
  • tab.unfocusedInactiveForeground#cecadb77
  • terminal.ansiBlack#48387a
  • terminal.ansiBlue#4cc9f0
  • terminal.ansiBrightBlack#514959
  • terminal.ansiBrightBlue#4cc9f0
  • terminal.ansiBrightCyan#4cc9f0
  • terminal.ansiBrightGreen#c77dff
  • terminal.ansiBrightMagenta#8b5cf6
  • terminal.ansiBrightRed#ff2d3b
  • terminal.ansiBrightWhite#aea7b7
  • terminal.ansiBrightYellow#8b5cf6
  • terminal.ansiCyan#4cc9f0
  • terminal.ansiGreen#c77dff
  • terminal.ansiMagenta#8b5cf6
  • terminal.ansiRed#ff2d3b
  • terminal.ansiWhite#aea7b7
  • terminal.ansiYellow#8b5cf6
  • terminal.background#181325
  • terminal.border#181325
  • terminal.foreground#aea7b7
  • terminal.selectionBackground#8780ac33
  • terminalCursor.background#8b5cf6
  • terminalCursor.foreground#8b5cf6
  • textBlockQuote.background#48387a
  • textBlockQuote.border#48387a
  • textCodeBlock.background#181325
  • textLink.activeForeground#8b5cf6
  • textLink.foreground#8b5cf6
  • textPreformat.foreground#cecadb
  • textSeparator.foreground#cecadb
  • titleBar.activeBackground#181325
  • titleBar.activeForeground#cecadb
  • titleBar.border#181325
  • titleBar.inactiveBackground#181325
  • titleBar.inactiveForeground#8780ac
  • tree.indentGuidesStroke#48387a
  • walkThrough.embeddedEditorBackground#181325
  • welcomePage.buttonBackground#48387a
  • welcomePage.buttonHoverBackground#48387a99
  • widget.shadow#08030c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#aea7b7
comment, punctuation.definition.comment#8780ac99italic
variable, string constant.other.placeholder, source#aea7b7
constant.other.color, punctuation.definition.entity, constant.character.entity, punctuation.definition.template-expression, punctuation.section.tag.twig#8b5cf6
invalid, invalid.illegal#ff2d3b
keyword, storage.type, storage.modifier, constant.numeric, constant.language, support.constant, constant.character, constant.escape#8b5cf6
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.brace, meta.block, meta.jsx, meta.embedded.expression, meta.template.expression, meta.tag.block.any.html, string.unquoted.tag-string.nunjucks, text.html.nunjucks#aea7b7
punctuation.separator.key-value.html, keyword.control, keyword.operator, constant.other.color, punctuation.definition.constant, meta.function.block.start.handlebars, meta.function.inline.other, meta.property-value, support.constant.mathematical-symbols, support.constant.vendored.property-value, punctuation.definition.keyword, punctuation.accessor, punctuation.separator.property, string.unquoted.filter-pipe#f35b04
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.variable.dom, meta.import, meta.export, meta.export.default, support.class.builtin, support.class.component, variable.other.object#4cc9f0
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.function-call, keyword.control.filter#f7b801
meta.block variable.other#aea7b7
variable.parameter, text.html, punctuation.section.property-list, meta.property-value.scss punctuation, meta.property-list, keyword.operator.type.annotation, variable.other.object.property#aea7b7
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, punctuation.definition.string, entity.name.section.markdown, meta.attribute-selector, entity.name.import.go, storage.type.attr.nunjucks#c77dff
entity.name, support.type, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, meta.object-literal.key#f7b801
support.type, support.class, keyword.other.debugger, entity.other.inherited-class, meta.property-name, punctuation.definition.raw.markdown, variable.graphql, variable.other.readwrite#4cc9f0
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, support.type.property-name, support.variable.object.node, support.variable.object.process#4cc9f0
entity.name.module.js, variable.import.parameter.js#ff2d3b
variable.language#4cc9f0italic
entity.name.method.js#4cc9f0italic
meta.class-method.js entity.name.function.js, variable.function.constructor#4cc9f0
entity.other.attribute-name#f35b04
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#f35b04
entity.other.attribute-name.class, punctuation.definition.entity.css#f35b04
source.sass keyword.control#4cc9f0
markup.inserted#c77dff
markup.deleted#ff2d3b
markup.changed#8b5cf6
string.regexp#f35b04
constant.character.escape#4cc9f0
*url*, *link*, *uri*underline
meta.decorator, tag.decorator.js entity.name.tag, tag.decorator.js punctuation.definition.tag#4cc9f0
source.js constant.other.object.key.js string.unquoted.label.js#ff2d3bitalic
source.json meta.structure.dictionary.json support.type.property-name.json#4cc9f0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4cc9f0
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#f35b04
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#4cc9f0
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#f35b04
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#4cc9f0
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#f35b04
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#4cc9f0
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#f35b04
markup.italic#ff2d3bitalic
markup.bold#ff2d3bbold
markup.underline#8b5cf6underline
markup.strike#8b5cf6italic
markup.quote#4cc9f0italic
markup.raw.block#f35b04
markup.table#4cc9f0
text.html.markdown, punctuation.definition.list_item.markdown#aea7b7
text.html.markdown markup.raw.inline, text.html.markdown markup.inline.raw.string.markdown#4cc9f0
text.html.markdown meta.dummy.line-break#aea7b7
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown, punctuation.definition.heading.markdown#c77dff
markup.quote, punctuation.definition.blockquote.markdown#4cc9f0italic
string.other.link.title.markdown#8b5cf6underline
markup.raw.block.fenced.markdown#cecadb
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#aea7b7
variable.language.fenced.markdown#aea7b7
meta.separator#aea7b7
token.info-token#4cc9f0
token.warn-token#8b5cf6
token.error-token#ff2d3b
token.debug-token#8b5cf6
storage.type.error.go#4cc9f0
punctuation.other.period.go#f35b04