Zenkai Theme

Name: Zenkai Theme
Author: Zenkai

Publisher: ZenkaiThemes in package: 11

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 Cyan

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#110A26E6
activityBar.activeBorder#72FFFF
activityBar.background#09041ACC
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#09041ACC
debugToolBar.border#72FFFF
descriptionForeground#9086B7
diffEditor.insertedTextBackground#00FF8830
diffEditor.removedTextBackground#FF336630
dropdown.background#1A1333CC
dropdown.border#72FFFF
dropdown.foreground#D6D1EF
dropdown.listBackground#09041ACC
editor.background#110A26E6
editor.findMatchBackground#FF336680
editor.findMatchHighlightBackground#FF336640
editor.findRangeHighlightBackground#1A1333CC
editor.foreground#D6D1EF
editor.hoverHighlightBackground#1A1333CC
editor.inactiveSelectionBackground#72FFFF44
editor.lineHighlightBackground#1A133380
editor.lineHighlightBorder#72FFFF80
editor.selectionBackground#72FFFF66
editor.selectionForeground#FFFFFF
editor.selectionHighlightBackground#72FFFF44
editor.selectionHighlightBorder#FF72B4
editor.wordHighlightBackground#FF72B440
editor.wordHighlightBorder#FF72B4
editor.wordHighlightStrongBackground#FF336640
editor.wordHighlightStrongBorder#FF3366
editorBracketMatch.background#1A1333CC
editorBracketMatch.border#72FFFF
editorCodeLens.foreground#9086B7
editorCursor.background#110A26E6
editorCursor.foreground#72FFFF
editorError.foreground#FF3366
editorGroup.border#06040D
editorGroup.dropBackground#1A133380
editorGroupHeader.noTabsBackground#09041ACC
editorGroupHeader.tabsBackground#09041ACC
editorGroupHeader.tabsBorder#06040D
editorGutter.addedBackground#00FF88
editorGutter.background#110A26E6
editorGutter.deletedBackground#FF3366
editorGutter.modifiedBackground#72FFFF
editorHint.foreground#9086B7
editorHoverWidget.background#09041ACC
editorHoverWidget.border#72FFFF
editorIndentGuide.activeBackground#72FFFF
editorIndentGuide.background#1A1333CC
editorInfo.foreground#72FFFF
editorLineNumber.activeForeground#72FFFF
editorLineNumber.foreground#756A9B
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#09041ACC
editorSuggestWidget.border#72FFFF
editorSuggestWidget.foreground#D6D1EF
editorSuggestWidget.highlightForeground#FF72B4
editorSuggestWidget.selectedBackground#1A1333CC
editorWarning.foreground#FFD700
editorWhitespace.foreground#756A9B
editorWidget.background#09041ACC
editorWidget.border#72FFFF
errorForeground#FF3366
focusBorder#72FFFF
foreground#D6D1EF
icon.foreground#D6D1EF
input.background#09041ACC
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#72FFFF66
list.activeSelectionForeground#09041A
list.dropBackground#1A1333CC
list.errorForeground#FF3366
list.focusBackground#72FFFF30
list.focusForeground#FFFFFF
list.highlightForeground#FF72B4
list.hoverBackground#1A1333CC
list.hoverForeground#FFFFFF
list.inactiveFocusBackground#1A1333CC
list.inactiveSelectionBackground#1A1333CC
list.inactiveSelectionForeground#D6D1EF
list.invalidItemForeground#FF3366
list.warningForeground#FFD700
listFilterWidget.background#09041ACC
listFilterWidget.noMatchesOutline#FF3366
listFilterWidget.outline#72FFFF
menu.background#09041ACC
menu.foreground#D6D1EF
menu.selectionBackground#72FFFF
menu.selectionForeground#09041A
menu.separatorBackground#1A1333CC
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#09041ACC
panel.border#72FFFF
panelTitle.activeBorder#72FFFF
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#9086B7
peekView.border#72FFFF
peekViewEditor.background#1A1333CC
peekViewEditor.matchHighlightBackground#FF72B480
peekViewEditorGutter.background#1A1333CC
peekViewResult.background#09041ACC
peekViewResult.fileForeground#FFFFFF
peekViewResult.lineForeground#9086B7
peekViewResult.matchHighlightBackground#FF72B480
peekViewResult.selectionBackground#72FFFF
peekViewResult.selectionForeground#09041A
peekViewTitle.background#09041ACC
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#09041ACC
sideBar.border#06040D
sideBar.dropBackground#1A1333CC
sideBar.foreground#D6D1EF
sideBarSectionHeader.background#09041ACC
sideBarSectionHeader.border#06040D
sideBarSectionHeader.foreground#D6D1EF
sideBarTitle.foreground#FFFFFF
statusBar.background#06040DCC
statusBar.border#06040D
statusBar.debuggingBackground#FF3366
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#D6D1EF
statusBar.noFolderBackground#09041ACC
statusBar.noFolderForeground#D6D1EF
statusBarItem.activeBackground#72FFFF30
statusBarItem.hoverBackground#1A1333CC
statusBarItem.prominentBackground#06040DCC
statusBarItem.prominentHoverBackground#1A1333CC
tab.activeBackground#110A26E6
tab.activeBorder#72FFFF
tab.activeBorderTop#72FFFF
tab.activeForeground#FFFFFF
tab.border#06040D
tab.inactiveBackground#09041ACC
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#09041ACC
terminal.foreground#D6D1EF
terminal.selectionBackground#72FFFF30
terminalCursor.background#09041ACC
terminalCursor.foreground#72FFFF
textBlockQuote.background#1A1333CC
textBlockQuote.border#FF72B4
textCodeBlock.background#09041ACC
textLink.activeForeground#FF72B4
textLink.foreground#72FFFF
textPreformat.foreground#FF72B4
textSeparator.foreground#72FFFF
titleBar.activeBackground#06040DCC
titleBar.activeForeground#D6D1EF
titleBar.border#06040D
titleBar.inactiveBackground#09041ACC
titleBar.inactiveForeground#9086B7
tree.indentGuidesStroke#72FFFF40
walkThrough.embeddedEditorBackground#110A26E6
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	—