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#dddaff
  • activityBar.border#b8b8ff
  • activityBar.foreground#1a1730
  • activityBarBadge.background#9381ff
  • activityBarBadge.foreground#f8f7ff
  • badge.background#9381ff
  • badge.foreground#f8f7ff
  • breadcrumb.activeSelectionForeground#1a1730
  • breadcrumb.background#f8f7ff
  • breadcrumb.focusForeground#2a2548
  • breadcrumb.foreground#6b65a0
  • breadcrumbPicker.background#eceaff
  • button.background#9381ff
  • button.foreground#f8f7ff
  • button.hoverBackground#7a6ef0
  • debugExceptionWidget.background#9381ff
  • debugExceptionWidget.border#9381ff
  • diffEditor.insertedTextBackground#9381ff20
  • diffEditor.removedTextBackground#9381ff15
  • dropdown.background#eceaff
  • dropdown.border#b8b8ff
  • dropdown.foreground#1a1730
  • dropdown.listBackground#f8f7ff
  • editor.background#f8f7ff
  • editor.findMatchBackground#9381ff50
  • editor.findMatchHighlightBackground#9381ff25
  • editor.foreground#1a1730
  • editor.inactiveSelectionBackground#b8b8ff40
  • editor.lineHighlightBackground#eceaff
  • editor.rangeHighlightBackground#9381ff15
  • editor.selectionBackground#b8b8ff66
  • editor.selectionHighlightBackground#b8b8ff44
  • editor.wordHighlightBackground#b8b8ff44
  • editor.wordHighlightStrongBackground#b8b8ff66
  • editorBracketMatch.background#9381ff20
  • editorBracketMatch.border#9381ff
  • editorCodeLens.foreground#6b65a0
  • editorCursor.foreground#9381ff
  • editorError.foreground#f14c4c
  • editorGroup.border#b8b8ff
  • editorGroup.dropBackground#eceaffcc
  • editorGroupHeader.noTabsBackground#eceaff
  • editorGroupHeader.tabsBackground#eceaff
  • editorGroupHeader.tabsBorder#b8b8ff
  • editorGutter.addedBackground#2a2548b3
  • editorGutter.background#f8f7ff
  • editorGutter.deletedBackground#9381ffb3
  • editorGutter.modifiedBackground#6b65a0b3
  • editorHoverWidget.background#eceaff
  • editorHoverWidget.border#b8b8ff
  • editorLineNumber.activeForeground#6b65a0
  • editorLineNumber.foreground#b8b8ff
  • editorLink.activeForeground#2a2548
  • editorMarkerNavigation.background#eceaff
  • editorMarkerNavigationError.background#f14c4cb3
  • editorMarkerNavigationWarning.background#cca700b3
  • editorOverviewRuler.addedForeground#2a2548
  • editorOverviewRuler.border#b8b8ff
  • editorOverviewRuler.currentContentForeground#2a254820
  • editorOverviewRuler.deletedForeground#9381ff
  • editorOverviewRuler.errorForeground#f14c4c
  • editorOverviewRuler.findMatchForeground#9381ff50
  • editorOverviewRuler.incomingContentForeground#9381ff20
  • editorOverviewRuler.infoForeground#9381ff
  • editorOverviewRuler.modifiedForeground#6b65a0
  • editorOverviewRuler.rangeHighlightForeground#b8b8ff44
  • editorOverviewRuler.selectionHighlightForeground#b8b8ff44
  • editorOverviewRuler.warningForeground#cca700
  • editorOverviewRuler.wordHighlightForeground#b8b8ff44
  • editorOverviewRuler.wordHighlightStrongForeground#b8b8ff66
  • editorRuler.foreground#b8b8ff
  • editorSuggestWidget.background#eceaff
  • editorSuggestWidget.border#b8b8ff
  • editorSuggestWidget.foreground#1a1730
  • editorSuggestWidget.highlightForeground#1a1730
  • editorSuggestWidget.selectedBackground#b8b8ff66
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#b8b8ff66
  • editorWidget.background#eceaff
  • editorWidget.border#b8b8ff
  • errorForeground#f14c4c
  • extensionButton.prominentBackground#9381ff
  • extensionButton.prominentForeground#f8f7ff
  • extensionButton.prominentHoverBackground#7a6ef0
  • focusBorder#9381ff80
  • foreground#2a2548
  • gitDecoration.conflictingResourceForeground#4a4470
  • gitDecoration.deletedResourceForeground#9381ff
  • gitDecoration.ignoredResourceForeground#6b65a0
  • gitDecoration.modifiedResourceForeground#2a2548
  • gitDecoration.untrackedResourceForeground#1a1730
  • input.background#f8f7ff
  • input.border#b8b8ff
  • input.foreground#1a1730
  • input.placeholderForeground#6b65a0
  • inputOption.activeBorder#9381ff
  • inputValidation.errorBackground#f8f7ff
  • inputValidation.errorBorder#f14c4c
  • inputValidation.infoBackground#f8f7ff
  • inputValidation.infoBorder#9381ff
  • inputValidation.warningBackground#f8f7ff
  • inputValidation.warningBorder#cca700
  • list.activeSelectionBackground#b8b8ff66
  • list.activeSelectionForeground#1a1730
  • list.dropBackground#b8b8ff44
  • list.focusBackground#b8b8ff66
  • list.focusForeground#1a1730
  • list.highlightForeground#9381ff
  • list.hoverBackground#eceaff
  • list.hoverForeground#1a1730
  • list.inactiveFocusBackground#b8b8ff40
  • list.inactiveSelectionBackground#b8b8ff44
  • list.inactiveSelectionForeground#1a1730
  • list.invalidItemForeground#9381ff
  • merge.border#9381ff80
  • merge.currentContentBackground#2a254820
  • merge.currentHeaderBackground#2a254840
  • merge.incomingContentBackground#9381ff20
  • merge.incomingHeaderBackground#9381ff40
  • notificationCenter.border#9381ff
  • notificationCenterHeader.background#9381ff
  • notificationCenterHeader.foreground#f8f7ff
  • notificationLink.foreground#2a2548
  • notifications.background#eceaff
  • notifications.border#b8b8ff
  • notifications.foreground#1a1730
  • notificationToast.border#b8b8ff
  • panel.background#eceaff
  • panel.border#b8b8ff
  • panelTitle.activeBorder#9381ff
  • panelTitle.activeForeground#1a1730
  • panelTitle.inactiveForeground#6b65a0
  • peekView.border#b8b8ff
  • peekViewEditor.background#eceaff
  • peekViewEditor.matchHighlightBackground#9381ff30
  • peekViewEditorGutter.background#eceaff
  • peekViewResult.background#dddaff
  • peekViewResult.fileForeground#1a1730
  • peekViewResult.lineForeground#2a2548
  • peekViewResult.matchHighlightBackground#9381ff30
  • peekViewResult.selectionBackground#b8b8ff66
  • peekViewResult.selectionForeground#1a1730
  • peekViewTitle.background#f8f7ff
  • peekViewTitleDescription.foreground#6b65a0
  • peekViewTitleLabel.foreground#1a1730
  • pickerGroup.border#b8b8ff
  • pickerGroup.foreground#6b65a0
  • progressBar.background#9381ff
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#9381ff66
  • scrollbarSlider.background#9381ff22
  • scrollbarSlider.hoverBackground#9381ff44
  • selection.background#b8b8ff66
  • sideBar.background#eceaff
  • sideBar.border#b8b8ff
  • sideBar.foreground#2a2548
  • sideBarSectionHeader.background#dddaff
  • sideBarSectionHeader.foreground#4a4470
  • sideBarTitle.foreground#2a2548
  • statusBar.background#dddaff
  • statusBar.border#b8b8ff
  • statusBar.debuggingBackground#9381ff
  • statusBar.debuggingForeground#f8f7ff
  • statusBar.foreground#2a2548
  • statusBar.noFolderBackground#b8b8ff
  • statusBar.noFolderForeground#2a2548
  • statusBarItem.activeBackground#b8b8ff66
  • statusBarItem.hoverBackground#b8b8ff44
  • statusBarItem.prominentBackground#9381ff
  • statusBarItem.prominentHoverBackground#7a6ef0
  • tab.activeBackground#f8f7ff
  • tab.activeBorder#9381ff
  • tab.activeForeground#1a1730
  • tab.border#b8b8ff
  • tab.hoverBackground#dddaff
  • tab.inactiveBackground#eceaff
  • tab.inactiveForeground#6b65a0
  • tab.unfocusedActiveForeground#2a2548
  • tab.unfocusedHoverBackground#dddaff
  • tab.unfocusedInactiveForeground#6b65a0
  • terminal.ansiBlack#1a1730
  • terminal.ansiBlue#2a2548
  • terminal.ansiBrightBlack#4a4470
  • terminal.ansiBrightBlue#1a1730
  • terminal.ansiBrightCyan#1a1730
  • terminal.ansiBrightGreen#1a1730
  • terminal.ansiBrightMagenta#7a6ef0
  • terminal.ansiBrightRed#9381ff
  • terminal.ansiBrightWhite#f8f7ff
  • terminal.ansiBrightYellow#2a2548
  • terminal.ansiCyan#2a2548
  • terminal.ansiGreen#2a2548
  • terminal.ansiMagenta#6b65a0
  • terminal.ansiRed#9381ff
  • terminal.ansiWhite#b8b8ff
  • terminal.ansiYellow#6b65a0
  • terminal.background#eceaff
  • terminal.foreground#1a1730
  • terminal.selectionBackground#b8b8ff66
  • titleBar.activeBackground#dddaff
  • titleBar.activeForeground#1a1730
  • titleBar.border#b8b8ff
  • titleBar.inactiveBackground#eceaff
  • titleBar.inactiveForeground#6b65a0
  • walkThrough.embeddedEditorBackground#eceaff
  • widget.shadow#00000022

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b65a0italic
keyword, storage.type, storage.modifier#6236ccitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical#4a4470
keyword.control.import, keyword.control.export, keyword.control.from#6236cc
string, string.quoted, string.template#a05030
punctuation.definition.string.begin, punctuation.definition.string.end#c07050
constant.character.escape, constant.other.placeholder#c06000italic
entity.name.function, meta.function-call, variable.function, support.function#2a2548
entity.name.label#2a2548
entity.name.type.class, entity.name.type, support.class, support.type#1a4070italic
meta.type.annotation, meta.type.parameters#1a4070italic
entity.name.type.module, meta.import variable.other#1a4070
variable, variable.name, variable.other#1a1730
variable.parameter#2a2548
variable.language#a05030italic
variable.other.property, variable.other.object.property, support.variable.property#a05030
constant.numeric#207050
constant.language#6236cc
constant, constant.other, constant.character#207050
entity.name.tag, meta.tag.sgml#6236cc
entity.name.tag support.class.component#1a4070
meta.tag.attribute, entity.other.attribute-name#a05030italic
punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#4a4470
punctuation.terminator.statement, punctuation.separator.comma, punctuation.terminator.rule#6b65a0
punctuation.accessor#4a4470
source.css entity.other.attribute-name.class, source.scss entity.other.attribute-name.class#1a4070
source.css entity.other.attribute-name.id, source.scss entity.other.attribute-name.id#a05030
support.type.property-name.css, meta.property-list.css, meta.property-list.scss#2a2548
meta.property-value.css, support.constant.property-value.css#a05030
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#207050italic
meta.object-literal.key#2a2548
source.json meta.structure.dictionary.json support.type.property-name.json#2a2548
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#a05030
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#1a4070
*url*, *link*, *uri*#1a4070underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#6236ccitalic
markup.heading, entity.name.section#2a2548bold
markup.italic#2a2548italic
markup.bold#1a1730bold
markup.underline#a05030underline
markup.strike#6b65a0strikethrough
markup.quote#4a4470italic
markup.raw.block, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#207050
markup.deleted, punctuation.definition.deleted#c0392b
markup.inserted, punctuation.definition.inserted#207050
markup.changed, punctuation.definition.changed#a05030
entity.other.inherited-class#1a4070
invalid, invalid.illegal#f14c4c
token.info-token#2a2548
token.warn-token#cca700
token.error-token#f14c4c
token.debug-token#6b65a0