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 Dark Green

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#2ECC71
activityBar.background#09041A
activityBar.border#06040D
activityBar.dropBorder#2ECC71
activityBar.foreground#FFFFFF
activityBar.inactiveForeground#9086B7
activityBarBadge.background#2ECC71
activityBarBadge.foreground#09041A
badge.background#2ECC71
badge.foreground#09041A
button.background#1F6E52
button.foreground#FFFFFF
button.hoverBackground#2E9E72
debugToolBar.background#09041A
debugToolBar.border#1F6E52
descriptionForeground#9086B7
diffEditor.insertedTextBackground#2ECC7130
diffEditor.removedTextBackground#FF336630
dropdown.background#1A1333
dropdown.border#1F6E52
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#1F6E5220
editor.lineHighlightBackground#1A133360
editor.lineHighlightBorder#1A1333
editor.selectionBackground#1F6E5230
editor.selectionForeground#FFFFFF
editor.selectionHighlightBackground#1F6E5220
editor.selectionHighlightBorder#2ECC71
editor.wordHighlightBackground#2ECC7140
editor.wordHighlightBorder#2ECC71
editor.wordHighlightStrongBackground#FF336640
editor.wordHighlightStrongBorder#FF3366
editorBracketMatch.background#1A1333
editorBracketMatch.border#2ECC71
editorCodeLens.foreground#9086B7
editorCursor.background#110A26
editorCursor.foreground#2ECC71
editorError.foreground#FF3366
editorGroup.border#06040D
editorGroup.dropBackground#1A133380
editorGroupHeader.noTabsBackground#09041A
editorGroupHeader.tabsBackground#09041A
editorGroupHeader.tabsBorder#06040D
editorGutter.addedBackground#2ECC71
editorGutter.background#110A26
editorGutter.deletedBackground#FF3366
editorGutter.modifiedBackground#1F6E52
editorHint.foreground#9086B7
editorHoverWidget.background#09041A
editorHoverWidget.border#1F6E52
editorIndentGuide.activeBackground#2ECC71
editorIndentGuide.background#1A1333
editorInfo.foreground#2ECC71
editorLineNumber.activeForeground#2ECC71
editorLineNumber.foreground#50447C
editorLink.activeForeground#2ECC71
editorOverviewRuler.addedForeground#2ECC71
editorOverviewRuler.border#06040D
editorOverviewRuler.bracketMatchForeground#2ECC71
editorOverviewRuler.currentContentForeground#1F6E52
editorOverviewRuler.deletedForeground#FF3366
editorOverviewRuler.errorForeground#FF3366
editorOverviewRuler.findMatchForeground#FF336680
editorOverviewRuler.incomingContentForeground#2ECC71
editorOverviewRuler.infoForeground#2ECC71
editorOverviewRuler.modifiedForeground#1F6E52
editorOverviewRuler.rangeHighlightForeground#1A133380
editorOverviewRuler.selectionHighlightForeground#1F6E5280
editorOverviewRuler.warningForeground#FFD700
editorOverviewRuler.wordHighlightForeground#2ECC7180
editorOverviewRuler.wordHighlightStrongForeground#FF336680
editorRuler.foreground#1A1333
editorSuggestWidget.background#09041A
editorSuggestWidget.border#1F6E52
editorSuggestWidget.foreground#D6D1EF
editorSuggestWidget.highlightForeground#2ECC71
editorSuggestWidget.selectedBackground#1A1333
editorWarning.foreground#FFD700
editorWhitespace.foreground#50447C
editorWidget.background#09041A
editorWidget.border#1F6E52
errorForeground#FF3366
focusBorder#1F6E52
foreground#D6D1EF
icon.foreground#D6D1EF
input.background#09041A
input.border#1F6E52
input.foreground#D6D1EF
input.placeholderForeground#9086B7
inputOption.activeBackground#1F6E5230
inputOption.activeBorder#2ECC71
inputValidation.errorBackground#FF3366
inputValidation.errorBorder#FF3366
inputValidation.errorForeground#FFFFFF
inputValidation.infoBackground#2ECC71
inputValidation.infoBorder#2ECC71
inputValidation.infoForeground#09041A
inputValidation.warningBackground#FFD700
inputValidation.warningBorder#FFD700
inputValidation.warningForeground#09041A
list.activeSelectionBackground#1F6E52
list.activeSelectionForeground#FFFFFF
list.dropBackground#1A1333
list.errorForeground#FF3366
list.focusBackground#1F6E5230
list.focusForeground#FFFFFF
list.highlightForeground#2ECC71
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#1F6E52
menu.background#09041A
menu.foreground#D6D1EF
menu.selectionBackground#1F6E52
menu.selectionForeground#FFFFFF
menu.separatorBackground#1A1333
merge.border#06040D
merge.currentContentBackground#1F6E5240
merge.currentHeaderBackground#1F6E5280
merge.incomingContentBackground#2ECC7140
merge.incomingHeaderBackground#2ECC7180
minimap.errorHighlight#FF3366
minimap.findMatchHighlight#2ECC7180
minimap.selectionHighlight#1F6E5280
minimap.warningHighlight#FFD700
panel.background#09041A
panel.border#1F6E52
panelTitle.activeBorder#2ECC71
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#9086B7
peekView.border#1F6E52
peekViewEditor.background#1A1333
peekViewEditor.matchHighlightBackground#2ECC7180
peekViewEditorGutter.background#1A1333
peekViewResult.background#09041A
peekViewResult.fileForeground#FFFFFF
peekViewResult.lineForeground#9086B7
peekViewResult.matchHighlightBackground#2ECC7180
peekViewResult.selectionBackground#1F6E52
peekViewResult.selectionForeground#FFFFFF
peekViewTitle.background#09041A
peekViewTitleDescription.foreground#9086B7
peekViewTitleLabel.foreground#FFFFFF
pickerGroup.border#1F6E52
pickerGroup.foreground#2ECC71
progressBar.background#2ECC71
scrollbar.shadow#000000
scrollbarSlider.activeBackground#1F6E5280
scrollbarSlider.background#1F6E5240
scrollbarSlider.hoverBackground#1F6E5260
selection.background#1F6E5240
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#1F6E5230
statusBarItem.hoverBackground#1A1333
statusBarItem.prominentBackground#06040D
statusBarItem.prominentHoverBackground#1A1333
tab.activeBackground#110A26
tab.activeBorder#2ECC71
tab.activeBorderTop#2ECC71
tab.activeForeground#FFFFFF
tab.border#06040D
tab.inactiveBackground#09041A
tab.inactiveForeground#9086B7
tab.unfocusedActiveBorder#155240
tab.unfocusedActiveBorderTop#155240
tab.unfocusedActiveForeground#9086B7
tab.unfocusedInactiveForeground#9086B7
terminal.ansiBlack#06040D
terminal.ansiBlue#2979FF
terminal.ansiBrightBlack#50447C
terminal.ansiBrightBlue#5C9AFF
terminal.ansiBrightCyan#72FFCF
terminal.ansiBrightGreen#2ECC71
terminal.ansiBrightMagenta#E040FB
terminal.ansiBrightRed#FF3366
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFD700
terminal.ansiCyan#72FFCF
terminal.ansiGreen#1F6E52
terminal.ansiMagenta#E040FB
terminal.ansiRed#FF2A4D
terminal.ansiWhite#D6D1EF
terminal.ansiYellow#FFD700
terminal.background#09041A
terminal.foreground#D6D1EF
terminal.selectionBackground#1F6E5230
terminalCursor.background#09041A
terminalCursor.foreground#2ECC71
textBlockQuote.background#1A1333
textBlockQuote.border#2ECC71
textCodeBlock.background#09041A
textLink.activeForeground#2ECC71
textLink.foreground#1F6E52
textPreformat.foreground#2ECC71
textSeparator.foreground#1F6E52
titleBar.activeBackground#06040D
titleBar.activeForeground#D6D1EF
titleBar.border#06040D
titleBar.inactiveBackground#09041A
titleBar.inactiveForeground#9086B7
tree.indentGuidesStroke#1F6E5240
walkThrough.embeddedEditorBackground#110A26
widget.shadow#00000080
window.activeBorder#1F6E52
window.inactiveBorder#155240

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#1A4A3A	italic
keyword, storage.type, storage.modifier	#2ECC71	—
keyword.operator	#FF3366	—
variable, string constant.other.placeholder	#D6D1EF	—
variable.other.property, meta.property-name, support.type.property-name	#72FFCF	—
entity.name.function, meta.function-call, support.function	#E040FB	bold
entity.name.class, entity.name.type.class, support.class, support.type	#FFD700	—
string, string.quoted	#72FFCF	—
constant.numeric, constant.language, constant.character	#FF3366	—
entity.name.tag, meta.tag	#2ECC71	—
entity.other.attribute-name	#72FFCF	—