Zenkai Theme
Publisher: ZenkaiThemes in package: 12
A vibrant, neon-infused dark theme ecosystem for VS Code inspired by the Zenkai Universe.
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#110A26
- activityBar.activeBorder#FF0000
- activityBar.background#09041A
- activityBar.border#06040D
- activityBar.dropBorder#00FFFF
- activityBar.foreground#FFFFFF
- activityBar.inactiveForeground#9086B7
- activityBarBadge.background#FF0000
- activityBarBadge.foreground#FFFFFF
- badge.background#FF0000
- badge.foreground#FFFFFF
- button.background#FF0000
- button.foreground#FFFFFF
- button.hoverBackground#FF4444
- debugToolBar.background#09041A
- debugToolBar.border#FF0000
- descriptionForeground#9086B7
- diffEditor.insertedTextBackground#00FF8830
- diffEditor.removedTextBackground#FF000030
- dropdown.background#1A1333
- dropdown.border#FF0000
- dropdown.foreground#D6D1EF
- dropdown.listBackground#09041A
- editor.background#110A26
- editor.findMatchBackground#FF000080
- editor.findMatchHighlightBackground#FF000040
- editor.findRangeHighlightBackground#1A1333
- editor.foreground#D6D1EF
- editor.hoverHighlightBackground#1A1333
- editor.inactiveSelectionBackground#FF000020
- editor.lineHighlightBackground#1A133360
- editor.lineHighlightBorder#1A1333
- editor.selectionBackground#FF000030
- editor.selectionForeground#FFFFFF
- editor.selectionHighlightBackground#FF000020
- editor.selectionHighlightBorder#00FFFF
- editor.wordHighlightBackground#00FFFF40
- editor.wordHighlightBorder#00FFFF
- editor.wordHighlightStrongBackground#FF666640
- editor.wordHighlightStrongBorder#FF6666
- editorBracketMatch.background#1A1333
- editorBracketMatch.border#FF0000
- editorCodeLens.foreground#9086B7
- editorCursor.background#110A26
- editorCursor.foreground#FF0000
- editorError.foreground#FF6666
- editorGroup.border#06040D
- editorGroup.dropBackground#1A133380
- editorGroupHeader.noTabsBackground#09041A
- editorGroupHeader.tabsBackground#09041A
- editorGroupHeader.tabsBorder#06040D
- editorGutter.addedBackground#00FF88
- editorGutter.background#110A26
- editorGutter.deletedBackground#FF6666
- editorGutter.modifiedBackground#FF0000
- editorHint.foreground#9086B7
- editorHoverWidget.background#09041A
- editorHoverWidget.border#FF0000
- editorIndentGuide.activeBackground#FF0000
- editorIndentGuide.background#1A1333
- editorInfo.foreground#00FFFF
- editorLineNumber.activeForeground#FF0000
- editorLineNumber.foreground#50447C
- editorLink.activeForeground#00FFFF
- editorOverviewRuler.addedForeground#00FF88
- editorOverviewRuler.border#06040D
- editorOverviewRuler.bracketMatchForeground#FF0000
- editorOverviewRuler.currentContentForeground#FF0000
- editorOverviewRuler.deletedForeground#FF6666
- editorOverviewRuler.errorForeground#FF6666
- editorOverviewRuler.findMatchForeground#FF000080
- editorOverviewRuler.incomingContentForeground#00FFFF
- editorOverviewRuler.infoForeground#00FFFF
- editorOverviewRuler.modifiedForeground#FF0000
- editorOverviewRuler.rangeHighlightForeground#1A133380
- editorOverviewRuler.selectionHighlightForeground#FF000080
- editorOverviewRuler.warningForeground#FFD700
- editorOverviewRuler.wordHighlightForeground#00FFFF80
- editorOverviewRuler.wordHighlightStrongForeground#FF666680
- editorRuler.foreground#1A1333
- editorSuggestWidget.background#09041A
- editorSuggestWidget.border#FF0000
- editorSuggestWidget.foreground#D6D1EF
- editorSuggestWidget.highlightForeground#00FFFF
- editorSuggestWidget.selectedBackground#1A1333
- editorWarning.foreground#FFD700
- editorWhitespace.foreground#50447C
- editorWidget.background#09041A
- editorWidget.border#FF0000
- errorForeground#FF6666
- focusBorder#FF0000
- foreground#D6D1EF
- icon.foreground#D6D1EF
- input.background#09041A
- input.border#FF0000
- input.foreground#D6D1EF
- input.placeholderForeground#9086B7
- inputOption.activeBackground#FF000030
- inputOption.activeBorder#00FFFF
- inputValidation.errorBackground#FF6666
- inputValidation.errorBorder#FF6666
- inputValidation.errorForeground#FFFFFF
- inputValidation.infoBackground#00FFFF
- inputValidation.infoBorder#00FFFF
- inputValidation.infoForeground#09041A
- inputValidation.warningBackground#FFD700
- inputValidation.warningBorder#FFD700
- inputValidation.warningForeground#09041A
- list.activeSelectionBackground#FF0000
- list.activeSelectionForeground#FFFFFF
- list.dropBackground#1A1333
- list.errorForeground#FF6666
- list.focusBackground#FF000030
- list.focusForeground#FFFFFF
- list.highlightForeground#00FFFF
- list.hoverBackground#1A1333
- list.hoverForeground#FFFFFF
- list.inactiveFocusBackground#1A1333
- list.inactiveSelectionBackground#1A1333
- list.inactiveSelectionForeground#D6D1EF
- list.invalidItemForeground#FF6666
- list.warningForeground#FFD700
- listFilterWidget.background#09041A
- listFilterWidget.noMatchesOutline#FF6666
- listFilterWidget.outline#FF0000
- menu.background#09041A
- menu.foreground#D6D1EF
- menu.selectionBackground#FF0000
- menu.selectionForeground#FFFFFF
- menu.separatorBackground#1A1333
- merge.border#06040D
- merge.currentContentBackground#FF000040
- merge.currentHeaderBackground#FF000080
- merge.incomingContentBackground#00FFFF40
- merge.incomingHeaderBackground#00FFFF80
- minimap.errorHighlight#FF6666
- minimap.findMatchHighlight#00FFFF80
- minimap.selectionHighlight#FF000080
- minimap.warningHighlight#FFD700
- panel.background#09041A
- panel.border#FF0000
- panelTitle.activeBorder#FF0000
- panelTitle.activeForeground#FFFFFF
- panelTitle.inactiveForeground#9086B7
- peekView.border#FF0000
- peekViewEditor.background#1A1333
- peekViewEditor.matchHighlightBackground#00FFFF80
- peekViewEditorGutter.background#1A1333
- peekViewResult.background#09041A
- peekViewResult.fileForeground#FFFFFF
- peekViewResult.lineForeground#9086B7
- peekViewResult.matchHighlightBackground#00FFFF80
- peekViewResult.selectionBackground#FF0000
- peekViewResult.selectionForeground#FFFFFF
- peekViewTitle.background#09041A
- peekViewTitleDescription.foreground#9086B7
- peekViewTitleLabel.foreground#FFFFFF
- pickerGroup.border#FF0000
- pickerGroup.foreground#00FFFF
- progressBar.background#00FFFF
- scrollbar.shadow#000000
- scrollbarSlider.activeBackground#FF000080
- scrollbarSlider.background#FF000040
- scrollbarSlider.hoverBackground#FF000060
- selection.background#FF000040
- sideBar.background#09041A
- sideBar.border#06040D
- sideBar.dropBackground#1A1333
- sideBar.foreground#D6D1EF
- sideBarSectionHeader.background#09041A
- sideBarSectionHeader.border#06040D
- sideBarSectionHeader.foreground#D6D1EF
- sideBarTitle.foreground#FFFFFF
- statusBar.background#06040D
- statusBar.border#06040D
- statusBar.debuggingBackground#FF6666
- statusBar.debuggingForeground#FFFFFF
- statusBar.foreground#D6D1EF
- statusBar.noFolderBackground#09041A
- statusBar.noFolderForeground#D6D1EF
- statusBarItem.activeBackground#FF000030
- statusBarItem.hoverBackground#1A1333
- statusBarItem.prominentBackground#06040D
- statusBarItem.prominentHoverBackground#1A1333
- tab.activeBackground#110A26
- tab.activeBorder#FF0000
- tab.activeBorderTop#FF0000
- tab.activeForeground#FFFFFF
- tab.border#06040D
- tab.inactiveBackground#09041A
- tab.inactiveForeground#9086B7
- tab.unfocusedActiveBorder#CC0000
- tab.unfocusedActiveBorderTop#CC0000
- tab.unfocusedActiveForeground#9086B7
- tab.unfocusedInactiveForeground#9086B7
- terminal.ansiBlack#06040D
- terminal.ansiBlue#00CCFF
- terminal.ansiBrightBlack#50447C
- terminal.ansiBrightBlue#44DDFF
- terminal.ansiBrightCyan#00FFFF
- terminal.ansiBrightGreen#00FF88
- terminal.ansiBrightMagenta#FF6BCB
- terminal.ansiBrightRed#FF4444
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#FFD700
- terminal.ansiCyan#00FFFF
- terminal.ansiGreen#00CC52
- terminal.ansiMagenta#FF6BCB
- terminal.ansiRed#FF0000
- terminal.ansiWhite#D6D1EF
- terminal.ansiYellow#FFD700
- terminal.background#09041A
- terminal.foreground#D6D1EF
- terminal.selectionBackground#FF000030
- terminalCursor.background#09041A
- terminalCursor.foreground#FF0000
- textBlockQuote.background#1A1333
- textBlockQuote.border#00FFFF
- textCodeBlock.background#09041A
- textLink.activeForeground#00FFFF
- textLink.foreground#FF0000
- textPreformat.foreground#00FFFF
- textSeparator.foreground#FF0000
- titleBar.activeBackground#06040D
- titleBar.activeForeground#D6D1EF
- titleBar.border#06040D
- titleBar.inactiveBackground#09041A
- titleBar.inactiveForeground#9086B7
- tree.indentGuidesStroke#FF000040
- walkThrough.embeddedEditorBackground#110A26
- widget.shadow#00000080
- window.activeBorder#FF0000
- window.inactiveBorder#CC0000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #8A2E2E | italic |
| keyword, storage.type, storage.modifier | #FF0000 | — |
| keyword.operator | #00FFFF | — |
| variable, string constant.other.placeholder | #D6D1EF | — |
| variable.other.property, meta.property-name, support.type.property-name | #00FFFF | — |
| entity.name.function, meta.function-call, support.function | #FF6BCB | bold |
| entity.name.class, entity.name.type.class, support.class, support.type | #FFD700 | — |
| string, string.quoted | #00FF88 | — |
| constant.numeric, constant.language, constant.character | #FF6666 | — |
| entity.name.tag, meta.tag | #FF0000 | — |
| entity.other.attribute-name | #00FFFF | — |
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#110A26
- activityBar.activeBorder#FFFFFF
- activityBar.background#09041A
- activityBar.border#06040D
- activityBar.dropBorder#E0E0FF
- activityBar.foreground#FFFFFF
- activityBar.inactiveForeground#9086B7
- activityBarBadge.background#FFFFFF
- activityBarBadge.foreground#09041A
- badge.background#FFFFFF
- badge.foreground#09041A
- button.background#FFFFFF
- button.foreground#09041A
- button.hoverBackground#E0E0FF
- debugToolBar.background#09041A
- debugToolBar.border#FFFFFF40
- descriptionForeground#9086B7
- diffEditor.insertedTextBackground#00FF8830
- diffEditor.removedTextBackground#FF007F30
- dropdown.background#1A1333
- dropdown.border#FFFFFF
- dropdown.foreground#D6D1EF
- dropdown.listBackground#09041A
- editor.background#110A26
- editor.findMatchBackground#FF007F60
- editor.findMatchHighlightBackground#FF007F30
- editor.findRangeHighlightBackground#1A1333
- editor.foreground#D6D1EF
- editor.hoverHighlightBackground#1A1333
- editor.inactiveSelectionBackground#FFFFFF20
- editor.lineHighlightBackground#1A133360
- editor.lineHighlightBorder#1A1333
- editor.selectionBackground#FFFFFF30
- editor.selectionForeground#FFFFFF
- editor.selectionHighlightBackground#FFFFFF20
- editor.selectionHighlightBorder#E0E0FF
- editor.wordHighlightBackground#E0E0FF30
- editor.wordHighlightBorder#E0E0FF
- editor.wordHighlightStrongBackground#FF007F30
- editor.wordHighlightStrongBorder#FF007F
- editorBracketMatch.background#1A1333
- editorBracketMatch.border#FFFFFF
- editorCodeLens.foreground#9086B7
- editorCursor.background#110A26
- editorCursor.foreground#FFFFFF
- editorError.foreground#FF007F
- editorGroup.border#06040D
- editorGroup.dropBackground#1A133380
- editorGroupHeader.noTabsBackground#09041A
- editorGroupHeader.tabsBackground#09041A
- editorGroupHeader.tabsBorder#06040D
- editorGutter.addedBackground#00FF88
- editorGutter.background#110A26
- editorGutter.deletedBackground#FF007F
- editorGutter.modifiedBackground#FFFFFF
- editorHint.foreground#9086B7
- editorHoverWidget.background#09041A
- editorHoverWidget.border#FFFFFF40
- editorIndentGuide.activeBackground#FFFFFF40
- editorIndentGuide.background#1A1333
- editorInfo.foreground#E0E0FF
- editorLineNumber.activeForeground#FFFFFF
- editorLineNumber.foreground#50447C
- editorLink.activeForeground#E0E0FF
- editorOverviewRuler.addedForeground#00FF88
- editorOverviewRuler.border#06040D
- editorOverviewRuler.bracketMatchForeground#FFFFFF
- editorOverviewRuler.currentContentForeground#FFFFFF
- editorOverviewRuler.deletedForeground#FF007F
- editorOverviewRuler.errorForeground#FF007F
- editorOverviewRuler.findMatchForeground#FF007F80
- editorOverviewRuler.incomingContentForeground#E0E0FF
- editorOverviewRuler.infoForeground#E0E0FF
- editorOverviewRuler.modifiedForeground#FFFFFF
- editorOverviewRuler.rangeHighlightForeground#1A133380
- editorOverviewRuler.selectionHighlightForeground#FFFFFF40
- editorOverviewRuler.warningForeground#FFD700
- editorOverviewRuler.wordHighlightForeground#E0E0FF80
- editorOverviewRuler.wordHighlightStrongForeground#FF007F80
- editorRuler.foreground#1A1333
- editorSuggestWidget.background#09041A
- editorSuggestWidget.border#FFFFFF40
- editorSuggestWidget.foreground#D6D1EF
- editorSuggestWidget.highlightForeground#FFFFFF
- editorSuggestWidget.selectedBackground#1A1333
- editorWarning.foreground#FFD700
- editorWhitespace.foreground#50447C
- editorWidget.background#09041A
- editorWidget.border#FFFFFF40
- errorForeground#FF007F
- focusBorder#FFFFFF
- foreground#D6D1EF
- icon.foreground#D6D1EF
- input.background#09041A
- input.border#FFFFFF
- input.foreground#D6D1EF
- input.placeholderForeground#9086B7
- inputOption.activeBackground#FFFFFF30
- inputOption.activeBorder#B8B8D0
- inputValidation.errorBackground#FF007F
- inputValidation.errorBorder#FF007F
- inputValidation.errorForeground#FFFFFF
- inputValidation.infoBackground#B8B8D0
- inputValidation.infoBorder#B8B8D0
- inputValidation.infoForeground#09041A
- inputValidation.warningBackground#FFD700
- inputValidation.warningBorder#FFD700
- inputValidation.warningForeground#09041A
- list.activeSelectionBackground#FFFFFF20
- list.activeSelectionForeground#FFFFFF
- list.dropBackground#1A1333
- list.errorForeground#FF007F
- list.focusBackground#FFFFFF30
- list.focusForeground#FFFFFF
- list.highlightForeground#E0E0FF
- list.hoverBackground#1A1333
- list.hoverForeground#FFFFFF
- list.inactiveFocusBackground#1A1333
- list.inactiveSelectionBackground#1A1333
- list.inactiveSelectionForeground#D6D1EF
- list.invalidItemForeground#FF007F
- list.warningForeground#FFD700
- listFilterWidget.background#09041A
- listFilterWidget.noMatchesOutline#FF007F
- listFilterWidget.outline#FFFFFF
- menu.background#09041A
- menu.foreground#D6D1EF
- menu.selectionBackground#FFFFFF20
- menu.selectionForeground#FFFFFF
- menu.separatorBackground#1A1333
- merge.border#06040D
- merge.currentContentBackground#FFFFFF20
- merge.currentHeaderBackground#FFFFFF40
- merge.incomingContentBackground#E0E0FF20
- merge.incomingHeaderBackground#E0E0FF40
- minimap.errorHighlight#FF007F
- minimap.findMatchHighlight#E0E0FF80
- minimap.selectionHighlight#FFFFFF40
- minimap.warningHighlight#FFD700
- panel.background#09041A
- panel.border#FFFFFF30
- panelTitle.activeBorder#FFFFFF
- panelTitle.activeForeground#FFFFFF
- panelTitle.inactiveForeground#9086B7
- peekView.border#FFFFFF40
- peekViewEditor.background#1A1333
- peekViewEditor.matchHighlightBackground#E0E0FF60
- peekViewEditorGutter.background#1A1333
- peekViewResult.background#09041A
- peekViewResult.fileForeground#FFFFFF
- peekViewResult.lineForeground#9086B7
- peekViewResult.matchHighlightBackground#E0E0FF60
- peekViewResult.selectionBackground#FFFFFF20
- peekViewResult.selectionForeground#FFFFFF
- peekViewTitle.background#09041A
- peekViewTitleDescription.foreground#9086B7
- peekViewTitleLabel.foreground#FFFFFF
- pickerGroup.border#FFFFFF30
- pickerGroup.foreground#E0E0FF
- progressBar.background#E0E0FF
- scrollbar.shadow#000000
- scrollbarSlider.activeBackground#FFFFFF50
- scrollbarSlider.background#FFFFFF20
- scrollbarSlider.hoverBackground#FFFFFF30
- selection.background#FFFFFF40
- sideBar.background#09041A
- sideBar.border#06040D
- sideBar.dropBackground#1A1333
- sideBar.foreground#D6D1EF
- sideBarSectionHeader.background#09041A
- sideBarSectionHeader.border#06040D
- sideBarSectionHeader.foreground#D6D1EF
- sideBarTitle.foreground#FFFFFF
- statusBar.background#06040D
- statusBar.border#06040D
- statusBar.debuggingBackground#FF007F
- statusBar.debuggingForeground#FFFFFF
- statusBar.foreground#D6D1EF
- statusBar.noFolderBackground#09041A
- statusBar.noFolderForeground#D6D1EF
- statusBarItem.activeBackground#FFFFFF30
- statusBarItem.hoverBackground#1A1333
- statusBarItem.prominentBackground#06040D
- statusBarItem.prominentHoverBackground#1A1333
- tab.activeBackground#110A26
- tab.activeBorder#FFFFFF
- tab.activeBorderTop#FFFFFF
- tab.activeForeground#FFFFFF
- tab.border#06040D
- tab.inactiveBackground#09041A
- tab.inactiveForeground#9086B7
- tab.unfocusedActiveBorder#B8B8D0
- tab.unfocusedActiveBorderTop#B8B8D0
- tab.unfocusedActiveForeground#9086B7
- tab.unfocusedInactiveForeground#9086B7
- terminal.ansiBlack#06040D
- terminal.ansiBlue#B8B8D0
- terminal.ansiBrightBlack#50447C
- terminal.ansiBrightBlue#E0E0FF
- terminal.ansiBrightCyan#72FFFF
- terminal.ansiBrightGreen#00FF88
- terminal.ansiBrightMagenta#E01EE0
- terminal.ansiBrightRed#FF007F
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#FFD700
- terminal.ansiCyan#B8B8D0
- terminal.ansiGreen#00CC52
- terminal.ansiMagenta#E01EE0
- terminal.ansiRed#FF2A4D
- terminal.ansiWhite#FFFFFF
- terminal.ansiYellow#FFD700
- terminal.background#09041A
- terminal.foreground#D6D1EF
- terminal.selectionBackground#FFFFFF30
- terminalCursor.background#09041A
- terminalCursor.foreground#FFFFFF
- textBlockQuote.background#1A1333
- textBlockQuote.border#B8B8D0
- textCodeBlock.background#09041A
- textLink.activeForeground#E0E0FF
- textLink.foreground#FFFFFF
- textPreformat.foreground#E0E0FF
- textSeparator.foreground#FFFFFF
- titleBar.activeBackground#06040D
- titleBar.activeForeground#D6D1EF
- titleBar.border#06040D
- titleBar.inactiveBackground#09041A
- titleBar.inactiveForeground#9086B7
- tree.indentGuidesStroke#FFFFFF20
- walkThrough.embeddedEditorBackground#110A26
- widget.shadow#00000080
- window.activeBorder#FFFFFF
- window.inactiveBorder#B8B8D0
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #5A5A7A | italic |
| keyword, storage.type, storage.modifier | #FFFFFF | — |
| keyword.operator | #FF007F | — |
| variable, string constant.other.placeholder | #D6D1EF | — |
| variable.other.property, meta.property-name, support.type.property-name | #B8B8D0 | — |
| entity.name.function, meta.function-call, support.function | #E01EE0 | bold |
| entity.name.class, entity.name.type.class, support.class, support.type | #FFD700 | — |
| string, string.quoted | #00FF88 | — |
| constant.numeric, constant.language, constant.character | #FF007F | — |
| entity.name.tag, meta.tag | #FFFFFF | — |
| entity.other.attribute-name | #B8B8D0 | — |
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#110A26
- activityBar.activeBorder#F5E200
- activityBar.background#09041A
- activityBar.border#06040D
- activityBar.dropBorder#A78BFA
- activityBar.foreground#FFFFFF
- activityBar.inactiveForeground#9086B7
- activityBarBadge.background#F5E200
- activityBarBadge.foreground#09041A
- badge.background#F5E200
- badge.foreground#09041A
- button.background#F5E200
- button.foreground#09041A
- button.hoverBackground#FFF044
- debugToolBar.background#09041A
- debugToolBar.border#F5E200
- descriptionForeground#9086B7
- diffEditor.insertedTextBackground#00FF8830
- diffEditor.removedTextBackground#FF336630
- dropdown.background#1A1333
- dropdown.border#F5E200
- dropdown.foreground#D6D1EF
- dropdown.listBackground#09041A
- editor.background#110A26
- editor.findMatchBackground#FF336680
- editor.findMatchHighlightBackground#FF336640
- editor.findRangeHighlightBackground#1A1333
- editor.foreground#D6D1EF
- editor.hoverHighlightBackground#1A1333
- editor.inactiveSelectionBackground#F5E20020
- editor.lineHighlightBackground#1A133360
- editor.lineHighlightBorder#1A1333
- editor.selectionBackground#F5E20030
- editor.selectionForeground#FFFFFF
- editor.selectionHighlightBackground#F5E20020
- editor.selectionHighlightBorder#A78BFA
- editor.wordHighlightBackground#A78BFA40
- editor.wordHighlightBorder#A78BFA
- editor.wordHighlightStrongBackground#FF336640
- editor.wordHighlightStrongBorder#FF3366
- editorBracketMatch.background#1A1333
- editorBracketMatch.border#F5E200
- editorCodeLens.foreground#9086B7
- editorCursor.background#110A26
- editorCursor.foreground#F5E200
- editorError.foreground#FF3366
- editorGroup.border#06040D
- editorGroup.dropBackground#1A133380
- editorGroupHeader.noTabsBackground#09041A
- editorGroupHeader.tabsBackground#09041A
- editorGroupHeader.tabsBorder#06040D
- editorGutter.addedBackground#00FF88
- editorGutter.background#110A26
- editorGutter.deletedBackground#FF3366
- editorGutter.modifiedBackground#F5E200
- editorHint.foreground#9086B7
- editorHoverWidget.background#09041A
- editorHoverWidget.border#F5E200
- editorIndentGuide.activeBackground#F5E200
- editorIndentGuide.background#1A1333
- editorInfo.foreground#A78BFA
- editorLineNumber.activeForeground#F5E200
- editorLineNumber.foreground#50447C
- editorLink.activeForeground#A78BFA
- editorOverviewRuler.addedForeground#00FF88
- editorOverviewRuler.border#06040D
- editorOverviewRuler.bracketMatchForeground#F5E200
- editorOverviewRuler.currentContentForeground#F5E200
- editorOverviewRuler.deletedForeground#FF3366
- editorOverviewRuler.errorForeground#FF3366
- editorOverviewRuler.findMatchForeground#FF336680
- editorOverviewRuler.incomingContentForeground#A78BFA
- editorOverviewRuler.infoForeground#A78BFA
- editorOverviewRuler.modifiedForeground#F5E200
- editorOverviewRuler.rangeHighlightForeground#1A133380
- editorOverviewRuler.selectionHighlightForeground#F5E20080
- editorOverviewRuler.warningForeground#FF8C00
- editorOverviewRuler.wordHighlightForeground#A78BFA80
- editorOverviewRuler.wordHighlightStrongForeground#FF336680
- editorRuler.foreground#1A1333
- editorSuggestWidget.background#09041A
- editorSuggestWidget.border#F5E200
- editorSuggestWidget.foreground#D6D1EF
- editorSuggestWidget.highlightForeground#A78BFA
- editorSuggestWidget.selectedBackground#1A1333
- editorWarning.foreground#FF8C00
- editorWhitespace.foreground#50447C
- editorWidget.background#09041A
- editorWidget.border#F5E200
- errorForeground#FF3366
- focusBorder#F5E200
- foreground#D6D1EF
- icon.foreground#D6D1EF
- input.background#09041A
- input.border#F5E200
- input.foreground#D6D1EF
- input.placeholderForeground#9086B7
- inputOption.activeBackground#F5E20030
- inputOption.activeBorder#A78BFA
- inputValidation.errorBackground#FF3366
- inputValidation.errorBorder#FF3366
- inputValidation.errorForeground#FFFFFF
- inputValidation.infoBackground#A78BFA
- inputValidation.infoBorder#A78BFA
- inputValidation.infoForeground#FFFFFF
- inputValidation.warningBackground#FF8C00
- inputValidation.warningBorder#FF8C00
- inputValidation.warningForeground#09041A
- list.activeSelectionBackground#F5E200
- list.activeSelectionForeground#09041A
- list.dropBackground#1A1333
- list.errorForeground#FF3366
- list.focusBackground#F5E20030
- list.focusForeground#FFFFFF
- list.highlightForeground#A78BFA
- list.hoverBackground#1A1333
- list.hoverForeground#FFFFFF
- list.inactiveFocusBackground#1A1333
- list.inactiveSelectionBackground#1A1333
- list.inactiveSelectionForeground#D6D1EF
- list.invalidItemForeground#FF3366
- list.warningForeground#FF8C00
- listFilterWidget.background#09041A
- listFilterWidget.noMatchesOutline#FF3366
- listFilterWidget.outline#F5E200
- menu.background#09041A
- menu.foreground#D6D1EF
- menu.selectionBackground#F5E200
- menu.selectionForeground#09041A
- menu.separatorBackground#1A1333
- merge.border#06040D
- merge.currentContentBackground#F5E20040
- merge.currentHeaderBackground#F5E20080
- merge.incomingContentBackground#A78BFA40
- merge.incomingHeaderBackground#A78BFA80
- minimap.errorHighlight#FF3366
- minimap.findMatchHighlight#A78BFA80
- minimap.selectionHighlight#F5E20080
- minimap.warningHighlight#FF8C00
- panel.background#09041A
- panel.border#F5E200
- panelTitle.activeBorder#F5E200
- panelTitle.activeForeground#FFFFFF
- panelTitle.inactiveForeground#9086B7
- peekView.border#F5E200
- peekViewEditor.background#1A1333
- peekViewEditor.matchHighlightBackground#A78BFA80
- peekViewEditorGutter.background#1A1333
- peekViewResult.background#09041A
- peekViewResult.fileForeground#FFFFFF
- peekViewResult.lineForeground#9086B7
- peekViewResult.matchHighlightBackground#A78BFA80
- peekViewResult.selectionBackground#F5E200
- peekViewResult.selectionForeground#09041A
- peekViewTitle.background#09041A
- peekViewTitleDescription.foreground#9086B7
- peekViewTitleLabel.foreground#FFFFFF
- pickerGroup.border#F5E200
- pickerGroup.foreground#A78BFA
- progressBar.background#A78BFA
- scrollbar.shadow#000000
- scrollbarSlider.activeBackground#F5E20080
- scrollbarSlider.background#F5E20040
- scrollbarSlider.hoverBackground#F5E20060
- selection.background#F5E20040
- sideBar.background#09041A
- sideBar.border#06040D
- sideBar.dropBackground#1A1333
- sideBar.foreground#D6D1EF
- sideBarSectionHeader.background#09041A
- sideBarSectionHeader.border#06040D
- sideBarSectionHeader.foreground#D6D1EF
- sideBarTitle.foreground#FFFFFF
- statusBar.background#06040D
- statusBar.border#06040D
- statusBar.debuggingBackground#FF3366
- statusBar.debuggingForeground#FFFFFF
- statusBar.foreground#D6D1EF
- statusBar.noFolderBackground#09041A
- statusBar.noFolderForeground#D6D1EF
- statusBarItem.activeBackground#F5E20030
- statusBarItem.hoverBackground#1A1333
- statusBarItem.prominentBackground#06040D
- statusBarItem.prominentHoverBackground#1A1333
- tab.activeBackground#110A26
- tab.activeBorder#F5E200
- tab.activeBorderTop#F5E200
- tab.activeForeground#FFFFFF
- tab.border#06040D
- tab.inactiveBackground#09041A
- tab.inactiveForeground#9086B7
- tab.unfocusedActiveBorder#B8A900
- tab.unfocusedActiveBorderTop#B8A900
- tab.unfocusedActiveForeground#9086B7
- tab.unfocusedInactiveForeground#9086B7
- terminal.ansiBlack#06040D
- terminal.ansiBlue#A78BFA
- terminal.ansiBrightBlack#50447C
- terminal.ansiBrightBlue#C4A8FF
- terminal.ansiBrightCyan#72FFFF
- terminal.ansiBrightGreen#00FF88
- terminal.ansiBrightMagenta#FF6BCB
- terminal.ansiBrightRed#FF3366
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#FFF044
- terminal.ansiCyan#72FFFF
- terminal.ansiGreen#00CC52
- terminal.ansiMagenta#FF6BCB
- terminal.ansiRed#FF2A4D
- terminal.ansiWhite#D6D1EF
- terminal.ansiYellow#F5E200
- terminal.background#09041A
- terminal.foreground#D6D1EF
- terminal.selectionBackground#F5E20030
- terminalCursor.background#09041A
- terminalCursor.foreground#F5E200
- textBlockQuote.background#1A1333
- textBlockQuote.border#A78BFA
- textCodeBlock.background#09041A
- textLink.activeForeground#A78BFA
- textLink.foreground#F5E200
- textPreformat.foreground#A78BFA
- textSeparator.foreground#F5E200
- titleBar.activeBackground#06040D
- titleBar.activeForeground#D6D1EF
- titleBar.border#06040D
- titleBar.inactiveBackground#09041A
- titleBar.inactiveForeground#9086B7
- tree.indentGuidesStroke#F5E20040
- walkThrough.embeddedEditorBackground#110A26
- widget.shadow#00000080
- window.activeBorder#F5E200
- window.inactiveBorder#B8A900
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #8A7A2E | italic |
| keyword, storage.type, storage.modifier | #F5E200 | — |
| keyword.operator | #FF3366 | — |
| variable, string constant.other.placeholder | #D6D1EF | — |
| variable.other.property, meta.property-name, support.type.property-name | #A78BFA | — |
| entity.name.function, meta.function-call, support.function | #A78BFA | bold |
| entity.name.class, entity.name.type.class, support.class, support.type | #FF8C00 | — |
| string, string.quoted | #00FF88 | — |
| constant.numeric, constant.language, constant.character | #FF3366 | — |
| entity.name.tag, meta.tag | #F5E200 | — |
| entity.other.attribute-name | #A78BFA | — |
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#0A0E22
- activityBar.activeBorder#A6CCFF
- activityBar.background#060818
- activityBar.border#020410
- activityBar.dropBorder#C084FC
- activityBar.foreground#E8F0FF
- activityBar.inactiveForeground#6B7FA0
- activityBarBadge.background#7B8FFF
- activityBarBadge.foreground#FFFFFF
- badge.background#7B8FFF
- badge.foreground#FFFFFF
- button.background#7B8FFF
- button.foreground#FFFFFF
- button.hoverBackground#9AABFF
- debugToolBar.background#060818
- debugToolBar.border#2A3555
- descriptionForeground#6B7FA0
- diffEditor.insertedTextBackground#7BFFCF20
- diffEditor.removedTextBackground#FF6B8A20
- dropdown.background#0A0E22
- dropdown.border#2A3555
- dropdown.foreground#C8D6E8
- dropdown.listBackground#060818
- editor.background#0A0E22
- editor.findMatchBackground#C084FC50
- editor.findMatchHighlightBackground#C084FC25
- editor.findRangeHighlightBackground#111630
- editor.foreground#C8D6E8
- editor.hoverHighlightBackground#111630
- editor.inactiveSelectionBackground#A6CCFF20
- editor.lineHighlightBackground#11163040
- editor.lineHighlightBorder#11163080
- editor.selectionBackground#A6CCFF30
- editor.selectionForeground#E8F0FF
- editor.selectionHighlightBackground#A6CCFF20
- editor.selectionHighlightBorder#A6CCFF40
- editor.wordHighlightBackground#C084FC25
- editor.wordHighlightBorder#C084FC50
- editor.wordHighlightStrongBackground#FF6B8A25
- editor.wordHighlightStrongBorder#FF6B8A50
- editorBracketMatch.background#111630
- editorBracketMatch.border#A6CCFF60
- editorCodeLens.foreground#6B7FA0
- editorCursor.background#0A0E22
- editorCursor.foreground#E8F0FF
- editorError.foreground#FF6B8A
- editorGroup.border#020410
- editorGroup.dropBackground#11163080
- editorGroupHeader.noTabsBackground#060818
- editorGroupHeader.tabsBackground#060818
- editorGroupHeader.tabsBorder#020410
- editorGutter.addedBackground#7BFFCF
- editorGutter.background#0A0E22
- editorGutter.deletedBackground#FF6B8A
- editorGutter.modifiedBackground#7B8FFF
- editorHint.foreground#6B7FA0
- editorHoverWidget.background#060818
- editorHoverWidget.border#2A3555
- editorIndentGuide.activeBackground#2A3555
- editorIndentGuide.background#111630
- editorInfo.foreground#A6CCFF
- editorLineNumber.activeForeground#A6CCFF
- editorLineNumber.foreground#2A3555
- editorLink.activeForeground#C084FC
- editorOverviewRuler.addedForeground#7BFFCF
- editorOverviewRuler.border#020410
- editorOverviewRuler.bracketMatchForeground#A6CCFF60
- editorOverviewRuler.currentContentForeground#7B8FFF
- editorOverviewRuler.deletedForeground#FF6B8A
- editorOverviewRuler.errorForeground#FF6B8A
- editorOverviewRuler.findMatchForeground#C084FC60
- editorOverviewRuler.incomingContentForeground#C084FC
- editorOverviewRuler.infoForeground#A6CCFF
- editorOverviewRuler.modifiedForeground#7B8FFF
- editorOverviewRuler.rangeHighlightForeground#11163080
- editorOverviewRuler.selectionHighlightForeground#A6CCFF40
- editorOverviewRuler.warningForeground#FFCE54
- editorOverviewRuler.wordHighlightForeground#C084FC40
- editorOverviewRuler.wordHighlightStrongForeground#FF6B8A40
- editorRuler.foreground#111630
- editorSuggestWidget.background#060818
- editorSuggestWidget.border#2A3555
- editorSuggestWidget.foreground#C8D6E8
- editorSuggestWidget.highlightForeground#C084FC
- editorSuggestWidget.selectedBackground#111630
- editorWarning.foreground#FFCE54
- editorWhitespace.foreground#2A3555
- editorWidget.background#060818
- editorWidget.border#2A3555
- errorForeground#FF6B8A
- focusBorder#A6CCFF
- foreground#C8D6E8
- icon.foreground#C8D6E8
- input.background#060818
- input.border#2A3555
- input.foreground#C8D6E8
- input.placeholderForeground#6B7FA0
- inputOption.activeBackground#A6CCFF30
- inputOption.activeBorder#A6CCFF
- inputValidation.errorBackground#FF6B8A
- inputValidation.errorBorder#FF6B8A
- inputValidation.errorForeground#FFFFFF
- inputValidation.infoBackground#7B8FFF
- inputValidation.infoBorder#7B8FFF
- inputValidation.infoForeground#FFFFFF
- inputValidation.warningBackground#FFCE54
- inputValidation.warningBorder#FFCE54
- inputValidation.warningForeground#060818
- list.activeSelectionBackground#7B8FFF40
- list.activeSelectionForeground#E8F0FF
- list.dropBackground#0A0E22
- list.errorForeground#FF6B8A
- list.focusBackground#A6CCFF30
- list.focusForeground#E8F0FF
- list.highlightForeground#C084FC
- list.hoverBackground#111630
- list.hoverForeground#E8F0FF
- list.inactiveFocusBackground#111630
- list.inactiveSelectionBackground#111630
- list.inactiveSelectionForeground#C8D6E8
- list.invalidItemForeground#FF6B8A
- list.warningForeground#FFCE54
- listFilterWidget.background#060818
- listFilterWidget.noMatchesOutline#FF6B8A
- listFilterWidget.outline#A6CCFF
- menu.background#060818
- menu.foreground#C8D6E8
- menu.selectionBackground#7B8FFF30
- menu.selectionForeground#E8F0FF
- menu.separatorBackground#111630
- merge.border#020410
- merge.currentContentBackground#7B8FFF20
- merge.currentHeaderBackground#7B8FFF40
- merge.incomingContentBackground#C084FC20
- merge.incomingHeaderBackground#C084FC40
- minimap.errorHighlight#FF6B8A
- minimap.findMatchHighlight#C084FC60
- minimap.selectionHighlight#A6CCFF40
- minimap.warningHighlight#FFCE54
- panel.background#060818
- panel.border#2A3555
- panelTitle.activeBorder#A6CCFF
- panelTitle.activeForeground#E8F0FF
- panelTitle.inactiveForeground#6B7FA0
- peekView.border#7B8FFF
- peekViewEditor.background#0A0E22
- peekViewEditor.matchHighlightBackground#C084FC40
- peekViewEditorGutter.background#0A0E22
- peekViewResult.background#060818
- peekViewResult.fileForeground#E8F0FF
- peekViewResult.lineForeground#6B7FA0
- peekViewResult.matchHighlightBackground#C084FC40
- peekViewResult.selectionBackground#7B8FFF30
- peekViewResult.selectionForeground#E8F0FF
- peekViewTitle.background#060818
- peekViewTitleDescription.foreground#6B7FA0
- peekViewTitleLabel.foreground#E8F0FF
- pickerGroup.border#2A3555
- pickerGroup.foreground#C084FC
- progressBar.background#C084FC
- scrollbar.shadow#000000
- scrollbarSlider.activeBackground#A6CCFF40
- scrollbarSlider.background#A6CCFF18
- scrollbarSlider.hoverBackground#A6CCFF28
- selection.background#A6CCFF40
- sideBar.background#060818
- sideBar.border#020410
- sideBar.dropBackground#111630
- sideBar.foreground#C8D6E8
- sideBarSectionHeader.background#060818
- sideBarSectionHeader.border#020410
- sideBarSectionHeader.foreground#C8D6E8
- sideBarTitle.foreground#E8F0FF
- statusBar.background#020410
- statusBar.border#020410
- statusBar.debuggingBackground#C084FC
- statusBar.debuggingForeground#FFFFFF
- statusBar.foreground#C8D6E8
- statusBar.noFolderBackground#060818
- statusBar.noFolderForeground#C8D6E8
- statusBarItem.activeBackground#A6CCFF30
- statusBarItem.hoverBackground#111630
- statusBarItem.prominentBackground#020410
- statusBarItem.prominentHoverBackground#111630
- tab.activeBackground#0A0E22
- tab.activeBorder#A6CCFF
- tab.activeBorderTop#7B8FFF
- tab.activeForeground#E8F0FF
- tab.border#020410
- tab.inactiveBackground#060818
- tab.inactiveForeground#6B7FA0
- tab.unfocusedActiveBorder#2A3555
- tab.unfocusedActiveBorderTop#2A3555
- tab.unfocusedActiveForeground#6B7FA0
- tab.unfocusedInactiveForeground#6B7FA0
- terminal.ansiBlack#020410
- terminal.ansiBlue#7B8FFF
- terminal.ansiBrightBlack#4A5A7A
- terminal.ansiBrightBlue#A6CCFF
- terminal.ansiBrightCyan#8DD8FF
- terminal.ansiBrightGreen#7BFFCF
- terminal.ansiBrightMagenta#C084FC
- terminal.ansiBrightRed#FF6B8A
- terminal.ansiBrightWhite#E8F0FF
- terminal.ansiBrightYellow#FFCE54
- terminal.ansiCyan#A6CCFF
- terminal.ansiGreen#5BCFA0
- terminal.ansiMagenta#C084FC
- terminal.ansiRed#FF6B8A
- terminal.ansiWhite#C8D6E8
- terminal.ansiYellow#FFCE54
- terminal.background#060818
- terminal.foreground#C8D6E8
- terminal.selectionBackground#A6CCFF30
- terminalCursor.background#0A0E22
- terminalCursor.foreground#E8F0FF
- textBlockQuote.background#0A0E22
- textBlockQuote.border#7B8FFF
- textCodeBlock.background#060818
- textLink.activeForeground#C084FC
- textLink.foreground#A6CCFF
- textPreformat.foreground#C084FC
- textSeparator.foreground#2A3555
- titleBar.activeBackground#020410
- titleBar.activeForeground#C8D6E8
- titleBar.border#020410
- titleBar.inactiveBackground#060818
- titleBar.inactiveForeground#6B7FA0
- tree.indentGuidesStroke#2A355540
- walkThrough.embeddedEditorBackground#0A0E22
- widget.shadow#00000090
- window.activeBorder#7B8FFF
- window.inactiveBorder#2A3555
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #4A5A7A | italic |
| keyword, storage.type, storage.modifier | #A6CCFF | — |
| keyword.operator | #FF6B8A | — |
| variable, string constant.other.placeholder | #C8D6E8 | — |
| variable.other.property, meta.property-name, support.type.property-name | #8DD8FF | — |
| entity.name.function, meta.function-call, support.function | #C084FC | bold |
| entity.name.class, entity.name.type.class, support.class, support.type | #FFD194 | — |
| string, string.quoted | #7BFFCF | — |
| constant.numeric, constant.language, constant.character | #FF6B8A | — |
| entity.name.tag, meta.tag | #7B8FFF | — |
| entity.other.attribute-name | #C084FC | — |