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#612BFF
- activityBar.background#09041A
- activityBar.border#06040D
- activityBar.dropBorder#00F0FF
- activityBar.foreground#FFFFFF
- activityBar.inactiveForeground#9086B7
- activityBarBadge.background#612BFF
- activityBarBadge.foreground#FFFFFF
- badge.background#612BFF
- badge.foreground#FFFFFF
- button.background#612BFF
- button.foreground#FFFFFF
- button.hoverBackground#7833FF
- debugToolBar.background#09041A
- debugToolBar.border#612BFF
- descriptionForeground#9086B7
- diffEditor.insertedTextBackground#00FF8830
- diffEditor.removedTextBackground#FF007F30
- dropdown.background#1A1333
- dropdown.border#612BFF
- dropdown.foreground#D6D1EF
- dropdown.listBackground#09041A
- editor.background#110A26
- editor.findMatchBackground#FF007F80
- editor.findMatchHighlightBackground#FF007F40
- editor.findRangeHighlightBackground#1A1333
- editor.foreground#D6D1EF
- editor.hoverHighlightBackground#1A1333
- editor.inactiveSelectionBackground#612BFF40
- editor.lineHighlightBackground#1A133360
- editor.lineHighlightBorder#1A1333
- editor.selectionBackground#612BFF60
- editor.selectionForeground#FFFFFF
- editor.selectionHighlightBackground#612BFF40
- editor.selectionHighlightBorder#00F0FF
- editor.wordHighlightBackground#00F0FF40
- editor.wordHighlightBorder#00F0FF
- editor.wordHighlightStrongBackground#FF007F40
- editor.wordHighlightStrongBorder#FF007F
- editorBracketMatch.background#1A1333
- editorBracketMatch.border#00F0FF
- editorCodeLens.foreground#9086B7
- editorCursor.background#110A26
- editorCursor.foreground#00F0FF
- 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#612BFF
- editorHint.foreground#9086B7
- editorHoverWidget.background#09041A
- editorHoverWidget.border#612BFF
- editorIndentGuide.activeBackground#612BFF
- editorIndentGuide.background#1A1333
- editorInfo.foreground#00F0FF
- editorLineNumber.activeForeground#00F0FF
- editorLineNumber.foreground#50447C
- editorLink.activeForeground#00F0FF
- editorOverviewRuler.addedForeground#00FF88
- editorOverviewRuler.border#06040D
- editorOverviewRuler.bracketMatchForeground#00F0FF
- editorOverviewRuler.currentContentForeground#612BFF
- editorOverviewRuler.deletedForeground#FF007F
- editorOverviewRuler.errorForeground#FF007F
- editorOverviewRuler.findMatchForeground#FF007F80
- editorOverviewRuler.incomingContentForeground#00F0FF
- editorOverviewRuler.infoForeground#00F0FF
- editorOverviewRuler.modifiedForeground#612BFF
- editorOverviewRuler.rangeHighlightForeground#1A133380
- editorOverviewRuler.selectionHighlightForeground#612BFF80
- editorOverviewRuler.warningForeground#FCE205
- editorOverviewRuler.wordHighlightForeground#00F0FF80
- editorOverviewRuler.wordHighlightStrongForeground#FF007F80
- editorRuler.foreground#1A1333
- editorSuggestWidget.background#09041A
- editorSuggestWidget.border#612BFF
- editorSuggestWidget.foreground#D6D1EF
- editorSuggestWidget.highlightForeground#00F0FF
- editorSuggestWidget.selectedBackground#1A1333
- editorWarning.foreground#FCE205
- editorWhitespace.foreground#50447C
- editorWidget.background#09041A
- editorWidget.border#612BFF
- errorForeground#FF007F
- focusBorder#612BFF
- foreground#D6D1EF
- icon.foreground#D6D1EF
- input.background#09041A
- input.border#612BFF
- input.foreground#D6D1EF
- input.placeholderForeground#9086B7
- inputOption.activeBackground#612BFF80
- inputOption.activeBorder#00F0FF
- inputValidation.errorBackground#FF007F
- inputValidation.errorBorder#FF007F
- inputValidation.errorForeground#FFFFFF
- inputValidation.infoBackground#00F0FF
- inputValidation.infoBorder#00F0FF
- inputValidation.infoForeground#09041A
- inputValidation.warningBackground#FCE205
- inputValidation.warningBorder#FCE205
- inputValidation.warningForeground#09041A
- list.activeSelectionBackground#612BFF
- list.activeSelectionForeground#FFFFFF
- list.dropBackground#1A1333
- list.errorForeground#FF007F
- list.focusBackground#612BFF80
- list.focusForeground#FFFFFF
- list.highlightForeground#00F0FF
- list.hoverBackground#1A1333
- list.hoverForeground#FFFFFF
- list.inactiveFocusBackground#1A1333
- list.inactiveSelectionBackground#1A1333
- list.inactiveSelectionForeground#D6D1EF
- list.invalidItemForeground#FF007F
- list.warningForeground#FCE205
- listFilterWidget.background#09041A
- listFilterWidget.noMatchesOutline#FF007F
- listFilterWidget.outline#612BFF
- menu.background#09041A
- menu.foreground#D6D1EF
- menu.selectionBackground#612BFF
- menu.selectionForeground#FFFFFF
- menu.separatorBackground#1A1333
- merge.border#06040D
- merge.currentContentBackground#612BFF40
- merge.currentHeaderBackground#612BFF80
- merge.incomingContentBackground#00F0FF40
- merge.incomingHeaderBackground#00F0FF80
- minimap.errorHighlight#FF007F
- minimap.findMatchHighlight#00F0FF80
- minimap.selectionHighlight#612BFF80
- minimap.warningHighlight#FCE205
- panel.background#09041A
- panel.border#612BFF
- panelTitle.activeBorder#612BFF
- panelTitle.activeForeground#FFFFFF
- panelTitle.inactiveForeground#9086B7
- peekView.border#612BFF
- peekViewEditor.background#1A1333
- peekViewEditor.matchHighlightBackground#00F0FF80
- peekViewEditorGutter.background#1A1333
- peekViewResult.background#09041A
- peekViewResult.fileForeground#FFFFFF
- peekViewResult.lineForeground#9086B7
- peekViewResult.matchHighlightBackground#00F0FF80
- peekViewResult.selectionBackground#612BFF
- peekViewResult.selectionForeground#FFFFFF
- peekViewTitle.background#09041A
- peekViewTitleDescription.foreground#9086B7
- peekViewTitleLabel.foreground#FFFFFF
- pickerGroup.border#612BFF
- pickerGroup.foreground#00F0FF
- progressBar.background#00F0FF
- scrollbar.shadow#000000
- scrollbarSlider.activeBackground#612BFF80
- scrollbarSlider.background#612BFF40
- scrollbarSlider.hoverBackground#612BFF60
- selection.background#612BFF80
- 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#612BFF80
- statusBarItem.hoverBackground#1A1333
- statusBarItem.prominentBackground#06040D
- statusBarItem.prominentHoverBackground#1A1333
- tab.activeBackground#110A26
- tab.activeBorder#612BFF
- tab.activeBorderTop#612BFF
- tab.activeForeground#FFFFFF
- tab.border#06040D
- tab.inactiveBackground#09041A
- tab.inactiveForeground#9086B7
- tab.unfocusedActiveBorder#3F1BF6
- tab.unfocusedActiveBorderTop#3F1BF6
- tab.unfocusedActiveForeground#9086B7
- tab.unfocusedInactiveForeground#9086B7
- terminal.ansiBlack#06040D
- terminal.ansiBlue#612BFF
- terminal.ansiBrightBlack#50447C
- terminal.ansiBrightBlue#7833FF
- terminal.ansiBrightCyan#00FFFF
- terminal.ansiBrightGreen#00FF88
- terminal.ansiBrightMagenta#FF4DFF
- terminal.ansiBrightRed#FF007F
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#FCE205
- terminal.ansiCyan#00F0FF
- terminal.ansiGreen#00CC52
- terminal.ansiMagenta#E01EE0
- terminal.ansiRed#FF2A4D
- terminal.ansiWhite#D6D1EF
- terminal.ansiYellow#FCE205
- terminal.background#09041A
- terminal.foreground#D6D1EF
- terminal.selectionBackground#612BFF60
- terminalCursor.background#09041A
- terminalCursor.foreground#00F0FF
- textBlockQuote.background#1A1333
- textBlockQuote.border#00F0FF
- textCodeBlock.background#09041A
- textLink.activeForeground#00F0FF
- textLink.foreground#612BFF
- textPreformat.foreground#00F0FF
- textSeparator.foreground#612BFF
- titleBar.activeBackground#06040D
- titleBar.activeForeground#D6D1EF
- titleBar.border#06040D
- titleBar.inactiveBackground#09041A
- titleBar.inactiveForeground#9086B7
- tree.indentGuidesStroke#612BFF40
- walkThrough.embeddedEditorBackground#110A26
- widget.shadow#00000080
- window.activeBorder#612BFF
- window.inactiveBorder#3F1BF6
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #6B5B99 | italic |
| keyword, storage.type, storage.modifier | #612BFF | — |
| keyword.operator | #FF007F | — |
| variable, string constant.other.placeholder | #D6D1EF | — |
| variable.other.property, meta.property-name, support.type.property-name | #00F0FF | — |
| entity.name.function, meta.function-call, support.function | #E01EE0 | bold |
| entity.name.class, entity.name.type.class, support.class, support.type | #FCE205 | — |
| string, string.quoted | #00FF88 | — |
| constant.numeric, constant.language, constant.character | #FF007F | — |
| entity.name.tag, meta.tag | #00F0FF | — |
| entity.other.attribute-name | #E01EE0 | — |
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#3FF2A0
- activityBar.background#09041A
- activityBar.border#06040D
- activityBar.dropBorder#FF6BCB
- activityBar.foreground#FFFFFF
- activityBar.inactiveForeground#9086B7
- activityBarBadge.background#3FF2A0
- activityBarBadge.foreground#09041A
- badge.background#3FF2A0
- badge.foreground#09041A
- button.background#3FF2A0
- button.foreground#09041A
- button.hoverBackground#66FFC0
- debugToolBar.background#09041A
- debugToolBar.border#3FF2A0
- descriptionForeground#9086B7
- diffEditor.insertedTextBackground#00FF8830
- diffEditor.removedTextBackground#FF336630
- dropdown.background#1A1333
- dropdown.border#3FF2A0
- 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#3FF2A020
- editor.lineHighlightBackground#1A133360
- editor.lineHighlightBorder#1A1333
- editor.selectionBackground#3FF2A030
- editor.selectionForeground#FFFFFF
- editor.selectionHighlightBackground#3FF2A020
- editor.selectionHighlightBorder#FF6BCB
- editor.wordHighlightBackground#FF6BCB40
- editor.wordHighlightBorder#FF6BCB
- editor.wordHighlightStrongBackground#FF336640
- editor.wordHighlightStrongBorder#FF3366
- editorBracketMatch.background#1A1333
- editorBracketMatch.border#3FF2A0
- editorCodeLens.foreground#9086B7
- editorCursor.background#110A26
- editorCursor.foreground#3FF2A0
- 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#3FF2A0
- editorHint.foreground#9086B7
- editorHoverWidget.background#09041A
- editorHoverWidget.border#3FF2A0
- editorIndentGuide.activeBackground#3FF2A0
- editorIndentGuide.background#1A1333
- editorInfo.foreground#3FF2A0
- editorLineNumber.activeForeground#3FF2A0
- editorLineNumber.foreground#50447C
- editorLink.activeForeground#FF6BCB
- editorOverviewRuler.addedForeground#00FF88
- editorOverviewRuler.border#06040D
- editorOverviewRuler.bracketMatchForeground#3FF2A0
- editorOverviewRuler.currentContentForeground#3FF2A0
- editorOverviewRuler.deletedForeground#FF3366
- editorOverviewRuler.errorForeground#FF3366
- editorOverviewRuler.findMatchForeground#FF336680
- editorOverviewRuler.incomingContentForeground#FF6BCB
- editorOverviewRuler.infoForeground#3FF2A0
- editorOverviewRuler.modifiedForeground#3FF2A0
- editorOverviewRuler.rangeHighlightForeground#1A133380
- editorOverviewRuler.selectionHighlightForeground#3FF2A080
- editorOverviewRuler.warningForeground#FFD700
- editorOverviewRuler.wordHighlightForeground#FF6BCB80
- editorOverviewRuler.wordHighlightStrongForeground#FF336680
- editorRuler.foreground#1A1333
- editorSuggestWidget.background#09041A
- editorSuggestWidget.border#3FF2A0
- editorSuggestWidget.foreground#D6D1EF
- editorSuggestWidget.highlightForeground#FF6BCB
- editorSuggestWidget.selectedBackground#1A1333
- editorWarning.foreground#FFD700
- editorWhitespace.foreground#50447C
- editorWidget.background#09041A
- editorWidget.border#3FF2A0
- errorForeground#FF3366
- focusBorder#3FF2A0
- foreground#D6D1EF
- icon.foreground#D6D1EF
- input.background#09041A
- input.border#3FF2A0
- input.foreground#D6D1EF
- input.placeholderForeground#9086B7
- inputOption.activeBackground#3FF2A030
- inputOption.activeBorder#FF6BCB
- inputValidation.errorBackground#FF3366
- inputValidation.errorBorder#FF3366
- inputValidation.errorForeground#FFFFFF
- inputValidation.infoBackground#3FF2A0
- inputValidation.infoBorder#3FF2A0
- inputValidation.infoForeground#09041A
- inputValidation.warningBackground#FFD700
- inputValidation.warningBorder#FFD700
- inputValidation.warningForeground#09041A
- list.activeSelectionBackground#3FF2A0
- list.activeSelectionForeground#09041A
- list.dropBackground#1A1333
- list.errorForeground#FF3366
- list.focusBackground#3FF2A030
- list.focusForeground#FFFFFF
- list.highlightForeground#FF6BCB
- list.hoverBackground#1A1333
- list.hoverForeground#FFFFFF
- list.inactiveFocusBackground#1A1333
- list.inactiveSelectionBackground#1A1333
- list.inactiveSelectionForeground#D6D1EF
- list.invalidItemForeground#FF3366
- list.warningForeground#FFD700
- listFilterWidget.background#09041A
- listFilterWidget.noMatchesOutline#FF3366
- listFilterWidget.outline#3FF2A0
- menu.background#09041A
- menu.foreground#D6D1EF
- menu.selectionBackground#3FF2A0
- menu.selectionForeground#09041A
- menu.separatorBackground#1A1333
- merge.border#06040D
- merge.currentContentBackground#3FF2A040
- merge.currentHeaderBackground#3FF2A080
- merge.incomingContentBackground#FF6BCB40
- merge.incomingHeaderBackground#FF6BCB80
- minimap.errorHighlight#FF3366
- minimap.findMatchHighlight#FF6BCB80
- minimap.selectionHighlight#3FF2A080
- minimap.warningHighlight#FFD700
- panel.background#09041A
- panel.border#3FF2A0
- panelTitle.activeBorder#3FF2A0
- panelTitle.activeForeground#FFFFFF
- panelTitle.inactiveForeground#9086B7
- peekView.border#3FF2A0
- peekViewEditor.background#1A1333
- peekViewEditor.matchHighlightBackground#FF6BCB80
- peekViewEditorGutter.background#1A1333
- peekViewResult.background#09041A
- peekViewResult.fileForeground#FFFFFF
- peekViewResult.lineForeground#9086B7
- peekViewResult.matchHighlightBackground#FF6BCB80
- peekViewResult.selectionBackground#3FF2A0
- peekViewResult.selectionForeground#09041A
- peekViewTitle.background#09041A
- peekViewTitleDescription.foreground#9086B7
- peekViewTitleLabel.foreground#FFFFFF
- pickerGroup.border#3FF2A0
- pickerGroup.foreground#FF6BCB
- progressBar.background#FF6BCB
- scrollbar.shadow#000000
- scrollbarSlider.activeBackground#3FF2A080
- scrollbarSlider.background#3FF2A040
- scrollbarSlider.hoverBackground#3FF2A060
- selection.background#3FF2A040
- 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#3FF2A030
- statusBarItem.hoverBackground#1A1333
- statusBarItem.prominentBackground#06040D
- statusBarItem.prominentHoverBackground#1A1333
- tab.activeBackground#110A26
- tab.activeBorder#3FF2A0
- tab.activeBorderTop#3FF2A0
- tab.activeForeground#FFFFFF
- tab.border#06040D
- tab.inactiveBackground#09041A
- tab.inactiveForeground#9086B7
- tab.unfocusedActiveBorder#28B878
- tab.unfocusedActiveBorderTop#28B878
- tab.unfocusedActiveForeground#9086B7
- tab.unfocusedInactiveForeground#9086B7
- terminal.ansiBlack#06040D
- terminal.ansiBlue#2979FF
- terminal.ansiBrightBlack#50447C
- terminal.ansiBrightBlue#5C9AFF
- terminal.ansiBrightCyan#66FFC0
- terminal.ansiBrightGreen#00FF88
- terminal.ansiBrightMagenta#FF6BCB
- terminal.ansiBrightRed#FF3366
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#FFD700
- terminal.ansiCyan#3FF2A0
- terminal.ansiGreen#00CC52
- terminal.ansiMagenta#FF6BCB
- terminal.ansiRed#FF2A4D
- terminal.ansiWhite#D6D1EF
- terminal.ansiYellow#FFD700
- terminal.background#09041A
- terminal.foreground#D6D1EF
- terminal.selectionBackground#3FF2A030
- terminalCursor.background#09041A
- terminalCursor.foreground#3FF2A0
- textBlockQuote.background#1A1333
- textBlockQuote.border#FF6BCB
- textCodeBlock.background#09041A
- textLink.activeForeground#FF6BCB
- textLink.foreground#3FF2A0
- textPreformat.foreground#FF6BCB
- textSeparator.foreground#3FF2A0
- titleBar.activeBackground#06040D
- titleBar.activeForeground#D6D1EF
- titleBar.border#06040D
- titleBar.inactiveBackground#09041A
- titleBar.inactiveForeground#9086B7
- tree.indentGuidesStroke#3FF2A040
- walkThrough.embeddedEditorBackground#110A26
- widget.shadow#00000080
- window.activeBorder#3FF2A0
- window.inactiveBorder#28B878
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #2E8A5A | italic |
| keyword, storage.type, storage.modifier | #3FF2A0 | — |
| keyword.operator | #FF3366 | — |
| variable, string constant.other.placeholder | #D6D1EF | — |
| variable.other.property, meta.property-name, support.type.property-name | #72FFFF | — |
| 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 | #72FFFF | — |
| constant.numeric, constant.language, constant.character | #FF3366 | — |
| entity.name.tag, meta.tag | #3FF2A0 | — |
| entity.other.attribute-name | #72FFFF | — |
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#2979FF
- activityBar.background#09041A
- activityBar.border#06040D
- activityBar.dropBorder#FF6B35
- activityBar.foreground#FFFFFF
- activityBar.inactiveForeground#9086B7
- activityBarBadge.background#2979FF
- activityBarBadge.foreground#FFFFFF
- badge.background#2979FF
- badge.foreground#FFFFFF
- button.background#2979FF
- button.foreground#FFFFFF
- button.hoverBackground#5C9AFF
- debugToolBar.background#09041A
- debugToolBar.border#2979FF
- descriptionForeground#9086B7
- diffEditor.insertedTextBackground#00FF8830
- diffEditor.removedTextBackground#FF336630
- dropdown.background#1A1333
- dropdown.border#2979FF
- 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#2979FF20
- editor.lineHighlightBackground#1A133360
- editor.lineHighlightBorder#1A1333
- editor.selectionBackground#2979FF30
- editor.selectionForeground#FFFFFF
- editor.selectionHighlightBackground#2979FF20
- editor.selectionHighlightBorder#FF6B35
- editor.wordHighlightBackground#FF6B3540
- editor.wordHighlightBorder#FF6B35
- editor.wordHighlightStrongBackground#FF336640
- editor.wordHighlightStrongBorder#FF3366
- editorBracketMatch.background#1A1333
- editorBracketMatch.border#2979FF
- editorCodeLens.foreground#9086B7
- editorCursor.background#110A26
- editorCursor.foreground#2979FF
- 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#2979FF
- editorHint.foreground#9086B7
- editorHoverWidget.background#09041A
- editorHoverWidget.border#2979FF
- editorIndentGuide.activeBackground#2979FF
- editorIndentGuide.background#1A1333
- editorInfo.foreground#2979FF
- editorLineNumber.activeForeground#2979FF
- editorLineNumber.foreground#50447C
- editorLink.activeForeground#FF6B35
- editorOverviewRuler.addedForeground#00FF88
- editorOverviewRuler.border#06040D
- editorOverviewRuler.bracketMatchForeground#2979FF
- editorOverviewRuler.currentContentForeground#2979FF
- editorOverviewRuler.deletedForeground#FF3366
- editorOverviewRuler.errorForeground#FF3366
- editorOverviewRuler.findMatchForeground#FF336680
- editorOverviewRuler.incomingContentForeground#FF6B35
- editorOverviewRuler.infoForeground#2979FF
- editorOverviewRuler.modifiedForeground#2979FF
- editorOverviewRuler.rangeHighlightForeground#1A133380
- editorOverviewRuler.selectionHighlightForeground#2979FF80
- editorOverviewRuler.warningForeground#FFD740
- editorOverviewRuler.wordHighlightForeground#FF6B3580
- editorOverviewRuler.wordHighlightStrongForeground#FF336680
- editorRuler.foreground#1A1333
- editorSuggestWidget.background#09041A
- editorSuggestWidget.border#2979FF
- editorSuggestWidget.foreground#D6D1EF
- editorSuggestWidget.highlightForeground#FF6B35
- editorSuggestWidget.selectedBackground#1A1333
- editorWarning.foreground#FFD740
- editorWhitespace.foreground#50447C
- editorWidget.background#09041A
- editorWidget.border#2979FF
- errorForeground#FF3366
- focusBorder#2979FF
- foreground#D6D1EF
- icon.foreground#D6D1EF
- input.background#09041A
- input.border#2979FF
- input.foreground#D6D1EF
- input.placeholderForeground#9086B7
- inputOption.activeBackground#2979FF30
- inputOption.activeBorder#FF6B35
- inputValidation.errorBackground#FF3366
- inputValidation.errorBorder#FF3366
- inputValidation.errorForeground#FFFFFF
- inputValidation.infoBackground#2979FF
- inputValidation.infoBorder#2979FF
- inputValidation.infoForeground#FFFFFF
- inputValidation.warningBackground#FFD740
- inputValidation.warningBorder#FFD740
- inputValidation.warningForeground#09041A
- list.activeSelectionBackground#2979FF
- list.activeSelectionForeground#FFFFFF
- list.dropBackground#1A1333
- list.errorForeground#FF3366
- list.focusBackground#2979FF30
- list.focusForeground#FFFFFF
- list.highlightForeground#FF6B35
- list.hoverBackground#1A1333
- list.hoverForeground#FFFFFF
- list.inactiveFocusBackground#1A1333
- list.inactiveSelectionBackground#1A1333
- list.inactiveSelectionForeground#D6D1EF
- list.invalidItemForeground#FF3366
- list.warningForeground#FFD740
- listFilterWidget.background#09041A
- listFilterWidget.noMatchesOutline#FF3366
- listFilterWidget.outline#2979FF
- menu.background#09041A
- menu.foreground#D6D1EF
- menu.selectionBackground#2979FF
- menu.selectionForeground#FFFFFF
- menu.separatorBackground#1A1333
- merge.border#06040D
- merge.currentContentBackground#2979FF40
- merge.currentHeaderBackground#2979FF80
- merge.incomingContentBackground#FF6B3540
- merge.incomingHeaderBackground#FF6B3580
- minimap.errorHighlight#FF3366
- minimap.findMatchHighlight#FF6B3580
- minimap.selectionHighlight#2979FF80
- minimap.warningHighlight#FFD740
- panel.background#09041A
- panel.border#2979FF
- panelTitle.activeBorder#2979FF
- panelTitle.activeForeground#FFFFFF
- panelTitle.inactiveForeground#9086B7
- peekView.border#2979FF
- peekViewEditor.background#1A1333
- peekViewEditor.matchHighlightBackground#FF6B3580
- peekViewEditorGutter.background#1A1333
- peekViewResult.background#09041A
- peekViewResult.fileForeground#FFFFFF
- peekViewResult.lineForeground#9086B7
- peekViewResult.matchHighlightBackground#FF6B3580
- peekViewResult.selectionBackground#2979FF
- peekViewResult.selectionForeground#FFFFFF
- peekViewTitle.background#09041A
- peekViewTitleDescription.foreground#9086B7
- peekViewTitleLabel.foreground#FFFFFF
- pickerGroup.border#2979FF
- pickerGroup.foreground#FF6B35
- progressBar.background#FF6B35
- scrollbar.shadow#000000
- scrollbarSlider.activeBackground#2979FF80
- scrollbarSlider.background#2979FF40
- scrollbarSlider.hoverBackground#2979FF60
- selection.background#2979FF40
- 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#2979FF30
- statusBarItem.hoverBackground#1A1333
- statusBarItem.prominentBackground#06040D
- statusBarItem.prominentHoverBackground#1A1333
- tab.activeBackground#110A26
- tab.activeBorder#2979FF
- tab.activeBorderTop#2979FF
- tab.activeForeground#FFFFFF
- tab.border#06040D
- tab.inactiveBackground#09041A
- tab.inactiveForeground#9086B7
- tab.unfocusedActiveBorder#1A5ACC
- tab.unfocusedActiveBorderTop#1A5ACC
- tab.unfocusedActiveForeground#9086B7
- tab.unfocusedInactiveForeground#9086B7
- terminal.ansiBlack#06040D
- terminal.ansiBlue#2979FF
- terminal.ansiBrightBlack#50447C
- terminal.ansiBrightBlue#5C9AFF
- terminal.ansiBrightCyan#72FFFF
- terminal.ansiBrightGreen#00FF88
- terminal.ansiBrightMagenta#E040FB
- terminal.ansiBrightRed#FF3366
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#FFD740
- terminal.ansiCyan#64B5F6
- terminal.ansiGreen#00CC52
- terminal.ansiMagenta#E040FB
- terminal.ansiRed#FF2A4D
- terminal.ansiWhite#D6D1EF
- terminal.ansiYellow#FFD740
- terminal.background#09041A
- terminal.foreground#D6D1EF
- terminal.selectionBackground#2979FF30
- terminalCursor.background#09041A
- terminalCursor.foreground#2979FF
- textBlockQuote.background#1A1333
- textBlockQuote.border#FF6B35
- textCodeBlock.background#09041A
- textLink.activeForeground#FF6B35
- textLink.foreground#2979FF
- textPreformat.foreground#FF6B35
- textSeparator.foreground#2979FF
- titleBar.activeBackground#06040D
- titleBar.activeForeground#D6D1EF
- titleBar.border#06040D
- titleBar.inactiveBackground#09041A
- titleBar.inactiveForeground#9086B7
- tree.indentGuidesStroke#2979FF40
- walkThrough.embeddedEditorBackground#110A26
- widget.shadow#00000080
- window.activeBorder#2979FF
- window.inactiveBorder#1A5ACC
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #3A5A8A | italic |
| keyword, storage.type, storage.modifier | #2979FF | — |
| keyword.operator | #FF3366 | — |
| variable, string constant.other.placeholder | #D6D1EF | — |
| variable.other.property, meta.property-name, support.type.property-name | #64B5F6 | — |
| entity.name.function, meta.function-call, support.function | #E040FB | bold |
| entity.name.class, entity.name.type.class, support.class, support.type | #FFD740 | — |
| string, string.quoted | #00FF88 | — |
| constant.numeric, constant.language, constant.character | #FF3366 | — |
| entity.name.tag, meta.tag | #2979FF | — |
| entity.other.attribute-name | #64B5F6 | — |
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#72FFFF
- activityBar.background#09041A
- activityBar.border#06040D
- activityBar.dropBorder#FF72B4
- activityBar.foreground#FFFFFF
- activityBar.inactiveForeground#9086B7
- activityBarBadge.background#72FFFF
- activityBarBadge.foreground#09041A
- badge.background#72FFFF
- badge.foreground#09041A
- button.background#72FFFF
- button.foreground#09041A
- button.hoverBackground#99FFFF
- debugToolBar.background#09041A
- debugToolBar.border#72FFFF
- descriptionForeground#9086B7
- diffEditor.insertedTextBackground#00FF8830
- diffEditor.removedTextBackground#FF336630
- dropdown.background#1A1333
- dropdown.border#72FFFF
- 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#72FFFF20
- editor.lineHighlightBackground#1A133360
- editor.lineHighlightBorder#1A1333
- editor.selectionBackground#72FFFF30
- editor.selectionForeground#FFFFFF
- editor.selectionHighlightBackground#72FFFF20
- editor.selectionHighlightBorder#FF72B4
- editor.wordHighlightBackground#FF72B440
- editor.wordHighlightBorder#FF72B4
- editor.wordHighlightStrongBackground#FF336640
- editor.wordHighlightStrongBorder#FF3366
- editorBracketMatch.background#1A1333
- editorBracketMatch.border#72FFFF
- editorCodeLens.foreground#9086B7
- editorCursor.background#110A26
- editorCursor.foreground#72FFFF
- 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#72FFFF
- editorHint.foreground#9086B7
- editorHoverWidget.background#09041A
- editorHoverWidget.border#72FFFF
- editorIndentGuide.activeBackground#72FFFF
- editorIndentGuide.background#1A1333
- editorInfo.foreground#72FFFF
- editorLineNumber.activeForeground#72FFFF
- editorLineNumber.foreground#50447C
- editorLink.activeForeground#FF72B4
- editorOverviewRuler.addedForeground#00FF88
- editorOverviewRuler.border#06040D
- editorOverviewRuler.bracketMatchForeground#72FFFF
- editorOverviewRuler.currentContentForeground#72FFFF
- editorOverviewRuler.deletedForeground#FF3366
- editorOverviewRuler.errorForeground#FF3366
- editorOverviewRuler.findMatchForeground#FF336680
- editorOverviewRuler.incomingContentForeground#FF72B4
- editorOverviewRuler.infoForeground#72FFFF
- editorOverviewRuler.modifiedForeground#72FFFF
- editorOverviewRuler.rangeHighlightForeground#1A133380
- editorOverviewRuler.selectionHighlightForeground#72FFFF80
- editorOverviewRuler.warningForeground#FFD700
- editorOverviewRuler.wordHighlightForeground#FF72B480
- editorOverviewRuler.wordHighlightStrongForeground#FF336680
- editorRuler.foreground#1A1333
- editorSuggestWidget.background#09041A
- editorSuggestWidget.border#72FFFF
- editorSuggestWidget.foreground#D6D1EF
- editorSuggestWidget.highlightForeground#FF72B4
- editorSuggestWidget.selectedBackground#1A1333
- editorWarning.foreground#FFD700
- editorWhitespace.foreground#50447C
- editorWidget.background#09041A
- editorWidget.border#72FFFF
- errorForeground#FF3366
- focusBorder#72FFFF
- foreground#D6D1EF
- icon.foreground#D6D1EF
- input.background#09041A
- input.border#72FFFF
- input.foreground#D6D1EF
- input.placeholderForeground#9086B7
- inputOption.activeBackground#72FFFF30
- inputOption.activeBorder#FF72B4
- inputValidation.errorBackground#FF3366
- inputValidation.errorBorder#FF3366
- inputValidation.errorForeground#FFFFFF
- inputValidation.infoBackground#72FFFF
- inputValidation.infoBorder#72FFFF
- inputValidation.infoForeground#09041A
- inputValidation.warningBackground#FFD700
- inputValidation.warningBorder#FFD700
- inputValidation.warningForeground#09041A
- list.activeSelectionBackground#72FFFF
- list.activeSelectionForeground#09041A
- list.dropBackground#1A1333
- list.errorForeground#FF3366
- list.focusBackground#72FFFF30
- list.focusForeground#FFFFFF
- list.highlightForeground#FF72B4
- list.hoverBackground#1A1333
- list.hoverForeground#FFFFFF
- list.inactiveFocusBackground#1A1333
- list.inactiveSelectionBackground#1A1333
- list.inactiveSelectionForeground#D6D1EF
- list.invalidItemForeground#FF3366
- list.warningForeground#FFD700
- listFilterWidget.background#09041A
- listFilterWidget.noMatchesOutline#FF3366
- listFilterWidget.outline#72FFFF
- menu.background#09041A
- menu.foreground#D6D1EF
- menu.selectionBackground#72FFFF
- menu.selectionForeground#09041A
- menu.separatorBackground#1A1333
- merge.border#06040D
- merge.currentContentBackground#72FFFF40
- merge.currentHeaderBackground#72FFFF80
- merge.incomingContentBackground#FF72B440
- merge.incomingHeaderBackground#FF72B480
- minimap.errorHighlight#FF3366
- minimap.findMatchHighlight#FF72B480
- minimap.selectionHighlight#72FFFF80
- minimap.warningHighlight#FFD700
- panel.background#09041A
- panel.border#72FFFF
- panelTitle.activeBorder#72FFFF
- panelTitle.activeForeground#FFFFFF
- panelTitle.inactiveForeground#9086B7
- peekView.border#72FFFF
- peekViewEditor.background#1A1333
- peekViewEditor.matchHighlightBackground#FF72B480
- peekViewEditorGutter.background#1A1333
- peekViewResult.background#09041A
- peekViewResult.fileForeground#FFFFFF
- peekViewResult.lineForeground#9086B7
- peekViewResult.matchHighlightBackground#FF72B480
- peekViewResult.selectionBackground#72FFFF
- peekViewResult.selectionForeground#09041A
- peekViewTitle.background#09041A
- peekViewTitleDescription.foreground#9086B7
- peekViewTitleLabel.foreground#FFFFFF
- pickerGroup.border#72FFFF
- pickerGroup.foreground#FF72B4
- progressBar.background#FF72B4
- scrollbar.shadow#000000
- scrollbarSlider.activeBackground#72FFFF80
- scrollbarSlider.background#72FFFF40
- scrollbarSlider.hoverBackground#72FFFF60
- selection.background#72FFFF40
- 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#72FFFF30
- statusBarItem.hoverBackground#1A1333
- statusBarItem.prominentBackground#06040D
- statusBarItem.prominentHoverBackground#1A1333
- tab.activeBackground#110A26
- tab.activeBorder#72FFFF
- tab.activeBorderTop#72FFFF
- tab.activeForeground#FFFFFF
- tab.border#06040D
- tab.inactiveBackground#09041A
- tab.inactiveForeground#9086B7
- tab.unfocusedActiveBorder#3DCCCC
- tab.unfocusedActiveBorderTop#3DCCCC
- tab.unfocusedActiveForeground#9086B7
- tab.unfocusedInactiveForeground#9086B7
- terminal.ansiBlack#06040D
- terminal.ansiBlue#72FFFF
- terminal.ansiBrightBlack#50447C
- terminal.ansiBrightBlue#99FFFF
- terminal.ansiBrightCyan#99FFFF
- terminal.ansiBrightGreen#00FF88
- terminal.ansiBrightMagenta#FF72B4
- terminal.ansiBrightRed#FF3366
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#FFD700
- terminal.ansiCyan#72FFFF
- terminal.ansiGreen#00CC52
- terminal.ansiMagenta#FF72B4
- terminal.ansiRed#FF2A4D
- terminal.ansiWhite#D6D1EF
- terminal.ansiYellow#FFD700
- terminal.background#09041A
- terminal.foreground#D6D1EF
- terminal.selectionBackground#72FFFF30
- terminalCursor.background#09041A
- terminalCursor.foreground#72FFFF
- textBlockQuote.background#1A1333
- textBlockQuote.border#FF72B4
- textCodeBlock.background#09041A
- textLink.activeForeground#FF72B4
- textLink.foreground#72FFFF
- textPreformat.foreground#FF72B4
- textSeparator.foreground#72FFFF
- titleBar.activeBackground#06040D
- titleBar.activeForeground#D6D1EF
- titleBar.border#06040D
- titleBar.inactiveBackground#09041A
- titleBar.inactiveForeground#9086B7
- tree.indentGuidesStroke#72FFFF40
- walkThrough.embeddedEditorBackground#110A26
- widget.shadow#00000080
- window.activeBorder#72FFFF
- window.inactiveBorder#3DCCCC
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #3D8A8A | italic |
| keyword, storage.type, storage.modifier | #72FFFF | — |
| keyword.operator | #FF3366 | — |
| variable, string constant.other.placeholder | #D6D1EF | — |
| variable.other.property, meta.property-name, support.type.property-name | #FF72B4 | — |
| entity.name.function, meta.function-call, support.function | #FF72B4 | bold |
| entity.name.class, entity.name.type.class, support.class, support.type | #FFD700 | — |
| string, string.quoted | #A8FF60 | — |
| constant.numeric, constant.language, constant.character | #FF3366 | — |
| entity.name.tag, meta.tag | #72FFFF | — |
| entity.other.attribute-name | #FF72B4 | — |