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.activeBackground#1b1138
  • activityBar.activeBorder#48e0ff
  • activityBar.background#0f0a22
  • activityBar.border#090518
  • activityBar.foreground#48e0ff
  • activityBar.inactiveForeground#7a6ba3
  • activityBarBadge.background#48e0ff
  • activityBarBadge.foreground#0d0720
  • badge.background#48e0ff
  • badge.foreground#0d0720
  • breadcrumb.activeSelectionForeground#48e0ff
  • breadcrumb.background#150d2e
  • breadcrumb.focusForeground#b3a3d9
  • breadcrumb.foreground#7a6ba3
  • breadcrumbPicker.background#0f0a22
  • button.background#6d3fd6
  • button.foreground#ffffff
  • button.hoverBackground#7d52e0
  • button.secondaryBackground#2a1c52
  • charts.blue#7c9cff
  • charts.foreground#e7ddff
  • charts.green#5fe3c4
  • charts.lines#2a1c52
  • charts.orange#ff9e64
  • charts.purple#c77dff
  • charts.red#ff6b81
  • charts.yellow#ffc266
  • debugConsole.errorForeground#ff6b81
  • debugConsole.infoForeground#7c9cff
  • debugConsole.sourceForeground#e7ddff
  • debugConsole.warningForeground#ffc266
  • debugConsoleInputIcon.foreground#5fe3c4
  • debugExceptionWidget.background#090518
  • debugExceptionWidget.border#ff6b81
  • debugIcon.breakpointDisabledForeground#7a6ba3
  • debugIcon.breakpointForeground#ff6b81
  • debugIcon.breakpointUnverifiedForeground#ffc266
  • debugTokenExpression.boolean#ffc266
  • debugTokenExpression.error#ff6b81
  • debugTokenExpression.name#7c9cff
  • debugTokenExpression.number#ffc266
  • debugTokenExpression.string#5fe3c4
  • debugTokenExpression.value#e7ddff
  • debugToolBar.background#090518
  • debugView.stateLabelBackground#1b1138
  • debugView.stateLabelForeground#b3a3d9
  • debugView.valueChangedHighlight#c77dffaa
  • descriptionForeground#b3a3d9
  • diffEditor.diagonalFill#2a1c52
  • diffEditor.insertedLineBackground#5fe3c420
  • diffEditor.insertedTextBackground#5fe3c420
  • diffEditor.removedLineBackground#ff6b8122
  • diffEditor.removedTextBackground#ff6b8122
  • diffEditorGutter.insertedLineBackground#5fe3c425
  • diffEditorGutter.removedLineBackground#ff6b8122
  • diffEditorOverview.insertedForeground#5fe3c425
  • diffEditorOverview.removedForeground#ff6b8122
  • dropdown.background#0f0a22
  • dropdown.foreground#e7ddff
  • dropdown.listBackground#0f0a22
  • editor.background#150d2e
  • editor.findMatchBackground#6d3fd666
  • editor.findMatchBorder#48e0ff
  • editor.findMatchHighlightBackground#48e0ff44
  • editor.findRangeHighlightBackground#4f3a9e33
  • editor.focusedStackFrameHighlightBackground#5fe3c420
  • editor.foldBackground#1b113833
  • editor.foreground#e7ddff
  • editor.inactiveSelectionBackground#4f3a9e40
  • editor.lineHighlightBackground#1f1542
  • editor.rangeHighlightBackground#4f3a9e22
  • editor.selectionBackground#4f3a9e80
  • editor.selectionHighlightBackground#6d4fd040
  • editor.stackFrameHighlightBackground#ffc26620
  • editor.wordHighlightBackground#7c9cff33
  • editor.wordHighlightStrongBackground#7c9cff44
  • editorBracketHighlight.foreground1#7c9cff
  • editorBracketHighlight.foreground2#48e0ff
  • editorBracketHighlight.foreground3#c77dff
  • editorBracketHighlight.foreground4#ff6bd6
  • editorBracketHighlight.foreground5#5fe3c4
  • editorBracketHighlight.foreground6#ffc266
  • editorBracketHighlight.unexpectedBracket.foreground#ff6b81
  • editorBracketMatch.background#1b1138
  • editorBracketMatch.border#c77dff
  • editorBracketPairGuide.activeBackground1#7c9cff
  • editorBracketPairGuide.activeBackground2#48e0ff
  • editorBracketPairGuide.activeBackground3#c77dff
  • editorBracketPairGuide.activeBackground4#ff6bd6
  • editorBracketPairGuide.activeBackground5#5fe3c4
  • editorBracketPairGuide.activeBackground6#ffc266
  • editorCodeLens.foreground#7a6ba3
  • editorCursor.foreground#48e0ff
  • editorError.foreground#ff6b81
  • editorGhostText.foreground#7a6ba3
  • editorGroup.border#090518
  • editorGroup.dropBackground#1b1138
  • editorGroupHeader.border#090518
  • editorGroupHeader.noTabsBackground#0f0a22
  • editorGroupHeader.tabsBackground#0f0a22
  • editorGroupHeader.tabsBorder#090518
  • editorGutter.addedBackground#5fe3c4
  • editorGutter.deletedBackground#ff6b81
  • editorGutter.modifiedBackground#7c9cff
  • editorHint.foreground#48e0ff
  • editorHoverWidget.background#0f0a22
  • editorHoverWidget.border#090518
  • editorIndentGuide.activeBackground#4a3a7a
  • editorIndentGuide.background#1f1542
  • editorInfo.foreground#48e0ff
  • editorLightBulb.foreground#ffc266
  • editorLightBulbAutoFix.foreground#ffc266
  • editorLineNumber.activeForeground#a99ad0
  • editorLineNumber.foreground#7a6ba3
  • editorLink.activeForeground#48e0ff
  • editorOverviewRuler.addedForeground#5fe3c4
  • editorOverviewRuler.border#090518
  • editorOverviewRuler.bracketMatchForeground#c77dff
  • editorOverviewRuler.deletedForeground#ff6b81
  • editorOverviewRuler.errorForeground#ff6b81
  • editorOverviewRuler.findMatchForeground#48e0ff
  • editorOverviewRuler.infoForeground#48e0ff
  • editorOverviewRuler.modifiedForeground#7c9cff
  • editorOverviewRuler.rangeHighlightForeground#c77dff
  • editorOverviewRuler.selectionHighlightForeground#c77dff
  • editorOverviewRuler.warningForeground#ffc266
  • editorOverviewRuler.wordHighlightForeground#b3a3d9
  • editorOverviewRuler.wordHighlightStrongForeground#e7ddff
  • editorPane.background#150d2e
  • editorRuler.foreground#2a1c52
  • editorSuggestWidget.background#0f0a22
  • editorSuggestWidget.border#090518
  • editorSuggestWidget.highlightForeground#48e0ff
  • editorSuggestWidget.selectedBackground#2e1f5e
  • editorWarning.foreground#ffc266
  • editorWhitespace.foreground#38275f
  • editorWidget.background#0f0a22
  • editorWidget.foreground#e7ddff
  • editorWidget.resizeBorder#c77dff66
  • errorForeground#ff6b81
  • extensionBadge.remoteBackground#48e0ff
  • extensionBadge.remoteForeground#0d0720
  • extensionButton.prominentBackground#6d3fd6
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#7d52e0
  • focusBorder#c77dff66
  • foreground#e7ddff
  • gitDecoration.addedResourceForeground#5fe3c4
  • gitDecoration.conflictingResourceForeground#ffc266
  • gitDecoration.deletedResourceForeground#ff6b81
  • gitDecoration.ignoredResourceForeground#7a6ba3
  • gitDecoration.modifiedResourceForeground#7c9cff
  • gitDecoration.renamedResourceForeground#5fe3c4
  • gitDecoration.stageDeletedResourceForeground#ff6b81
  • gitDecoration.stageModifiedResourceForeground#7c9cff
  • gitDecoration.untrackedResourceForeground#5fe3c4
  • gitlens.gutterBackgroundColor#0f0a22
  • gitlens.gutterForegroundColor#b3a3d9
  • gitlens.gutterUncommittedForegroundColor#7c9cff
  • gitlens.trailingLineForegroundColor#7a6ba3
  • icon.foreground#b3a3d9
  • input.background#0f0a22
  • input.border#2a1c52
  • input.foreground#e7ddff
  • input.placeholderForeground#b3a3d9
  • inputOption.activeBackground#c77dff33
  • inputOption.activeForeground#48e0ff
  • inputValidation.errorBackground#5a1f2c
  • inputValidation.errorBorder#ff6b81
  • inputValidation.errorForeground#e7ddff
  • inputValidation.infoBackground#6d3fd655
  • inputValidation.infoBorder#7c9cff
  • inputValidation.infoForeground#e7ddff
  • inputValidation.warningBackground#ffc266
  • inputValidation.warningBorder#ffc266
  • inputValidation.warningForeground#1a0f06
  • list.activeSelectionBackground#2e1f5e
  • list.activeSelectionForeground#e7ddff
  • list.deemphasizedForeground#7a6ba3
  • list.dropBackground#1b1138
  • list.errorForeground#ff6b81
  • list.focusBackground#2e1f5e
  • list.focusForeground#e7ddff
  • list.highlightForeground#48e0ff
  • list.hoverBackground#1b1138
  • list.hoverForeground#e7ddff
  • list.inactiveSelectionBackground#1b1138
  • list.inactiveSelectionForeground#e7ddff
  • list.invalidItemForeground#ffc266
  • list.warningForeground#ffc266
  • listFilterWidget.background#1b1138
  • listFilterWidget.noMatchesOutline#ff6b81
  • listFilterWidget.outline#c77dff
  • menu.background#0f0a22
  • menu.border#090518
  • menu.foreground#b3a3d9
  • menu.selectionBackground#2e1f5e
  • menu.selectionForeground#e7ddff
  • menu.separatorBackground#090518
  • menubar.selectionBackground#1b1138
  • menubar.selectionBorder#c77dff
  • menubar.selectionForeground#e7ddff
  • merge.currentContentBackground#5fe3c418
  • merge.currentHeaderBackground#5fe3c425
  • merge.incomingContentBackground#6d3fd644
  • merge.incomingHeaderBackground#6d3fd6aa
  • mergeEditor.change.background#5fe3c425
  • mergeEditor.change.word.background#5fe3c440
  • mergeEditor.conflict.handled.minimapOverViewRuler#5fe3c4
  • mergeEditor.conflict.handledFocused.border#5fe3c465
  • mergeEditor.conflict.handledUnfocused.border#5fe3c425
  • mergeEditor.conflict.unhandled.minimapOverViewRuler#ffc266
  • mergeEditor.conflict.unhandledFocused.border#ffc266b0
  • mergeEditor.conflict.unhandledUnfocused.border#ffc26688
  • minimapGutter.addedBackground#5fe3c4
  • minimapGutter.deletedBackground#ff6b81
  • minimapGutter.modifiedBackground#7c9cff
  • notebook.cellBorderColor#090518
  • notebook.cellEditorBackground#0f0a22
  • notebook.cellStatusBarItemHoverBackground#1b1138
  • notebook.editorBackground#150d2e
  • notebook.focusedCellBorder#c77dff
  • notificationCenterHeader.background#090518
  • notificationLink.foreground#7c9cff
  • notifications.background#0f0a22
  • notificationsErrorIcon.foreground#ff6b81
  • notificationsInfoIcon.foreground#48e0ff
  • notificationsWarningIcon.foreground#ffc266
  • panel.background#0f0a22
  • panel.border#090518
  • panelInput.border#2a1c52
  • panelTitle.activeBorder#48e0ff
  • panelTitle.activeForeground#e7ddff
  • panelTitle.inactiveForeground#7a6ba3
  • peekView.border#c77dff
  • peekViewEditor.background#0f0a22
  • peekViewEditor.matchHighlightBackground#6d3fd666
  • peekViewResult.background#090518
  • peekViewResult.fileForeground#b3a3d9
  • peekViewResult.lineForeground#e7ddff
  • peekViewResult.matchHighlightBackground#6d3fd666
  • peekViewResult.selectionBackground#2e1f5e
  • peekViewResult.selectionForeground#e7ddff
  • peekViewTitle.background#090518
  • peekViewTitleDescription.foreground#b3a3d9
  • peekViewTitleLabel.foreground#e7ddff
  • pickerGroup.border#090518
  • pickerGroup.foreground#c77dff
  • progressBar.background#48e0ff
  • sash.hoverBorder#c77dff
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#c77dff55
  • scrollbarSlider.background#c77dff22
  • scrollbarSlider.hoverBackground#c77dff33
  • selection.background#4f3a9e80
  • settings.headerForeground#c77dff
  • sideBar.background#0f0a22
  • sideBar.border#090518
  • sideBar.dropBackground#1b1138
  • sideBar.foreground#e7ddff
  • sideBarSectionHeader.background#0f0a22
  • sideBarSectionHeader.border#090518
  • sideBarSectionHeader.foreground#c77dff
  • sideBarTitle.foreground#e7ddff
  • statusBar.background#0f0a22
  • statusBar.border#090518
  • statusBar.debuggingBackground#6d3fd6
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#e7ddff
  • statusBar.noFolderBackground#0f0a22
  • statusBarItem.activeBackground#1b1138
  • statusBarItem.hoverBackground#1b1138
  • statusBarItem.prominentBackground#090518
  • statusBarItem.prominentHoverBackground#1b1138
  • tab.activeBackground#150d2e
  • tab.activeBorder#48e0ff
  • tab.activeForeground#e7ddff
  • tab.activeModifiedBorder#7c9cff
  • tab.border#090518
  • tab.hoverForeground#e7ddff
  • tab.inactiveBackground#0f0a22
  • tab.inactiveForeground#9a8ac4
  • tab.inactiveModifiedBorder#2a1c52
  • tab.lastPinnedBorder#2a1c52
  • tab.unfocusedActiveBorder#2a1c52
  • tab.unfocusedActiveForeground#b3a3d9
  • tab.unfocusedHoverForeground#e7ddff
  • tab.unfocusedInactiveForeground#7a6ba3
  • terminal.ansiBlack#2a1c52
  • terminal.ansiBlue#7c9cff
  • terminal.ansiBrightBlack#7a6ba3
  • terminal.ansiBrightBlue#9db4ff
  • terminal.ansiBrightCyan#7ce0ff
  • terminal.ansiBrightGreen#82edd2
  • terminal.ansiBrightMagenta#d9a6ff
  • terminal.ansiBrightRed#ff8a9c
  • terminal.ansiBrightWhite#e7ddff
  • terminal.ansiBrightYellow#ffd49a
  • terminal.ansiCyan#48e0ff
  • terminal.ansiGreen#5fe3c4
  • terminal.ansiMagenta#c77dff
  • terminal.ansiRed#ff6b81
  • terminal.ansiWhite#b3a3d9
  • terminal.ansiYellow#ffc266
  • terminal.background#0f0a22
  • terminal.foreground#e7ddff
  • terminal.selectionBackground#4f3a9e80
  • textBlockQuote.background#0f0a22
  • textCodeBlock.background#0f0a22
  • textLink.activeForeground#48e0ff
  • textLink.foreground#7c9cff
  • textPreformat.foreground#5ad7e6
  • textSeparator.foreground#2a1c52
  • titleBar.activeBackground#0f0a22
  • titleBar.activeForeground#e7ddff
  • titleBar.border#090518
  • titleBar.inactiveBackground#0f0a22
  • titleBar.inactiveForeground#7a6ba3
  • toolbar.activeBackground#2a1c52
  • toolbar.hoverBackground#1b1138
  • tree.indentGuidesStroke#2a1c52
  • walkThrough.embeddedEditorBackground#0f0a22
  • widget.shadow#00000066
  • window.activeBorder#090518
  • window.inactiveBorder#090518

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a6ba3italic
variable, string constant.other.placeholder#e7ddff—
constant.other.color#48e0ff—
invalid, invalid.illegal#ff6b81—
keyword, storage.type, storage.modifier#c77dff—
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#7ce0ff—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ff6bd6—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#7c9cff—
meta.block variable.other#ff6bd6—
support.other.variable, string.other.link#ff6bd6—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ffc266—
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#5fe3c4—
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#5ad7e6—
support.type#b3a3d9—
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#b3a3d9—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff6b81—
variable.language#ff6b81italic
entity.name.method.js#7c9cffitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#7c9cff—
entity.other.attribute-name#c77dff—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#5ad7e6italic
entity.other.attribute-name.class#5ad7e6—
source.sass keyword.control#7c9cff—
markup.inserted#5fe3c4—
markup.deleted#ff6b81—
markup.changed#c77dff—
string.regexp#7ce0ff—
constant.character.escape#7ce0ff—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#7c9cffitalic
source.js constant.other.object.key.js string.unquoted.label.js#ff6b81italic
source.json meta.structure.dictionary.json support.type.property-name.json#c77dff—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#5ad7e6—
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#ffc266—
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#ff6b81—
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#5fe3c4—
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#7c9cff—
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#ff6bd6—
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#c77dff—
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#5fe3c4—
text.html.markdown, punctuation.definition.list_item.markdown#e7ddff—
text.html.markdown markup.inline.raw.markdown#c77dff—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#b3a3d9—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#5fe3c4—
markup.italic#ff6bd6italic
markup.bold, markup.bold string#ff6bd6bold
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#ff6bd6bold
markup.underline#ffc266underline
markup.quote punctuation.definition.blockquote.markdown#7a6ba3—
markup.quote—italic
string.other.link.title.markdown#7c9cff—
string.other.link.description.title.markdown#c77dff—
constant.other.reference.link.markdown#ffc266—
markup.raw.block#c77dff—
markup.raw.block.fenced.markdown#b3a3d9—
punctuation.definition.fenced.markdown#7a6ba3—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#e7ddff—
variable.language.fenced.markdown#7a6ba3—
meta.separator#7a6ba3bold
markup.table#e7ddff—