Zenkai Theme

Name: Zenkai Theme
Author: Zenkai

Publisher: ZenkaiThemes in package: 12

A vibrant, neon-infused dark theme ecosystem for VS Code inspired by the Zenkai Universe.

Open in VS Code GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Zenkai Theme — Zenkai Neon Orange

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#110A26
activityBar.activeBorder#FF7A20
activityBar.background#09041A
activityBar.border#06040D
activityBar.dropBorder#00CCFF
activityBar.foreground#FFFFFF
activityBar.inactiveForeground#9086B7
activityBarBadge.background#FF7A20
activityBarBadge.foreground#FFFFFF
badge.background#FF7A20
badge.foreground#FFFFFF
button.background#FF7A20
button.foreground#FFFFFF
button.hoverBackground#FF9A50
debugToolBar.background#09041A
debugToolBar.border#FF7A20
descriptionForeground#9086B7
diffEditor.insertedTextBackground#00FF8830
diffEditor.removedTextBackground#FF336630
dropdown.background#1A1333
dropdown.border#FF7A20
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#FF7A2020
editor.lineHighlightBackground#1A133360
editor.lineHighlightBorder#1A1333
editor.selectionBackground#FF7A2030
editor.selectionForeground#FFFFFF
editor.selectionHighlightBackground#FF7A2020
editor.selectionHighlightBorder#00CCFF
editor.wordHighlightBackground#00CCFF40
editor.wordHighlightBorder#00CCFF
editor.wordHighlightStrongBackground#FF336640
editor.wordHighlightStrongBorder#FF3366
editorBracketMatch.background#1A1333
editorBracketMatch.border#FF7A20
editorCodeLens.foreground#9086B7
editorCursor.background#110A26
editorCursor.foreground#FF7A20
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#FF7A20
editorHint.foreground#9086B7
editorHoverWidget.background#09041A
editorHoverWidget.border#FF7A20
editorIndentGuide.activeBackground#FF7A20
editorIndentGuide.background#1A1333
editorInfo.foreground#00CCFF
editorLineNumber.activeForeground#FF7A20
editorLineNumber.foreground#50447C
editorLink.activeForeground#00CCFF
editorOverviewRuler.addedForeground#00FF88
editorOverviewRuler.border#06040D
editorOverviewRuler.bracketMatchForeground#FF7A20
editorOverviewRuler.currentContentForeground#FF7A20
editorOverviewRuler.deletedForeground#FF3366
editorOverviewRuler.errorForeground#FF3366
editorOverviewRuler.findMatchForeground#FF336680
editorOverviewRuler.incomingContentForeground#00CCFF
editorOverviewRuler.infoForeground#00CCFF
editorOverviewRuler.modifiedForeground#FF7A20
editorOverviewRuler.rangeHighlightForeground#1A133380
editorOverviewRuler.selectionHighlightForeground#FF7A2080
editorOverviewRuler.warningForeground#FFD700
editorOverviewRuler.wordHighlightForeground#00CCFF80
editorOverviewRuler.wordHighlightStrongForeground#FF336680
editorRuler.foreground#1A1333
editorSuggestWidget.background#09041A
editorSuggestWidget.border#FF7A20
editorSuggestWidget.foreground#D6D1EF
editorSuggestWidget.highlightForeground#00CCFF
editorSuggestWidget.selectedBackground#1A1333
editorWarning.foreground#FFD700
editorWhitespace.foreground#50447C
editorWidget.background#09041A
editorWidget.border#FF7A20
errorForeground#FF3366
focusBorder#FF7A20
foreground#D6D1EF
icon.foreground#D6D1EF
input.background#09041A
input.border#FF7A20
input.foreground#D6D1EF
input.placeholderForeground#9086B7
inputOption.activeBackground#FF7A2030
inputOption.activeBorder#00CCFF
inputValidation.errorBackground#FF3366
inputValidation.errorBorder#FF3366
inputValidation.errorForeground#FFFFFF
inputValidation.infoBackground#00CCFF
inputValidation.infoBorder#00CCFF
inputValidation.infoForeground#09041A
inputValidation.warningBackground#FFD700
inputValidation.warningBorder#FFD700
inputValidation.warningForeground#09041A
list.activeSelectionBackground#FF7A20
list.activeSelectionForeground#FFFFFF
list.dropBackground#1A1333
list.errorForeground#FF3366
list.focusBackground#FF7A2030
list.focusForeground#FFFFFF
list.highlightForeground#00CCFF
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#FF7A20
menu.background#09041A
menu.foreground#D6D1EF
menu.selectionBackground#FF7A20
menu.selectionForeground#FFFFFF
menu.separatorBackground#1A1333
merge.border#06040D
merge.currentContentBackground#FF7A2040
merge.currentHeaderBackground#FF7A2080
merge.incomingContentBackground#00CCFF40
merge.incomingHeaderBackground#00CCFF80
minimap.errorHighlight#FF3366
minimap.findMatchHighlight#00CCFF80
minimap.selectionHighlight#FF7A2080
minimap.warningHighlight#FFD700
panel.background#09041A
panel.border#FF7A20
panelTitle.activeBorder#FF7A20
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#9086B7
peekView.border#FF7A20
peekViewEditor.background#1A1333
peekViewEditor.matchHighlightBackground#00CCFF80
peekViewEditorGutter.background#1A1333
peekViewResult.background#09041A
peekViewResult.fileForeground#FFFFFF
peekViewResult.lineForeground#9086B7
peekViewResult.matchHighlightBackground#00CCFF80
peekViewResult.selectionBackground#FF7A20
peekViewResult.selectionForeground#FFFFFF
peekViewTitle.background#09041A
peekViewTitleDescription.foreground#9086B7
peekViewTitleLabel.foreground#FFFFFF
pickerGroup.border#FF7A20
pickerGroup.foreground#00CCFF
progressBar.background#00CCFF
scrollbar.shadow#000000
scrollbarSlider.activeBackground#FF7A2080
scrollbarSlider.background#FF7A2040
scrollbarSlider.hoverBackground#FF7A2060
selection.background#FF7A2040
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#FF7A2030
statusBarItem.hoverBackground#1A1333
statusBarItem.prominentBackground#06040D
statusBarItem.prominentHoverBackground#1A1333
tab.activeBackground#110A26
tab.activeBorder#FF7A20
tab.activeBorderTop#FF7A20
tab.activeForeground#FFFFFF
tab.border#06040D
tab.inactiveBackground#09041A
tab.inactiveForeground#9086B7
tab.unfocusedActiveBorder#CC5E10
tab.unfocusedActiveBorderTop#CC5E10
tab.unfocusedActiveForeground#9086B7
tab.unfocusedInactiveForeground#9086B7
terminal.ansiBlack#06040D
terminal.ansiBlue#00CCFF
terminal.ansiBrightBlack#50447C
terminal.ansiBrightBlue#44DDFF
terminal.ansiBrightCyan#72FFFF
terminal.ansiBrightGreen#00FF88
terminal.ansiBrightMagenta#FF4DA6
terminal.ansiBrightRed#FF3366
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFD700
terminal.ansiCyan#00CCFF
terminal.ansiGreen#00CC52
terminal.ansiMagenta#FF4DA6
terminal.ansiRed#FF2A4D
terminal.ansiWhite#D6D1EF
terminal.ansiYellow#FFD700
terminal.background#09041A
terminal.foreground#D6D1EF
terminal.selectionBackground#FF7A2030
terminalCursor.background#09041A
terminalCursor.foreground#FF7A20
textBlockQuote.background#1A1333
textBlockQuote.border#00CCFF
textCodeBlock.background#09041A
textLink.activeForeground#00CCFF
textLink.foreground#FF7A20
textPreformat.foreground#00CCFF
textSeparator.foreground#FF7A20
titleBar.activeBackground#06040D
titleBar.activeForeground#D6D1EF
titleBar.border#06040D
titleBar.inactiveBackground#09041A
titleBar.inactiveForeground#9086B7
tree.indentGuidesStroke#FF7A2040
walkThrough.embeddedEditorBackground#110A26
widget.shadow#00000080
window.activeBorder#FF7A20
window.inactiveBorder#CC5E10

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8A5A2E	italic
keyword, storage.type, storage.modifier	#FF7A20	—
keyword.operator	#FF3366	—
variable, string constant.other.placeholder	#D6D1EF	—
variable.other.property, meta.property-name, support.type.property-name	#00CCFF	—
entity.name.function, meta.function-call, support.function	#FF4DA6	bold
entity.name.class, entity.name.type.class, support.class, support.type	#FFD700	—
string, string.quoted	#00FF88	—
constant.numeric, constant.language, constant.character	#FF3366	—
entity.name.tag, meta.tag	#FF7A20	—
entity.other.attribute-name	#00CCFF	—