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#7B1FA2
  • activityBar.border#7B1FA2
  • activityBar.foreground#d8d8d8
  • activityBar.inactiveForeground#CE93D8
  • activityBarBadge.background#212121
  • activityBarBadge.foreground#FFFFFF
  • activityBarTop.foreground#D4D4D4
  • activityBarTop.inactiveForeground#CE93D8
  • badge.background#F3E5F580
  • badge.foreground#5E35B1
  • breadcrumb.activeSelectionForeground#7E57C2
  • breadcrumb.background#FDE0FE
  • breadcrumb.focusForeground#7E57C2
  • breadcrumb.foreground#BA68C8
  • breadcrumbPicker.background#F8BBD0
  • button.background#9C27B0DD
  • button.foreground#FFFFFF
  • button.hoverBackground#AB47BCAA
  • button.secondaryBackground#F3E5F5
  • charts.blue#1E88E5
  • charts.foreground#7E57C2
  • charts.green#7CB342
  • charts.lines#CE93D8
  • charts.orange#F9A825
  • charts.purple#8E24AA
  • charts.red#E91E63
  • charts.yellow#F9A825
  • chat.avatarBackground#757575
  • chat.avatarForeground#212121
  • chat.requestBorder#F06292
  • chat.slashCommandBackground#F3E5F5
  • chat.slashCommandForeground#BA68C8
  • debugConsole.errorForeground#E91E63
  • debugConsole.infoForeground#757575
  • debugConsole.sourceForeground#7E57C2
  • debugConsole.warningForeground#F9A825
  • debugConsoleInputIcon.foreground#7E57C2
  • debugExceptionWidget.background#F8BBD0
  • debugExceptionWidget.border#E91E63
  • debugIcon.breakpointDisabledForeground#CE93D8
  • debugIcon.breakpointForeground#E91E63
  • debugIcon.breakpointUnverifiedForeground#E91E63
  • debugTokenExpression.boolean#757575
  • debugTokenExpression.error#E91E63
  • debugTokenExpression.name#7E57C2
  • debugTokenExpression.number#757575
  • debugTokenExpression.string#616161
  • debugTokenExpression.value#757575
  • debugToolBar.background#F8BBD0
  • debugView.stateLabelBackground#F8BBD0
  • debugView.stateLabelForeground#7E57C2
  • debugView.valueChangedHighlight#CE93D880
  • descriptionForeground#9575CD
  • diffEditor.diagonalFill#CE93D8
  • diffEditor.insertedLineBackground#CE93D830
  • diffEditor.insertedTextBackground#CE93D830
  • diffEditor.removedLineBackground#E91E6330
  • diffEditor.removedTextBackground#E91E6330
  • diffEditor.unchangedCodeBackground#F8BBD080
  • diffEditorGutter.insertedLineBackground#CE93D830
  • diffEditorGutter.removedLineBackground#E91E6330
  • diffEditorOverview.insertedForeground#CE93D830
  • diffEditorOverview.removedForeground#E91E6330
  • disabledForeground#CE93D8
  • dropdown.background#F8BBD0
  • dropdown.foreground#5E35B1
  • dropdown.listBackground#F8BBD0
  • editor.background#FFFFFF
  • editor.findMatchBackground#FFF9C4
  • editor.findMatchBorder#F9A825
  • editor.findMatchHighlightBackground#F3E5F580
  • editor.findRangeHighlightBackground#F3E5F580
  • editor.focusedStackFrameHighlightBackground#F0629280
  • editor.foldBackground#F8BBD080
  • editor.foreground#5E35B1
  • editor.inactiveSelectionBackground#F3E5F581
  • editor.lineHighlightBackground#F8BBD0
  • editor.selectionBackground#F06292
  • editor.selectionHighlightBackground#F3E5F580
  • editor.stackFrameHighlightBackground#F0629280
  • editor.wordHighlightBackground#F3E5F580
  • editor.wordHighlightStrongBackground#F0629280
  • editorBracketHighlight.foreground1#9C27B0
  • editorBracketHighlight.foreground2#9C27B0
  • editorBracketHighlight.foreground3#9C27B0
  • editorBracketHighlight.foreground4#9C27B0
  • editorBracketHighlight.foreground5#9C27B0
  • editorBracketHighlight.foreground6#9C27B0
  • editorBracketHighlight.unexpectedBracket.foreground#E91E63
  • editorBracketMatch.background#F0629280
  • editorBracketMatch.border#CE93D8
  • editorBracketPairGuide.activeBackground1#9C27B0
  • editorBracketPairGuide.activeBackground2#9C27B0
  • editorBracketPairGuide.activeBackground3#9C27B0
  • editorBracketPairGuide.activeBackground4#9C27B0
  • editorBracketPairGuide.activeBackground5#9C27B0
  • editorBracketPairGuide.activeBackground6#9C27B0
  • editorCodeLens.foreground#BA68C8
  • editorCursor.foreground#5E35B1
  • editorError.foreground#E91E63
  • editorGhostText.foreground#BA68C8
  • editorGroup.border#F06292
  • editorGroup.dropBackground#F3E5F5
  • editorGroupHeader.border#F06292
  • editorGroupHeader.noTabsBackground#FDE0FE
  • editorGroupHeader.tabsBackground#FDE0FE
  • editorGroupHeader.tabsBorder#F06292
  • editorGutter.addedBackground#CE93D8
  • editorGutter.deletedBackground#CE93D8
  • editorGutter.modifiedBackground#CE93D8
  • editorHint.foreground#757575
  • editorHoverWidget.background#F8BBD0
  • editorHoverWidget.border#F06292
  • editorIndentGuide.activeBackground1#CE93D8
  • editorIndentGuide.background1#F3E5F5
  • editorInfo.foreground#757575
  • editorInlayHint.foreground#BA68C8
  • editorLightBulb.foreground#F9A825
  • editorLightBulbAutoFix.foreground#F9A825
  • editorLineNumber.activeForeground#7E57C2
  • editorLineNumber.foreground#BA68C8
  • editorLink.activeForeground#5E35B1
  • editorMarkerNavigation.background#F8BBD0
  • editorOverviewRuler.addedForeground#9C27B0
  • editorOverviewRuler.border#F06292
  • editorOverviewRuler.bracketMatchForeground#F06292
  • editorOverviewRuler.deletedForeground#9C27B0
  • editorOverviewRuler.errorForeground#E91E63
  • editorOverviewRuler.findMatchForeground#9C27B080
  • editorOverviewRuler.infoForeground#757575
  • editorOverviewRuler.modifiedForeground#9C27B0
  • editorOverviewRuler.rangeHighlightForeground#9C27B080
  • editorOverviewRuler.selectionHighlightForeground#9C27B040
  • editorOverviewRuler.warningForeground#F9A825
  • editorOverviewRuler.wordHighlightForeground#9C27B080
  • editorOverviewRuler.wordHighlightStrongForeground#9C27B090
  • editorPane.background#FDE0FE
  • editorRuler.foreground#F06292
  • editorSuggestWidget.background#F8BBD0
  • editorSuggestWidget.border#F06292
  • editorSuggestWidget.highlightForeground#000000
  • editorSuggestWidget.selectedBackground#F3E5F5
  • editorWarning.foreground#F9A825
  • editorWhitespace.foreground#CE93D8
  • editorWidget.background#F8BBD0
  • editorWidget.border#F06292
  • editorWidget.foreground#7E57C2
  • editorWidget.resizeBorder#BA68C8
  • errorForeground#E91E63
  • extensionBadge.remoteBackground#9C27B0
  • extensionBadge.remoteForeground#FFFFFF
  • extensionButton.prominentBackground#9C27B0DD
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#AB47BCAA
  • focusBorder#BA68C8
  • foreground#5E35B1
  • gitDecoration.addedResourceForeground#616161
  • gitDecoration.conflictingResourceForeground#F9A825
  • gitDecoration.deletedResourceForeground#E91E63
  • gitDecoration.ignoredResourceForeground#CE93D8
  • gitDecoration.modifiedResourceForeground#616161
  • gitDecoration.renamedResourceForeground#7E57C2
  • gitDecoration.stageDeletedResourceForeground#E91E63
  • gitDecoration.stageModifiedResourceForeground#616161
  • gitDecoration.untrackedResourceForeground#616161
  • icon.foreground#7E57C2
  • inlineChat.foreground#7E57C2
  • inlineChatDiff.inserted#CE93D830
  • inlineChatDiff.removed#E91E6330
  • inlineChatInput.background#F8BBD0
  • input.background#F8BBD0
  • input.border#F06292
  • input.foreground#5E35B1
  • input.placeholderForeground#CE93D8
  • inputOption.activeBackground#F0629280
  • inputOption.activeForeground#000000
  • inputValidation.errorBackground#E91E63
  • inputValidation.errorBorder#E91E63
  • inputValidation.errorForeground#FFFFFF
  • inputValidation.infoBackground#F3E5F5
  • inputValidation.infoBorder#CE93D8
  • inputValidation.infoForeground#212121
  • inputValidation.warningBackground#FFEB3B
  • inputValidation.warningBorder#FDD835
  • inputValidation.warningForeground#212121
  • list.activeSelectionBackground#F3E5F5
  • list.activeSelectionForeground#5E35B1
  • list.deemphasizedForeground#BA68C8
  • list.dropBackground#F3E5F5
  • list.errorForeground#E91E63
  • list.focusBackground#F06292
  • list.focusForeground#5E35B1
  • list.highlightForeground#000000
  • list.hoverBackground#F48FB1
  • list.hoverForeground#7E57C2
  • list.inactiveSelectionBackground#F8BBD0
  • list.inactiveSelectionForeground#7E57C2
  • list.invalidItemForeground#E91E63
  • list.warningForeground#F9A825
  • listFilterWidget.background#F8BBD0
  • listFilterWidget.noMatchesOutline#E91E63
  • listFilterWidget.outline#CE93D8
  • menu.background#F8BBD0
  • menu.border#F06292
  • menu.foreground#7E57C2
  • menu.selectionBackground#F3E5F5
  • menu.selectionForeground#7E57C2
  • menu.separatorBackground#F06292
  • menubar.selectionBackground#F3E5F5
  • menubar.selectionBorder#F06292
  • menubar.selectionForeground#7E57C2
  • merge.currentContentBackground#B39DDB80
  • merge.currentHeaderBackground#F3E5F580
  • merge.incomingContentBackground#C5CAE980
  • merge.incomingHeaderBackground#C5CAE980
  • mergeEditor.change.background#B39DDB80
  • mergeEditor.change.word.background#B39DDB
  • mergeEditor.conflict.handled.minimapOverViewRuler#CE93D8
  • mergeEditor.conflict.handledFocused.border#CE93D8
  • mergeEditor.conflict.handledUnfocused.border#CE93D880
  • mergeEditor.conflict.unhandled.minimapOverViewRuler#F9A825
  • mergeEditor.conflict.unhandledFocused.border#F9A825
  • mergeEditor.conflict.unhandledUnfocused.border#F9A82580
  • minimapGutter.addedBackground#CE93D8
  • minimapGutter.deletedBackground#CE93D8
  • minimapGutter.modifiedBackground#CE93D8
  • multiDiffEditor.border#F06292
  • multiDiffEditor.headerBackground#F8BBD0
  • notebook.cellBorderColor#F06292
  • notebook.cellEditorBackground#FDE0FE
  • notebook.cellStatusBarItemHoverBackground#F3E5F5
  • notebook.editorBackground#FDE0FE
  • notebook.focusedCellBorder#CE93D8
  • notificationCenterHeader.background#F8BBD0
  • notificationLink.foreground#7E57C2
  • notifications.background#F8BBD0
  • notificationsErrorIcon.foreground#E91E63
  • notificationsInfoIcon.foreground#757575
  • notificationsWarningIcon.foreground#F9A825
  • panel.background#FDE0FE
  • panel.border#F06292
  • panelInput.border#F06292
  • panelTitle.activeBorder#7E57C2
  • panelTitle.activeForeground#7E57C2
  • panelTitle.inactiveForeground#BA68C8
  • peekView.border#F06292
  • peekViewEditor.background#F8BBD0
  • peekViewEditor.matchHighlightBackground#F06292
  • peekViewResult.background#F8BBD0
  • peekViewResult.fileForeground#BA68C8
  • peekViewResult.lineForeground#7E57C2
  • peekViewResult.matchHighlightBackground#F0629280
  • peekViewResult.selectionBackground#F0629280
  • peekViewResult.selectionForeground#7E57C2
  • peekViewTitle.background#F8BBD0
  • peekViewTitleDescription.foreground#BA68C8
  • peekViewTitleLabel.foreground#7E57C2
  • pickerGroup.border#F06292
  • pickerGroup.foreground#5E35B1
  • progressBar.background#9C27B0
  • sash.hoverBorder#9C27B0
  • scmGraph.foreground1#CE93D8
  • scmGraph.foreground2#F9A825
  • scmGraph.foreground3#CE93D8
  • scmGraph.foreground4#CE93D8
  • scmGraph.foreground5#CE93D8
  • scmGraph.historyItemBaseRefColor#CE93D8
  • scmGraph.historyItemHoverAdditionsForeground#CE93D8
  • scmGraph.historyItemHoverDefaultLabelForeground#7E57C2
  • scmGraph.historyItemHoverDeletionsForeground#E91E63
  • scmGraph.historyItemHoverLabelForeground#7E57C2
  • scmGraph.historyItemRefColor#CE93D8
  • scmGraph.historyItemRemoteRefColor#CE93D8
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#9C27B080
  • scrollbarSlider.background#9C27B030
  • scrollbarSlider.hoverBackground#9C27B050
  • selection.background#F0629280
  • settings.headerForeground#5E35B1
  • sideBar.background#FDE0FE
  • sideBar.border#F06292
  • sideBar.dropBackground#F3E5F5
  • sideBar.foreground#5E35B1
  • sideBarSectionHeader.background#FDE0FE
  • sideBarSectionHeader.border#F06292
  • sideBarSectionHeader.foreground#5E35B1
  • sideBarTitle.foreground#212121
  • statusBar.background#7B1FA2
  • statusBar.border#7B1FA2
  • statusBar.debuggingBackground#B71C1C
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#d8d8d8
  • statusBar.noFolderBackground#F8BBD0
  • statusBarItem.activeBackground#F3E5F5
  • statusBarItem.hoverBackground#F06292
  • statusBarItem.prominentBackground#F3E5F5
  • statusBarItem.prominentHoverBackground#F06292
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#CE93D8
  • tab.activeForeground#7E57C2
  • tab.activeModifiedBorder#9C27B0
  • tab.border#F06292
  • tab.hoverForeground#5E35B1
  • tab.inactiveBackground#F3E5F5
  • tab.inactiveForeground#BA68C8
  • tab.inactiveModifiedBorder#9C27B0
  • tab.lastPinnedBorder#9C27B0
  • tab.unfocusedActiveBorder#9C27B0
  • tab.unfocusedActiveForeground#757575
  • tab.unfocusedHoverForeground#5E35B1
  • tab.unfocusedInactiveForeground#BA68C8
  • terminal.ansiBlack#424242
  • terminal.ansiBlue#1E88E5
  • terminal.ansiBrightBlack#757575
  • terminal.ansiBrightBlue#1E88E5
  • terminal.ansiBrightCyan#00ACC1
  • terminal.ansiBrightGreen#7CB342
  • terminal.ansiBrightMagenta#8E24AA
  • terminal.ansiBrightRed#E91E63
  • terminal.ansiBrightWhite#424242
  • terminal.ansiBrightYellow#F9A825
  • terminal.ansiCyan#00ACC1
  • terminal.ansiGreen#7CB342
  • terminal.ansiMagenta#8E24AA
  • terminal.ansiRed#E91E63
  • terminal.ansiWhite#757575
  • terminal.ansiYellow#F9A825
  • terminal.background#FFFFFF
  • terminal.foreground#7E57C2
  • terminal.selectionBackground#F3E5F580
  • textBlockQuote.background#F8BBD0
  • textCodeBlock.background#F8BBD0
  • textLink.activeForeground#7E57C2
  • textLink.foreground#5E35B1
  • textPreformat.foreground#757575
  • textSeparator.foreground#CE93D8
  • titleBar.activeBackground#7B1FA2
  • titleBar.activeForeground#d8d8d8
  • titleBar.border#7B1FA2
  • titleBar.inactiveBackground#F8BBD0
  • titleBar.inactiveForeground#BA68C8
  • toolbar.activeBackground#F8BBD0
  • toolbar.hoverBackground#F48FB1
  • tree.indentGuidesStroke#CE93D8
  • walkThrough.embeddedEditorBackground#F8BBD0
  • widget.shadow#00000000
  • window.activeBorder#F8BBD0
  • window.inactiveBorder#F06292

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#CE93D8italic
variable, string constant.other.placeholder#BA68C8
constant.other.color#E1BEE7
invalid, invalid.illegal#E91E63
keyword, storage.type, storage.modifier#AB47BC
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#AB47BC
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#AB47BC
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#AB47BC
meta.block variable.other#BA68C8
support.other.variable, string.other.link#AB47BC
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#9575CD
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#8E24AA
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#7E57C2
support.type#BA68C8
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#AB47BC
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#BA68C8
variable.language#AB47BCitalic
entity.name.method.js#AB47BCitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#AB47BC
entity.other.attribute-name#7E57C2
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#AB47BCitalic
entity.other.attribute-name.class#AB47BC
source.sass keyword.control#AB47BC
markup.inserted#8E24AA
markup.deleted#E91E63
markup.changed#F48FB1
string.regexp#AB47BC
constant.character.escape#7E57C2
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#AB47BCitalic
source.js constant.other.object.key.js string.unquoted.label.js#AB47BCitalic
source.json meta.structure.dictionary.json support.type.property-name.json#AB47BC
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#BA68C8
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#7E57C2
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#9575CD
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#AB47BC
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#8E24AA
text.html.markdown, punctuation.definition.list_item.markdown#BA68C8
text.html.markdown markup.inline.raw.markdown#AB47BC
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#7E57C2
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#AB47BC
markup.italic#9575CDitalic
markup.bold, markup.bold string#BA68C8bold
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#BA68C8bold italic
markup.underline#AB47BCunderline
markup.quote punctuation.definition.blockquote.markdown#9575CD
markup.quote#8E24AAitalic
string.other.link.title.markdown#AB47BC
string.other.link.description.title.markdown#BA68C8
constant.other.reference.link.markdown#9575CD
markup.raw.block#AB47BC
markup.raw.block.fenced.markdown#7E57C2
punctuation.definition.fenced.markdown#AB47BC
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#7E57C2
variable.language.fenced.markdown#AB47BC
meta.separator#AB47BCbold
markup.table#7E57C2