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#00E676
  • activityBar.background#0D0B18
  • activityBar.border#262044
  • activityBar.foreground#DECFFC
  • activityBar.inactiveForeground#7D6AA0
  • activityBarBadge.background#00E676
  • activityBarBadge.foreground#0D0B18
  • badge.background#262044
  • badge.foreground#DECFFC
  • banner.background#18142C
  • banner.foreground#DECFFC
  • banner.iconForeground#00E676
  • breadcrumb.activeSelectionForeground#00E676
  • breadcrumb.background#08070F
  • breadcrumb.focusForeground#EADFFC
  • breadcrumb.foreground#7D6AA0
  • button.background#00E676
  • button.foreground#0D0B18
  • button.hoverBackground#00e676d9
  • button.secondaryBackground#262044
  • button.secondaryForeground#DECFFC
  • charts.blue#00E676
  • charts.foreground#DECFFC
  • charts.green#00E676
  • charts.lines#3B316A
  • charts.orange#FFD740
  • charts.purple#00B0FF
  • charts.red#E040FB
  • charts.yellow#FFD740
  • chat.avatarBackground#18142C
  • chat.avatarForeground#DECFFC
  • chat.background#08070F
  • chat.requestBackground#0D0B18
  • chat.requestBorder#262044
  • chat.slashCommandBackground#00e67633
  • chat.slashCommandForeground#00E676
  • checkbox.background#18142C
  • checkbox.border#3B316A
  • checkbox.foreground#EADFFC
  • checkbox.selectBackground#00E676
  • checkbox.selectBorder#00E676
  • commandCenter.activeBackground#262044
  • commandCenter.activeBorder#00E676
  • commandCenter.activeForeground#EADFFC
  • commandCenter.background#18142C
  • commandCenter.border#262044
  • commandCenter.debuggingBackground#FFD740
  • commandCenter.foreground#BDABEC
  • commandCenter.inactiveBorder#262044
  • commandCenter.inactiveForeground#7D6AA0
  • debugConsole.errorForeground#E040FB
  • debugConsole.infoForeground#DECFFC
  • debugConsole.sourceForeground#BDABEC
  • debugConsole.warningForeground#FFD740
  • debugConsoleInputIcon.foreground#00E676
  • debugExceptionWidget.background#18142C
  • debugExceptionWidget.border#E040FB
  • debugIcon.breakpointDisabledForeground#7D6AA0
  • debugIcon.breakpointForeground#E040FB
  • debugIcon.breakpointUnverifiedForeground#BDABEC
  • debugIcon.continueForeground#00E676
  • debugIcon.disconnectForeground#E040FB
  • debugIcon.pauseForeground#00E676
  • debugIcon.restartForeground#00E676
  • debugIcon.startForeground#00E676
  • debugIcon.stepBackForeground#00E676
  • debugIcon.stepIntoForeground#00E676
  • debugIcon.stepOutForeground#00E676
  • debugIcon.stepOverForeground#00E676
  • debugIcon.stopForeground#E040FB
  • debugTokenExpression.boolean#FFD740
  • debugTokenExpression.error#E040FB
  • debugTokenExpression.name#DECFFC
  • debugTokenExpression.number#FFD740
  • debugTokenExpression.string#00B0FF
  • debugTokenExpression.value#BDABEC
  • debugToolBar.background#18142C
  • debugToolBar.border#3B316A
  • descriptionForeground#7D6AA0
  • diffEditor.insertedTextBackground#00e67626
  • diffEditor.removedTextBackground#e040fb26
  • dropdown.background#18142C
  • dropdown.border#3B316A
  • dropdown.foreground#EADFFC
  • editor.background#0D0B18
  • editor.findMatchBackground#e040fb66
  • editor.findMatchHighlightBackground#00e67633
  • editor.focusedStackFrameHighlightBackground#00e67633
  • editor.foldBackground#00e6761a
  • editor.foreground#DECFFC
  • editor.inactiveSelectionBackground#262044cc
  • editor.lineHighlightBackground#08070f99
  • editor.lineHighlightBorder#262044
  • editor.rangeHighlightBackground#00e6761f
  • editor.selectionBackground#00E67633
  • editor.selectionHighlightBackground#00e67633
  • editor.snippetFinalTabstopHighlightBorder#00E676
  • editor.snippetTabstopHighlightBackground#00e67633
  • editor.stackFrameHighlightBackground#ffd74033
  • editor.symbolHighlightBackground#e040fb33
  • editor.wordHighlightBackground#00e67626
  • editor.wordHighlightStrongBackground#00e67640
  • editorBracketMatch.background#00e6761f
  • editorBracketMatch.border#00E676
  • editorBracketPairGuide.activeBackground1#00E676
  • editorBracketPairGuide.background1#262044
  • editorCodeLens.foreground#7D6AA0
  • editorCursor.foreground#DECFFC
  • editorError.foreground#E040FB
  • editorGhostText.foreground#7d6aa0a6
  • editorGroupHeader.tabsBackground#0D0B18
  • editorGroupHeader.tabsBorder#262044
  • editorGutter.addedBackground#00E676
  • editorGutter.background#0D0B18
  • editorGutter.deletedBackground#E040FB
  • editorGutter.modifiedBackground#00B0FF
  • editorHint.foreground#BDABEC
  • editorHoverWidget.background#18142C
  • editorHoverWidget.border#3B316A
  • editorIndentGuide.activeBackground1#00e67673
  • editorIndentGuide.background1#262044
  • editorInfo.foreground#00E676
  • editorInlayHint.background#18142ce6
  • editorInlayHint.foreground#7D6AA0
  • editorLightBulb.foreground#FFD740
  • editorLightBulbAutoFix.foreground#00E676
  • editorLineNumber.activeForeground#DECFFC
  • editorLineNumber.foreground#7D6AA0
  • editorLink.activeForeground#00E676
  • editorOverviewRuler.addedForeground#00E676
  • editorOverviewRuler.border#262044
  • editorOverviewRuler.bracketMatchForeground#00E676
  • editorOverviewRuler.commonContentForeground#7D6AA0
  • editorOverviewRuler.currentContentForeground#00E676
  • editorOverviewRuler.deletedForeground#E040FB
  • editorOverviewRuler.errorForeground#E040FB
  • editorOverviewRuler.findMatchForeground#e040fb80
  • editorOverviewRuler.incomingContentForeground#00E676
  • editorOverviewRuler.infoForeground#00E676
  • editorOverviewRuler.modifiedForeground#00B0FF
  • editorOverviewRuler.selectionHighlightForeground#00e67666
  • editorOverviewRuler.warningForeground#FFD740
  • editorOverviewRuler.wordHighlightForeground#00e67666
  • editorRuler.foreground#262044
  • editorStickyScroll.background#08070F
  • editorStickyScroll.border#262044
  • editorStickyScrollHover.background#18142C
  • editorSuggestWidget.background#18142C
  • editorSuggestWidget.border#3B316A
  • editorSuggestWidget.foreground#DECFFC
  • editorSuggestWidget.highlightForeground#00E676
  • editorSuggestWidget.selectedBackground#221C3B
  • editorSuggestWidget.selectedForeground#F6F0FF
  • editorWarning.foreground#FFD740
  • editorWhitespace.foreground#7d6aa059
  • editorWidget.background#18142C
  • editorWidget.border#3B316A
  • errorForeground#E040FB
  • extensionButton.background#00E676
  • extensionButton.foreground#0D0B18
  • extensionButton.hoverBackground#00e676d9
  • extensionButton.prominentBackground#00E676
  • extensionButton.prominentForeground#0D0B18
  • extensionButton.prominentHoverBackground#00e676d9
  • focusBorder#00E676
  • foreground#DECFFC
  • gauge.errorBackground#e040fb33
  • gauge.errorForeground#E040FB
  • gauge.infoBackground#00e67633
  • gauge.infoForeground#00E676
  • gauge.warningBackground#ffd74033
  • gauge.warningForeground#FFD740
  • gitDecoration.addedResourceForeground#00E676
  • gitDecoration.conflictingResourceForeground#E040FB
  • gitDecoration.deletedResourceForeground#E040FB
  • gitDecoration.ignoredResourceForeground#7D6AA0
  • gitDecoration.modifiedResourceForeground#00B0FF
  • gitDecoration.renamedResourceForeground#00E676
  • gitDecoration.stageDeletedResourceForeground#E040FB
  • gitDecoration.stageModifiedResourceForeground#00B0FF
  • gitDecoration.submoduleResourceForeground#00E676
  • gitDecoration.untrackedResourceForeground#00E676
  • icon.foreground#BDABEC
  • inlineChat.background#18142C
  • inlineChat.border#3B316A
  • inlineChat.shadow#0d0b1880
  • inlineChatDiff.inserted#00e67626
  • inlineChatDiff.removed#e040fb26
  • inlineChatInput.background#0D0B18
  • inlineChatInput.border#262044
  • inlineChatInput.focusBorder#00E676
  • inlineChatInput.placeholderForeground#7D6AA0
  • input.background#18142C
  • input.border#3B316A
  • input.foreground#EADFFC
  • input.placeholderForeground#7D6AA0
  • inputOption.activeBorder#00E676
  • inputValidation.errorBackground#e040fb26
  • inputValidation.errorBorder#E040FB
  • inputValidation.warningBackground#ffd74026
  • inputValidation.warningBorder#FFD740
  • keybindingLabel.background#262044
  • keybindingLabel.border#3B316A
  • keybindingLabel.foreground#EADFFC
  • list.activeSelectionBackground#221C3B
  • list.activeSelectionForeground#F6F0FF
  • list.deemphasizedForeground#7D6AA0
  • list.dropBackground#00e67633
  • list.errorForeground#E040FB
  • list.filterMatchBackground#e040fb59
  • list.focusBackground#221C3B
  • list.focusForeground#F6F0FF
  • list.focusHighlightForeground#00e676bf
  • list.focusOutline#00e67680
  • list.highlightForeground#00E676
  • list.hoverBackground#262044
  • list.hoverForeground#EADFFC
  • list.inactiveSelectionBackground#262044
  • list.inactiveSelectionForeground#DECFFC
  • list.warningForeground#FFD740
  • listFilterWidget.background#18142C
  • listFilterWidget.noMatchesOutline#E040FB
  • listFilterWidget.outline#00E676
  • menu.background#18142C
  • menu.border#3B316A
  • menu.foreground#DECFFC
  • menu.selectionBackground#221C3B
  • menu.selectionForeground#F6F0FF
  • menu.separatorBackground#3B316A
  • menubar.selectionBackground#00e67633
  • menubar.selectionBorder#00E676
  • menubar.selectionForeground#EADFFC
  • merge.border#3B316A
  • merge.commonContentBackground#26204459
  • merge.commonHeaderBackground#26204480
  • merge.currentContentBackground#00e67633
  • merge.currentHeaderBackground#00e67666
  • merge.incomingContentBackground#00e67633
  • merge.incomingHeaderBackground#00e67666
  • minimap.background#0D0B18
  • minimap.errorHighlight#E040FB
  • minimap.findMatchHighlight#e040fb80
  • minimap.selectionHighlight#00e67680
  • minimap.warningHighlight#FFD740
  • minimapGutter.addedBackground#00E676
  • minimapGutter.deletedBackground#E040FB
  • minimapGutter.modifiedBackground#00B0FF
  • minimapSlider.activeBackground#00e67680
  • minimapSlider.background#26204480
  • minimapSlider.hoverBackground#3b316a99
  • multiDiffEditor.background#0D0B18
  • multiDiffEditor.border#262044
  • multiDiffEditor.headerBackground#18142C
  • notebook.cellBorderColor#262044
  • notebook.cellEditorBackground#08070F
  • notebook.cellHoverBackground#08070f80
  • notebook.cellStatusBarItemHoverBackground#262044
  • notebook.editorBackground#0D0B18
  • notebook.focusedCellBackground#26204466
  • notebook.focusedCellBorder#00E676
  • notebook.focusedEditorBorder#00E676
  • notebook.selectedCellBackground#2620444d
  • notebookStatusErrorIcon.foreground#E040FB
  • notebookStatusRunningIcon.foreground#00E676
  • notebookStatusSuccessIcon.foreground#00E676
  • notificationCenter.border#3B316A
  • notificationCenterHeader.background#18142C
  • notificationCenterHeader.foreground#EADFFC
  • notificationLink.foreground#00E676
  • notifications.background#18142C
  • notifications.border#262044
  • notifications.foreground#DECFFC
  • notificationsErrorIcon.foreground#E040FB
  • notificationsInfoIcon.foreground#00E676
  • notificationsWarningIcon.foreground#FFD740
  • notificationToast.border#3B316A
  • panel.background#18142C
  • panel.border#262044
  • panelInput.border#3B316A
  • panelSection.border#262044
  • panelSectionHeader.background#18142C
  • panelSectionHeader.foreground#DECFFC
  • panelTitle.activeBorder#00E676
  • panelTitle.activeForeground#EADFFC
  • panelTitle.inactiveForeground#7D6AA0
  • peekView.border#00E676
  • peekViewEditor.background#08070F
  • peekViewResult.background#0D0B18
  • peekViewTitle.background#18142C
  • ports.iconRunningProcessForeground#00E676
  • profileBadge.background#262044
  • profileBadge.foreground#DECFFC
  • progressBar.background#00E676
  • quickInput.background#18142C
  • quickInput.foreground#DECFFC
  • quickInputList.focusBackground#221C3B
  • quickInputList.focusForeground#F6F0FF
  • quickInputList.focusIconForeground#00e676bf
  • radio.activeBackground#00e67633
  • radio.activeBorder#00E676
  • radio.activeForeground#00E676
  • radio.inactiveBackground#18142C
  • radio.inactiveBorder#3B316A
  • radio.inactiveForeground#BDABEC
  • radio.inactiveHoverBackground#262044
  • sash.hoverBorder#00E676
  • scmGraph.foreground1#00E676
  • scmGraph.foreground2#FFD740
  • scmGraph.foreground3#E040FB
  • scmGraph.foreground4#00E676
  • scmGraph.foreground5#00B0FF
  • scmGraph.historyItemBaseRefColor#00E676
  • scmGraph.historyItemHoverAdditionsForeground#00E676
  • scmGraph.historyItemHoverDeletionsForeground#E040FB
  • scmGraph.historyItemHoverLabelForeground#EADFFC
  • scmGraph.historyItemRefColor#00E676
  • scmGraph.historyItemRemoteRefColor#00B0FF
  • scrollbar.shadow#0d0b1880
  • scrollbarSlider.activeBackground#00e67699
  • scrollbarSlider.background#262044b3
  • scrollbarSlider.hoverBackground#3b316acc
  • settings.checkboxBackground#18142C
  • settings.checkboxBorder#3B316A
  • settings.checkboxForeground#EADFFC
  • settings.dropdownBackground#18142C
  • settings.dropdownBorder#3B316A
  • settings.dropdownForeground#EADFFC
  • settings.focusedRowBackground#26204480
  • settings.headerBorder#262044
  • settings.headerForeground#EADFFC
  • settings.modifiedItemIndicator#00B0FF
  • settings.numberInputBackground#18142C
  • settings.numberInputBorder#3B316A
  • settings.numberInputForeground#FFD740
  • settings.rowHoverBackground#18142c80
  • settings.textInputBackground#18142C
  • settings.textInputBorder#3B316A
  • settings.textInputForeground#EADFFC
  • sideBar.background#08070F
  • sideBar.border#262044
  • sideBar.foreground#BDABEC
  • sideBarSectionHeader.background#18142C
  • sideBarSectionHeader.border#3B316A
  • sideBarSectionHeader.foreground#DECFFC
  • sideBarTitle.foreground#EADFFC
  • statusBar.background#08070F
  • statusBar.border#262044
  • statusBar.debuggingBackground#FFD740
  • statusBar.debuggingForeground#0D0B18
  • statusBar.foreground#DECFFC
  • statusBar.noFolderBackground#18142C
  • statusBar.noFolderForeground#DECFFC
  • statusBarItem.hoverBackground#00e67633
  • statusBarItem.remoteBackground#00E676
  • statusBarItem.remoteForeground#0D0B18
  • symbolIcon.arrayForeground#DECFFC
  • symbolIcon.booleanForeground#FFD740
  • symbolIcon.classForeground#E040FB
  • symbolIcon.colorForeground#BDABEC
  • symbolIcon.constantForeground#FFD740
  • symbolIcon.constructorForeground#00E676
  • symbolIcon.enumeratorForeground#E040FB
  • symbolIcon.enumeratorMemberForeground#FFD740
  • symbolIcon.eventForeground#00E676
  • symbolIcon.fieldForeground#DECFFC
  • symbolIcon.fileForeground#DECFFC
  • symbolIcon.folderForeground#BDABEC
  • symbolIcon.functionForeground#00E676
  • symbolIcon.interfaceForeground#E040FB
  • symbolIcon.keyForeground#E040FB
  • symbolIcon.keywordForeground#BDABEC
  • symbolIcon.methodForeground#00E676
  • symbolIcon.moduleForeground#BDABEC
  • symbolIcon.namespaceForeground#BDABEC
  • symbolIcon.numberForeground#FFD740
  • symbolIcon.objectForeground#DECFFC
  • symbolIcon.operatorForeground#BDABEC
  • symbolIcon.packageForeground#BDABEC
  • symbolIcon.propertyForeground#DECFFC
  • symbolIcon.referenceForeground#BDABEC
  • symbolIcon.snippetForeground#BDABEC
  • symbolIcon.stringForeground#00B0FF
  • symbolIcon.structForeground#E040FB
  • symbolIcon.textForeground#DECFFC
  • symbolIcon.typeParameterForeground#E040FB
  • symbolIcon.unitForeground#FFD740
  • symbolIcon.variableForeground#DECFFC
  • tab.activeBackground#08070F
  • tab.activeBorderTop#00E676
  • tab.activeForeground#EADFFC
  • tab.border#262044
  • tab.hoverBackground#18142C
  • tab.inactiveBackground#0D0B18
  • tab.inactiveForeground#7D6AA0
  • terminal.ansiBlack#0D0B18
  • terminal.ansiBlue#00E676
  • terminal.ansiBrightBlack#7D6AA0
  • terminal.ansiBrightBlue#00E676
  • terminal.ansiBrightCyan#00E676
  • terminal.ansiBrightGreen#00E676
  • terminal.ansiBrightMagenta#00B0FF
  • terminal.ansiBrightRed#E040FB
  • terminal.ansiBrightWhite#EADFFC
  • terminal.ansiBrightYellow#FFD740
  • terminal.ansiCyan#00E676
  • terminal.ansiGreen#00E676
  • terminal.ansiMagenta#00B0FF
  • terminal.ansiRed#E040FB
  • terminal.ansiWhite#DECFFC
  • terminal.ansiYellow#FFD740
  • terminal.background#0D0B18
  • terminal.border#262044
  • terminal.foreground#DECFFC
  • terminal.selectionBackground#00E67633
  • terminalCursor.foreground#DECFFC
  • testing.iconErrored#E040FB
  • testing.iconFailed#E040FB
  • testing.iconPassed#00E676
  • testing.iconQueued#FFD740
  • testing.iconSkipped#7D6AA0
  • testing.iconUnset#7D6AA0
  • testing.message.error.decorationForeground#E040FB
  • testing.message.info.decorationForeground#00E676
  • testing.runAction#00E676
  • textCodeBlockBackground#18142C
  • textLink#00E676
  • textLink.activeForeground#00E676
  • textPreformatBackground#262044
  • textPreformatForeground#BDABEC
  • titleBar.activeBackground#0D0B18
  • titleBar.activeForeground#EADFFC
  • titleBar.border#262044
  • titleBar.inactiveBackground#08070F
  • titleBar.inactiveForeground#7D6AA0
  • toolbar.activeBackground#262044
  • toolbar.hoverBackground#26204480
  • tree.inactiveIndentGuidesStroke#262044
  • tree.indentGuidesStroke#3B316A
  • tree.tableColumnsBorder#3B316A
  • tree.tableOddRowsBackground#18142c80
  • walkThrough.embeddedEditorBackground#08070F
  • welcomePage.background#0D0B18
  • welcomePage.progress.background#262044
  • welcomePage.progress.foreground#00E676
  • welcomePage.tileBackground#08070F
  • welcomePage.tileHoverBackground#18142C
  • widget.shadow#0d0b1880
  • window.activeBorder#00E676
  • window.inactiveBorder#262044

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7D6AA0italic
keyword, keyword.other.sql, keyword.other.DML.sql, keyword.other.DDL.sql, storage.type, storage.modifier#BDABEC
entity.name.function, support.function, support.function.sql, meta.function-call#00E676
entity.name.type, support.type, support.type.sql#E040FB
entity.name.table.sql, entity.name.class#DECFFC
variable, variable.other, meta.column.sql, variable.other.column.sql, support.variable#DECFFC
variable.parameter.sql, variable.other.sql, variable.parameter#BDABEC
string, string.quoted.single.sql, string.quoted.double.sql#00B0FF
constant.numeric, constant.language#FFD740
keyword.operator, keyword.operator.sql, punctuation#BDABEC
constant.other, support.constant#FFD740
support.type.property-name.json#E040FB
meta.decorator, punctuation.decorator#E040FB
string.template, punctuation.definition.template-expression#00B0FF
constant.character.escape#FFD740
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#E040FB
string.regexp, keyword.control.anchor.regexp, constant.other.character-class.regexp#00B0FF
entity.name.tag.yaml#E040FB
meta.preprocessor, keyword.control.directive#BDABEC
storage.type.class.jsdoc, variable.other.jsdoc, entity.name.type.instance.jsdoc#7D6AA0italic
markup.list, punctuation.definition.list#BDABEC
variable.other.special.shell#DECFFC
entity.name.lifetime.rust, keyword.operator.borrow.rust#FFD740
variable.language.special.self.python, variable.language.special.self#BDABEC
keyword.control, keyword.control.flow, keyword.control.import, keyword.control.conditional, keyword.control.loop#BDABEC
storage.modifier, storage.type.modifier#BDABEC
variable.language, variable.language.this, variable.language.super#BDABECitalic
entity.name.namespace, entity.name.scope-resolution#E040FB
entity.other.inherited-class#E040FBitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#DECFFC
support.class, support.other, support.constant.property-value#E040FB
meta.annotation, storage.type.annotation, punctuation.definition.annotation#E040FB
punctuation.accessor, punctuation.separator, meta.brace#BDABEC
meta.template.expression, punctuation.section.embedded#BDABEC
entity.name.tag, entity.name.tag.html, entity.name.tag.xml#BDABEC
entity.other.attribute-name, entity.other.attribute-name.html#BDABEC
punctuation.definition.tag, punctuation.separator.key-value.html#BDABEC
support.class.component, entity.name.tag.jsx, entity.name.tag.tsx#E040FB
support.type.property-name.css, support.type.vendored.property-name.css#DECFFC
keyword.other.unit, constant.numeric.css, constant.other.color#FFD740
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#BDABECbold
markup.bold, punctuation.definition.bold#FFD740bold
markup.italic, punctuation.definition.italic#E040FBitalic
markup.quote#7D6AA0italic
markup.inline.raw, markup.fenced_code, markup.raw#00B0FF
markup.underline.link, string.other.link, constant.other.reference.link.markdown#00E676
string.other.link.title.markdown, string.other.link.description.markdown#BDABEC
meta.separator.markdown, punctuation.definition.constant.markdown#7D6AA0
markup.inserted, meta.diff.header.to-file#00E676
markup.deleted, meta.diff.header.from-file#E040FB
markup.changed#00B0FF
invalid, invalid.illegal#E040FB