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#7E57C2
  • activityBar.background#0F0F14
  • activityBar.border#232331
  • activityBar.foreground#C0C0D8
  • activityBar.inactiveForeground#60607A
  • activityBarBadge.background#7E57C2
  • activityBarBadge.foreground#0F0F14
  • badge.background#232331
  • badge.foreground#C0C0D8
  • banner.background#181821
  • banner.foreground#C0C0D8
  • banner.iconForeground#7E57C2
  • breadcrumb.activeSelectionForeground#7E57C2
  • breadcrumb.background#0A0A0E
  • breadcrumb.focusForeground#E6E6FA
  • breadcrumb.foreground#60607A
  • button.background#7E57C2
  • button.foreground#0F0F14
  • button.hoverBackground#7e57c2d9
  • button.secondaryBackground#232331
  • button.secondaryForeground#C0C0D8
  • charts.blue#7E57C2
  • charts.foreground#C0C0D8
  • charts.green#66BB6A
  • charts.lines#34344A
  • charts.orange#FFCA28
  • charts.purple#42A5F5
  • charts.red#EF5350
  • charts.yellow#FFCA28
  • chat.avatarBackground#181821
  • chat.avatarForeground#C0C0D8
  • chat.background#0A0A0E
  • chat.requestBackground#0F0F14
  • chat.requestBorder#232331
  • chat.slashCommandBackground#7e57c233
  • chat.slashCommandForeground#7E57C2
  • checkbox.background#181821
  • checkbox.border#34344A
  • checkbox.foreground#E6E6FA
  • checkbox.selectBackground#7E57C2
  • checkbox.selectBorder#7E57C2
  • commandCenter.activeBackground#232331
  • commandCenter.activeBorder#7E57C2
  • commandCenter.activeForeground#E6E6FA
  • commandCenter.background#181821
  • commandCenter.border#232331
  • commandCenter.debuggingBackground#FFCA28
  • commandCenter.foreground#9C9CB0
  • commandCenter.inactiveBorder#232331
  • commandCenter.inactiveForeground#60607A
  • debugConsole.errorForeground#EF5350
  • debugConsole.infoForeground#C0C0D8
  • debugConsole.sourceForeground#9C9CB0
  • debugConsole.warningForeground#FFCA28
  • debugConsoleInputIcon.foreground#7E57C2
  • debugExceptionWidget.background#181821
  • debugExceptionWidget.border#EF5350
  • debugIcon.breakpointDisabledForeground#60607A
  • debugIcon.breakpointForeground#EF5350
  • debugIcon.breakpointUnverifiedForeground#9C9CB0
  • debugIcon.continueForeground#66BB6A
  • debugIcon.disconnectForeground#EF5350
  • debugIcon.pauseForeground#7E57C2
  • debugIcon.restartForeground#66BB6A
  • debugIcon.startForeground#66BB6A
  • debugIcon.stepBackForeground#7E57C2
  • debugIcon.stepIntoForeground#7E57C2
  • debugIcon.stepOutForeground#7E57C2
  • debugIcon.stepOverForeground#7E57C2
  • debugIcon.stopForeground#EF5350
  • debugTokenExpression.boolean#FF7043
  • debugTokenExpression.error#EF5350
  • debugTokenExpression.name#9C9CB0
  • debugTokenExpression.number#FF7043
  • debugTokenExpression.string#D4E157
  • debugTokenExpression.value#9C9CB0
  • debugToolBar.background#181821
  • debugToolBar.border#34344A
  • descriptionForeground#60607A
  • diffEditor.insertedTextBackground#66bb6a26
  • diffEditor.removedTextBackground#ef535026
  • dropdown.background#181821
  • dropdown.border#34344A
  • dropdown.foreground#E6E6FA
  • editor.background#0F0F14
  • editor.findMatchBackground#ffca2866
  • editor.findMatchHighlightBackground#7e57c233
  • editor.focusedStackFrameHighlightBackground#66bb6a33
  • editor.foldBackground#7e57c21a
  • editor.foreground#C0C0D8
  • editor.inactiveSelectionBackground#232331cc
  • editor.lineHighlightBackground#0a0a0e99
  • editor.lineHighlightBorder#232331
  • editor.rangeHighlightBackground#7e57c21f
  • editor.selectionBackground#7E57C240
  • editor.selectionHighlightBackground#7e57c233
  • editor.snippetFinalTabstopHighlightBorder#7E57C2
  • editor.snippetTabstopHighlightBackground#7e57c233
  • editor.stackFrameHighlightBackground#ffca2833
  • editor.symbolHighlightBackground#ffca2833
  • editor.wordHighlightBackground#7e57c226
  • editor.wordHighlightStrongBackground#7e57c240
  • editorBracketMatch.background#7e57c21f
  • editorBracketMatch.border#7E57C2
  • editorBracketPairGuide.activeBackground1#7E57C2
  • editorBracketPairGuide.background1#232331
  • editorCodeLens.foreground#60607A
  • editorCursor.foreground#E6E6FA
  • editorError.foreground#EF5350
  • editorGhostText.foreground#60607aa6
  • editorGroupHeader.tabsBackground#0F0F14
  • editorGroupHeader.tabsBorder#232331
  • editorGutter.addedBackground#66BB6A
  • editorGutter.background#0F0F14
  • editorGutter.deletedBackground#EF5350
  • editorGutter.modifiedBackground#42A5F5
  • editorHint.foreground#9C9CB0
  • editorHoverWidget.background#181821
  • editorHoverWidget.border#34344A
  • editorIndentGuide.activeBackground1#7e57c273
  • editorIndentGuide.background1#232331
  • editorInfo.foreground#7E57C2
  • editorInlayHint.background#181821e6
  • editorInlayHint.foreground#60607A
  • editorLightBulb.foreground#FFCA28
  • editorLightBulbAutoFix.foreground#7E57C2
  • editorLineNumber.activeForeground#E6E6FA
  • editorLineNumber.foreground#60607A
  • editorLink.activeForeground#7E57C2
  • editorOverviewRuler.addedForeground#66BB6A
  • editorOverviewRuler.border#232331
  • editorOverviewRuler.bracketMatchForeground#7E57C2
  • editorOverviewRuler.commonContentForeground#60607A
  • editorOverviewRuler.currentContentForeground#66BB6A
  • editorOverviewRuler.deletedForeground#EF5350
  • editorOverviewRuler.errorForeground#EF5350
  • editorOverviewRuler.findMatchForeground#ffca2880
  • editorOverviewRuler.incomingContentForeground#7E57C2
  • editorOverviewRuler.infoForeground#7E57C2
  • editorOverviewRuler.modifiedForeground#42A5F5
  • editorOverviewRuler.selectionHighlightForeground#7e57c266
  • editorOverviewRuler.warningForeground#FFCA28
  • editorOverviewRuler.wordHighlightForeground#7e57c266
  • editorRuler.foreground#232331
  • editorStickyScroll.background#0A0A0E
  • editorStickyScroll.border#232331
  • editorStickyScrollHover.background#181821
  • editorSuggestWidget.background#181821
  • editorSuggestWidget.border#34344A
  • editorSuggestWidget.foreground#C0C0D8
  • editorSuggestWidget.highlightForeground#7E57C2
  • editorSuggestWidget.selectedBackground#252136
  • editorSuggestWidget.selectedForeground#F0EBFB
  • editorWarning.foreground#FFCA28
  • editorWhitespace.foreground#60607a59
  • editorWidget.background#181821
  • editorWidget.border#34344A
  • errorForeground#EF5350
  • extensionButton.background#7E57C2
  • extensionButton.foreground#0F0F14
  • extensionButton.hoverBackground#7e57c2d9
  • extensionButton.prominentBackground#7E57C2
  • extensionButton.prominentForeground#0F0F14
  • extensionButton.prominentHoverBackground#7e57c2d9
  • focusBorder#7E57C2
  • foreground#C0C0D8
  • gauge.errorBackground#ef535033
  • gauge.errorForeground#EF5350
  • gauge.infoBackground#7e57c233
  • gauge.infoForeground#7E57C2
  • gauge.warningBackground#ffca2833
  • gauge.warningForeground#FFCA28
  • gitDecoration.addedResourceForeground#66BB6A
  • gitDecoration.conflictingResourceForeground#EF5350
  • gitDecoration.deletedResourceForeground#EF5350
  • gitDecoration.ignoredResourceForeground#60607A
  • gitDecoration.modifiedResourceForeground#42A5F5
  • gitDecoration.renamedResourceForeground#66BB6A
  • gitDecoration.stageDeletedResourceForeground#EF5350
  • gitDecoration.stageModifiedResourceForeground#42A5F5
  • gitDecoration.submoduleResourceForeground#7E57C2
  • gitDecoration.untrackedResourceForeground#66BB6A
  • icon.foreground#9C9CB0
  • inlineChat.background#181821
  • inlineChat.border#34344A
  • inlineChat.shadow#0f0f1480
  • inlineChatDiff.inserted#66bb6a26
  • inlineChatDiff.removed#ef535026
  • inlineChatInput.background#0F0F14
  • inlineChatInput.border#232331
  • inlineChatInput.focusBorder#7E57C2
  • inlineChatInput.placeholderForeground#60607A
  • input.background#181821
  • input.border#34344A
  • input.foreground#E6E6FA
  • input.placeholderForeground#60607A
  • inputOption.activeBorder#7E57C2
  • inputValidation.errorBackground#ef535026
  • inputValidation.errorBorder#EF5350
  • inputValidation.warningBackground#ffca2826
  • inputValidation.warningBorder#FFCA28
  • keybindingLabel.background#232331
  • keybindingLabel.border#34344A
  • keybindingLabel.foreground#E6E6FA
  • list.activeSelectionBackground#252136
  • list.activeSelectionForeground#F0EBFB
  • list.deemphasizedForeground#60607A
  • list.dropBackground#7e57c233
  • list.errorForeground#EF5350
  • list.filterMatchBackground#ffca2859
  • list.focusBackground#252136
  • list.focusForeground#F0EBFB
  • list.focusHighlightForeground#7e57c2bf
  • list.focusOutline#7e57c280
  • list.highlightForeground#7E57C2
  • list.hoverBackground#232331
  • list.hoverForeground#E6E6FA
  • list.inactiveSelectionBackground#232331
  • list.inactiveSelectionForeground#C0C0D8
  • list.warningForeground#FFCA28
  • listFilterWidget.background#181821
  • listFilterWidget.noMatchesOutline#EF5350
  • listFilterWidget.outline#7E57C2
  • menu.background#181821
  • menu.border#34344A
  • menu.foreground#C0C0D8
  • menu.selectionBackground#252136
  • menu.selectionForeground#F0EBFB
  • menu.separatorBackground#34344A
  • menubar.selectionBackground#7e57c233
  • menubar.selectionBorder#7E57C2
  • menubar.selectionForeground#E6E6FA
  • merge.border#34344A
  • merge.commonContentBackground#23233159
  • merge.commonHeaderBackground#23233180
  • merge.currentContentBackground#66bb6a33
  • merge.currentHeaderBackground#66bb6a66
  • merge.incomingContentBackground#7e57c233
  • merge.incomingHeaderBackground#7e57c266
  • minimap.background#0F0F14
  • minimap.errorHighlight#EF5350
  • minimap.findMatchHighlight#ffca2880
  • minimap.selectionHighlight#7e57c280
  • minimap.warningHighlight#FFCA28
  • minimapGutter.addedBackground#66BB6A
  • minimapGutter.deletedBackground#EF5350
  • minimapGutter.modifiedBackground#42A5F5
  • minimapSlider.activeBackground#7e57c280
  • minimapSlider.background#23233180
  • minimapSlider.hoverBackground#34344a99
  • multiDiffEditor.background#0F0F14
  • multiDiffEditor.border#232331
  • multiDiffEditor.headerBackground#181821
  • notebook.cellBorderColor#232331
  • notebook.cellEditorBackground#0A0A0E
  • notebook.cellHoverBackground#0a0a0e80
  • notebook.cellStatusBarItemHoverBackground#232331
  • notebook.editorBackground#0F0F14
  • notebook.focusedCellBackground#23233166
  • notebook.focusedCellBorder#7E57C2
  • notebook.focusedEditorBorder#7E57C2
  • notebook.selectedCellBackground#2323314d
  • notebookStatusErrorIcon.foreground#EF5350
  • notebookStatusRunningIcon.foreground#7E57C2
  • notebookStatusSuccessIcon.foreground#66BB6A
  • notificationCenter.border#34344A
  • notificationCenterHeader.background#181821
  • notificationCenterHeader.foreground#E6E6FA
  • notificationLink.foreground#7E57C2
  • notifications.background#181821
  • notifications.border#232331
  • notifications.foreground#C0C0D8
  • notificationsErrorIcon.foreground#EF5350
  • notificationsInfoIcon.foreground#7E57C2
  • notificationsWarningIcon.foreground#FFCA28
  • notificationToast.border#34344A
  • panel.background#181821
  • panel.border#232331
  • panelInput.border#34344A
  • panelSection.border#232331
  • panelSectionHeader.background#181821
  • panelSectionHeader.foreground#C0C0D8
  • panelTitle.activeBorder#7E57C2
  • panelTitle.activeForeground#E6E6FA
  • panelTitle.inactiveForeground#60607A
  • peekView.border#7E57C2
  • peekViewEditor.background#0A0A0E
  • peekViewResult.background#0F0F14
  • peekViewTitle.background#181821
  • ports.iconRunningProcessForeground#66BB6A
  • profileBadge.background#232331
  • profileBadge.foreground#C0C0D8
  • progressBar.background#7E57C2
  • quickInput.background#181821
  • quickInput.foreground#C0C0D8
  • quickInputList.focusBackground#252136
  • quickInputList.focusForeground#F0EBFB
  • quickInputList.focusIconForeground#7e57c2bf
  • radio.activeBackground#7e57c233
  • radio.activeBorder#7E57C2
  • radio.activeForeground#7E57C2
  • radio.inactiveBackground#181821
  • radio.inactiveBorder#34344A
  • radio.inactiveForeground#9C9CB0
  • radio.inactiveHoverBackground#232331
  • sash.hoverBorder#7E57C2
  • scmGraph.foreground1#7E57C2
  • scmGraph.foreground2#FFCA28
  • scmGraph.foreground3#EF5350
  • scmGraph.foreground4#66BB6A
  • scmGraph.foreground5#42A5F5
  • scmGraph.historyItemBaseRefColor#7E57C2
  • scmGraph.historyItemHoverAdditionsForeground#66BB6A
  • scmGraph.historyItemHoverDeletionsForeground#EF5350
  • scmGraph.historyItemHoverLabelForeground#E6E6FA
  • scmGraph.historyItemRefColor#7E57C2
  • scmGraph.historyItemRemoteRefColor#42A5F5
  • scrollbar.shadow#0f0f1480
  • scrollbarSlider.activeBackground#7e57c299
  • scrollbarSlider.background#232331b3
  • scrollbarSlider.hoverBackground#34344acc
  • settings.checkboxBackground#181821
  • settings.checkboxBorder#34344A
  • settings.checkboxForeground#E6E6FA
  • settings.dropdownBackground#181821
  • settings.dropdownBorder#34344A
  • settings.dropdownForeground#E6E6FA
  • settings.focusedRowBackground#23233180
  • settings.headerBorder#232331
  • settings.headerForeground#E6E6FA
  • settings.modifiedItemIndicator#42A5F5
  • settings.numberInputBackground#181821
  • settings.numberInputBorder#34344A
  • settings.numberInputForeground#FF7043
  • settings.rowHoverBackground#18182180
  • settings.textInputBackground#181821
  • settings.textInputBorder#34344A
  • settings.textInputForeground#E6E6FA
  • sideBar.background#0A0A0E
  • sideBar.border#232331
  • sideBar.foreground#9C9CB0
  • sideBarSectionHeader.background#181821
  • sideBarSectionHeader.border#34344A
  • sideBarSectionHeader.foreground#C0C0D8
  • sideBarTitle.foreground#E6E6FA
  • statusBar.background#0A0A0E
  • statusBar.border#232331
  • statusBar.debuggingBackground#FFCA28
  • statusBar.debuggingForeground#0F0F14
  • statusBar.foreground#C0C0D8
  • statusBar.noFolderBackground#181821
  • statusBar.noFolderForeground#C0C0D8
  • statusBarItem.hoverBackground#7e57c233
  • statusBarItem.remoteBackground#7E57C2
  • statusBarItem.remoteForeground#0F0F14
  • symbolIcon.arrayForeground#9C9CB0
  • symbolIcon.booleanForeground#FF7043
  • symbolIcon.classForeground#7E57C2
  • symbolIcon.colorForeground#9C9CB0
  • symbolIcon.constantForeground#FF7043
  • symbolIcon.constructorForeground#26A69A
  • symbolIcon.enumeratorForeground#7E57C2
  • symbolIcon.enumeratorMemberForeground#FF7043
  • symbolIcon.eventForeground#26A69A
  • symbolIcon.fieldForeground#9C9CB0
  • symbolIcon.fileForeground#C0C0D8
  • symbolIcon.folderForeground#9C9CB0
  • symbolIcon.functionForeground#26A69A
  • symbolIcon.interfaceForeground#7E57C2
  • symbolIcon.keyForeground#7E57C2
  • symbolIcon.keywordForeground#5C6BC0
  • symbolIcon.methodForeground#26A69A
  • symbolIcon.moduleForeground#5C6BC0
  • symbolIcon.namespaceForeground#5C6BC0
  • symbolIcon.numberForeground#FF7043
  • symbolIcon.objectForeground#9C9CB0
  • symbolIcon.operatorForeground#5C6BC0
  • symbolIcon.packageForeground#5C6BC0
  • symbolIcon.propertyForeground#9C9CB0
  • symbolIcon.referenceForeground#B0BEC5
  • symbolIcon.snippetForeground#B0BEC5
  • symbolIcon.stringForeground#D4E157
  • symbolIcon.structForeground#7E57C2
  • symbolIcon.textForeground#C0C0D8
  • symbolIcon.typeParameterForeground#7E57C2
  • symbolIcon.unitForeground#FF7043
  • symbolIcon.variableForeground#9C9CB0
  • tab.activeBackground#0A0A0E
  • tab.activeBorderTop#7E57C2
  • tab.activeForeground#E6E6FA
  • tab.border#232331
  • tab.hoverBackground#181821
  • tab.inactiveBackground#0F0F14
  • tab.inactiveForeground#60607A
  • terminal.ansiBlack#0F0F14
  • terminal.ansiBlue#7E57C2
  • terminal.ansiBrightBlack#60607A
  • terminal.ansiBrightBlue#7E57C2
  • terminal.ansiBrightCyan#7E57C2
  • terminal.ansiBrightGreen#66BB6A
  • terminal.ansiBrightMagenta#42A5F5
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightWhite#E6E6FA
  • terminal.ansiBrightYellow#FFCA28
  • terminal.ansiCyan#7E57C2
  • terminal.ansiGreen#66BB6A
  • terminal.ansiMagenta#42A5F5
  • terminal.ansiRed#EF5350
  • terminal.ansiWhite#C0C0D8
  • terminal.ansiYellow#FFCA28
  • terminal.background#0F0F14
  • terminal.border#232331
  • terminal.foreground#C0C0D8
  • terminal.selectionBackground#7E57C240
  • terminalCursor.foreground#E6E6FA
  • testing.iconErrored#EF5350
  • testing.iconFailed#EF5350
  • testing.iconPassed#66BB6A
  • testing.iconQueued#FFCA28
  • testing.iconSkipped#60607A
  • testing.iconUnset#60607A
  • testing.message.error.decorationForeground#EF5350
  • testing.message.info.decorationForeground#7E57C2
  • testing.runAction#66BB6A
  • textCodeBlockBackground#181821
  • textLink#7E57C2
  • textLink.activeForeground#7E57C2
  • textPreformatBackground#232331
  • textPreformatForeground#9C9CB0
  • titleBar.activeBackground#0F0F14
  • titleBar.activeForeground#E6E6FA
  • titleBar.border#232331
  • titleBar.inactiveBackground#0A0A0E
  • titleBar.inactiveForeground#60607A
  • toolbar.activeBackground#232331
  • toolbar.hoverBackground#23233180
  • tree.inactiveIndentGuidesStroke#232331
  • tree.indentGuidesStroke#34344A
  • tree.tableColumnsBorder#34344A
  • tree.tableOddRowsBackground#18182180
  • walkThrough.embeddedEditorBackground#0A0A0E
  • welcomePage.background#0F0F14
  • welcomePage.progress.background#232331
  • welcomePage.progress.foreground#7E57C2
  • welcomePage.tileBackground#0A0A0E
  • welcomePage.tileHoverBackground#181821
  • widget.shadow#0f0f1480
  • window.activeBorder#7E57C2
  • window.inactiveBorder#232331

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#60607Aitalic
keyword, keyword.other.sql, keyword.other.DML.sql, keyword.other.DDL.sql, storage.type, storage.modifier#5C6BC0
entity.name.function, support.function, support.function.sql, meta.function-call#26A69A
entity.name.type, support.type, support.type.sql#7E57C2
entity.name.table.sql, entity.name.class#C0C0D8
variable, variable.other, meta.column.sql, variable.other.column.sql, support.variable#9C9CB0
variable.parameter.sql, variable.other.sql, variable.parameter#B0BEC5
string, string.quoted.single.sql, string.quoted.double.sql#D4E157
constant.numeric, constant.language#FF7043
keyword.operator, keyword.operator.sql, punctuation#5C6BC0
constant.other, support.constant#FF7043
support.type.property-name.json#7E57C2
meta.decorator, punctuation.decorator#7E57C2
string.template, punctuation.definition.template-expression#FFCA28
constant.character.escape#FF7043
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#26A69A
string.regexp, keyword.control.anchor.regexp, constant.other.character-class.regexp#D4E157
entity.name.tag.yaml#7E57C2
meta.preprocessor, keyword.control.directive#5C6BC0
storage.type.class.jsdoc, variable.other.jsdoc, entity.name.type.instance.jsdoc#60607Aitalic
markup.list, punctuation.definition.list#5C6BC0
variable.other.special.shell#9C9CB0
entity.name.lifetime.rust, keyword.operator.borrow.rust#FF7043
variable.language.special.self.python, variable.language.special.self#5C6BC0
keyword.control, keyword.control.flow, keyword.control.import, keyword.control.conditional, keyword.control.loop#5C6BC0
storage.modifier, storage.type.modifier#5C6BC0
variable.language, variable.language.this, variable.language.super#5C6BC0italic
entity.name.namespace, entity.name.scope-resolution#7E57C2
entity.other.inherited-class#7E57C2italic
variable.other.property, variable.other.object.property, meta.object-literal.key#9C9CB0
support.class, support.other, support.constant.property-value#7E57C2
meta.annotation, storage.type.annotation, punctuation.definition.annotation#7E57C2
punctuation.accessor, punctuation.separator, meta.brace#5C6BC0
meta.template.expression, punctuation.section.embedded#5C6BC0
entity.name.tag, entity.name.tag.html, entity.name.tag.xml#5C6BC0
entity.other.attribute-name, entity.other.attribute-name.html#B0BEC5
punctuation.definition.tag, punctuation.separator.key-value.html#5C6BC0
support.class.component, entity.name.tag.jsx, entity.name.tag.tsx#7E57C2
support.type.property-name.css, support.type.vendored.property-name.css#9C9CB0
keyword.other.unit, constant.numeric.css, constant.other.color#FF7043
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#5C6BC0bold
markup.bold, punctuation.definition.bold#FF7043bold
markup.italic, punctuation.definition.italic#7E57C2italic
markup.quote#60607Aitalic
markup.inline.raw, markup.fenced_code, markup.raw#D4E157
markup.underline.link, string.other.link, constant.other.reference.link.markdown#26A69A
string.other.link.title.markdown, string.other.link.description.markdown#B0BEC5
meta.separator.markdown, punctuation.definition.constant.markdown#60607A
markup.inserted, meta.diff.header.to-file#66BB6A
markup.deleted, meta.diff.header.from-file#EF5350
markup.changed#42A5F5
invalid, invalid.illegal#EF5350
NexQL Themes by astrx.dev - VS Code Theme