Skip to main content
Home Theme VS Code Monokai Night Z Monokai Night Z is a fork of Monokai Night theme by Fabio Spampinato
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.activeBackground #0f0f0f activityBar.activeBorder #0f0f0f activityBar.background #0f0f0f activityBar.border #000000 activityBar.foreground #dddddd activityBar.inactiveForeground #888888 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle meta.embedded, source.groovy.embedded #F8F8F2 — comment #75715E — string #E6DB74 — punctuation.definition.template-expression, punctuation.section.embedded #F92672 — meta.template.expression
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Monokai Night Z — Monokai Night Z Dark
activityBarBadge.background
#007acc
activityBarBadge.foreground #dddddd
badge.background #363636
badge.foreground #dddddd
breadcrumb.activeSelectionForeground #dddddd
breadcrumb.background #161616
breadcrumb.focusForeground #dddddd
breadcrumb.foreground #666666
breadcrumbPicker.background #363636
button.background #363636
button.foreground #dddddd
button.hoverBackground #464646
debugExceptionWidget.background #363636
debugExceptionWidget.border #666666
debugToolBar.background #363636
debugToolBar.border #363636
descriptionForeground #dddddd
diffEditor.border #000000
diffEditor.insertedTextBackground #86b42b44
diffEditor.removedTextBackground #c4265e44
dropdown.background #363636
dropdown.border #363636
dropdown.foreground #dddddd
dropdown.listBackground #363636
editor.background #1f1f1f
editor.findMatchBackground #464646
editor.findMatchBorder #00000000
editor.findMatchHighlightBackground #363636
editor.findMatchHighlightBorder #00000000
editor.findRangeHighlightBackground #f2f2f20c
editor.focusedStackFrameHighlightBackground #b1b01124
editor.foreground #dddddd
editor.hoverHighlightBackground #363636
editor.inactiveSelectionBackground #464646
editor.lineHighlightBackground #292929
editor.lineHighlightBorder #292929
editor.rangeHighlightBackground #292929
editor.rangeHighlightBorder #292929
editor.selectionBackground #464646
editor.selectionForeground #dddddd
editor.selectionHighlightBackground #363636
editor.selectionHighlightBorder #00000000
editor.snippetFinalTabstopHighlightBackground #ffffff20
editor.snippetFinalTabstopHighlightBorder #00000000
editor.snippetTabstopHighlightBackground #ffffff20
editor.snippetTabstopHighlightBorder #00000000
editor.stackFrameHighlightBackground #b1b01124
editor.wordHighlightBackground #363636
editor.wordHighlightBorder #00000000
editor.wordHighlightStrongBackground #363636
editor.wordHighlightStrongBorder #00000000
editorBracketMatch.background #363636
editorBracketMatch.border #666666
editorCodeLens.foreground #666666
editorCursor.background #1f1f1f
editorCursor.foreground #f2f2f2
editorError.border #00000000
editorError.foreground #fe413f
editorGroup.border #161616
editorGroup.dropBackground #ffffff12
editorGroup.emptyBackground #1f1f1f
editorGroup.focusedEmptyBorder #00000000
editorGroupHeader.noTabsBackground #161616
editorGroupHeader.tabsBackground #1f1f1f
editorGroupHeader.tabsBorder #161616
editorGutter.addedBackground #86b42b
editorGutter.background #1f1f1f
editorGutter.deletedBackground #c4265e
editorGutter.modifiedBackground #007acc
editorHint.border #00000000
editorHint.foreground #007acc
editorHoverWidget.background #363636
editorHoverWidget.border #666666
editorIndentGuide.activeBackground #363636
editorIndentGuide.background #363636
editorInfo.border #00000000
editorInfo.foreground #007acc
editorLineNumber.activeForeground #666666
editorLineNumber.foreground #666666
editorLink.activeForeground #66d9ef
editorMarkerNavigation.background #363636
editorMarkerNavigationError.background #fe413f
editorMarkerNavigationInfo.background #007acc
editorMarkerNavigationWarning.background #b1b011
editorOverviewRuler.addedForeground #86b42b
editorOverviewRuler.border #00000000
editorOverviewRuler.bracketMatchForeground #666666
editorOverviewRuler.currentContentForeground #ae81ff
editorOverviewRuler.deletedForeground #c4265e
editorOverviewRuler.errorForeground #fe413f
editorOverviewRuler.findMatchForeground #666666
editorOverviewRuler.incomingContentForeground #66d9ef
editorOverviewRuler.infoForeground #007acc
editorOverviewRuler.modifiedForeground #007acc
editorOverviewRuler.rangeHighlightForeground #007acc
editorOverviewRuler.warningForeground #b1b011
editorOverviewRuler.wordHighlightForeground #666666
editorOverviewRuler.wordHighlightStrongForeground #666666
editorPane.background #161616
editorRuler.foreground #363636
editorSuggestWidget.background #262626
editorSuggestWidget.border #363636
editorSuggestWidget.foreground #dddddd
editorSuggestWidget.highlightForeground #dddddd
editorSuggestWidget.selectedBackground #363636
editorUnnecessaryCode.border #00000000
editorWarning.border #00000000
editorWarning.foreground #b1b011
editorWhitespace.foreground #363636
editorWidget.background #363636
editorWidget.border #666666
editorWidget.resizeBorder #666666
errorForeground #dddddd
extensionButton.prominentBackground #363636
extensionButton.prominentForeground #dddddd
extensionButton.prominentHoverBackground #464646
focusBorder #FFFFFF80
foreground #dddddd
gitDecoration.addedResourceForeground #007acc
gitDecoration.conflictingResourceForeground #fe413f
gitDecoration.deletedResourceForeground #c4265e
gitDecoration.ignoredResourceForeground #777777
gitDecoration.modifiedResourceForeground #d6d629
gitDecoration.submoduleResourceForeground #2bb3b4
gitDecoration.untrackedResourceForeground #69de3e
input.background #363636
input.border #363636
input.foreground #dddddd
input.placeholderForeground #888888
inputOption.activeBackground #464646
inputOption.activeBorder #464646
inputValidation.errorBackground #fe413f
inputValidation.errorBorder #fc5b58
inputValidation.errorForeground #dddddd
inputValidation.infoBackground #007acc
inputValidation.infoBorder #008ae5
inputValidation.infoForeground #dddddd
inputValidation.warningBackground #b1b011
inputValidation.warningBorder #c9c914
inputValidation.warningForeground #dddddd
list.activeSelectionBackground #ffffff24
list.activeSelectionForeground #dddddd
list.dropBackground #363636
list.errorForeground #fe413f
list.focusBackground #1f1f1f
list.focusForeground #dddddd
list.highlightForeground #dddddd
list.hoverBackground #ffffff24
list.hoverForeground #dddddd
list.inactiveSelectionBackground #ffffff24
list.inactiveSelectionForeground #dddddd
list.invalidItemForeground #fe413f
list.warningForeground #ffa600
menu.background #363636
menu.foreground #dddddd
menu.selectionBackground #262626
menu.selectionBorder #00000000
menu.selectionForeground #dddddd
menu.separatorBackground #666666
menubar.selectionBackground #363636
menubar.selectionBorder #00000000
menubar.selectionForeground #dddddd
merge.border #000000aa
merge.currentContentBackground #ae81ff44
merge.currentHeaderBackground #ae81ff88
merge.incomingContentBackground #66d9ef44
merge.incomingHeaderBackground #66d9ef88
minimap.findMatchHighlight #b1b011
notificationCenter.border #464646
notificationCenterHeader.background #464646
notificationCenterHeader.foreground #dddddd
notificationLink.foreground #66d9ef
notifications.background #363636
notifications.border #464646
notifications.foreground #dddddd
notificationToast.border #363636
panel.background #262626
panel.border #161616
panelTitle.activeBorder #00000000
panelTitle.activeForeground #dddddd
panelTitle.inactiveForeground #666666
peekView.border #666666
peekViewEditor.background #262626
peekViewEditor.matchHighlightBackground #464646
peekViewEditor.matchHighlightBorder #00000000
peekViewEditorGutter.background #262626
peekViewResult.background #262626
peekViewResult.fileForeground #dddddd
peekViewResult.lineForeground #dddddd
peekViewResult.matchHighlightBackground #464646
peekViewResult.selectionBackground #464646
peekViewResult.selectionForeground #dddddd
peekViewTitle.background #262626
peekViewTitleDescription.foreground #dddddd
peekViewTitleLabel.foreground #dddddd
pickerGroup.border #262626
pickerGroup.foreground #666666
progressBar.background #363636
scrollbar.shadow #00000000
scrollbarSlider.activeBackground #f2f2f218
scrollbarSlider.background #f2f2f212
scrollbarSlider.hoverBackground #f2f2f224
selection.background #aaaaaa
settings.checkboxBackground #363636
settings.checkboxBorder #363636
settings.checkboxForeground #dddddd
settings.dropdownBackground #363636
settings.dropdownBorder #363636
settings.dropdownForeground #dddddd
settings.dropdownListBorder #666666
settings.headerForeground #dddddd
settings.numberInputBackground #363636
settings.numberInputBorder #363636
settings.numberInputForeground #dddddd
settings.textInputBackground #363636
settings.textInputBorder #363636
settings.textInputForeground #dddddd
sideBar.background #161616
sideBar.border #000000
sideBar.dropBackground #262626
sideBar.foreground #dddddd
sideBarSectionHeader.background #262626
sideBarSectionHeader.border #262626
sideBarSectionHeader.foreground #dddddd
sideBarTitle.foreground #dddddd
statusBar.background #161616
statusBar.border #000000
statusBar.debuggingBackground #007acc
statusBar.debuggingBorder #000000
statusBar.debuggingForeground #dddddd
statusBar.foreground #dddddd
statusBar.noFolderBackground #000000
statusBar.noFolderBorder #000000
statusBar.noFolderForeground #dddddd
statusBarItem.activeBackground #ffffff16
statusBarItem.hoverBackground #ffffff20
statusBarItem.prominentBackground #363636
statusBarItem.prominentHoverBackground #ffffff40
tab.activeBackground #101010
tab.activeBorder #101010
tab.activeBorderTop #ffffff
tab.activeForeground #dddddd
tab.activeModifiedBorder #dddddd
tab.border #161616
tab.hoverBackground #1f1f1f
tab.hoverBorder #161616
tab.inactiveBackground #1f1f1f
tab.inactiveForeground #666666
tab.inactiveModifiedBorder #666666
tab.unfocusedActiveBackground #1f1f1f
tab.unfocusedActiveBorder #1f1f1f
tab.unfocusedActiveBorderTop #00000000
tab.unfocusedActiveForeground #dddddd
tab.unfocusedActiveModifiedBorder #dddddd
tab.unfocusedHoverBackground #1f1f1f
tab.unfocusedHoverBorder #161616
tab.unfocusedInactiveForeground #666666
tab.unfocusedInactiveModifiedBorder #666666
terminal.ansiBlack #333333
terminal.ansiBlue #6a7ec8
terminal.ansiBrightBlack #666666
terminal.ansiBrightBlue #819aff
terminal.ansiBrightCyan #66d9ef
terminal.ansiBrightGreen #a6e22e
terminal.ansiBrightMagenta #ae81ff
terminal.ansiBrightRed #f92672
terminal.ansiBrightWhite #f8f8f2
terminal.ansiBrightYellow #e2e22e
terminal.ansiCyan #56adbc
terminal.ansiGreen #86b42b
terminal.ansiMagenta #8c6bc8
terminal.ansiRed #c4265e
terminal.ansiWhite #e3e3dd
terminal.ansiYellow #b3b42b
terminal.background #262626
terminal.border #161616
terminal.foreground #dddddd
terminal.selectionBackground #ffffff24
terminalCursor.background #262626
terminalCursor.foreground #f2f2f2
textBlockQuote.background #363636
textBlockQuote.border #666666
textCodeBlock.background #161616
textLink.activeForeground #008ae5
textLink.foreground #007acc
textPreformat.foreground #e6db74
textSeparator.foreground #666666
titleBar.activeBackground #161616
titleBar.activeForeground #dddddd
titleBar.border #000000
titleBar.inactiveBackground #161616
titleBar.inactiveForeground #666666
walkThrough.embeddedEditorBackground #0f0f0f
widget.shadow #00000088 constant.language #AE81FF —
constant.character, constant.other #AE81FF —
storage.type #66D9EF italic
entity.name.type, entity.name.class #e19ffb
entity.other.inherited-class #66D9EF italic
entity.name.type.class, entity.name.class #66D9EF italic
entity.name.function #A6E22E
variable.parameter #FD971F italic
entity.other.attribute-name #A6E22E
support.type, support.class #66D9EF italic
invalid.deprecated #F8F8F0 —
meta.structure.dictionary.json string.quoted.double.json #CFCFC2 —
meta.diff, meta.diff.header #75715E —
constant.numeric.line-number.find-in-files - match #AE81FFA0 —
entity.name.filename.find-in-files #E6DB74 —
markup.bold, markup.italic #66D9EF —
markup.heading.setext #A6E22E
token.error-token #f44747 —
token.debug-token #b267e6 —
variable.language, keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special #a19cbf —
meta.function-call.generic.python #709ff0 —
export interface User {
id : string ;
name : string ;
role : "admin" | "member" ;
tags : string [];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser ( id : string ) : Promise < User | null > {
if ( ! id ) {
return null ;
}
const response = await fetch ( `/api/users/ ${ id } ` , {
method: "GET" ,
headers: { Accept: "application/json" },
});
if ( ! response . ok ) {
throw new Error ( `HTTP ${ response.status } ` );
}
return ( await response . json ()) as User ;
}
function greet ( user : User ) : string {
// Simple greeting function that uses the user's name
return `Hello, ${ user.name } !` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
fetchUser 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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*
Button.tsx
31
$
export interface User {
id : string ;
name : string ;
role : "admin" | "member" ;
tags : string [];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser ( id : string ) : Promise < User | null > {
if ( ! id ) {
return null ;
}
const response = await fetch ( `/api/users/ ${ id } ` , {
method: "GET" ,
headers: { Accept: "application/json" },
});
if ( ! response . ok ) {
throw new Error ( `HTTP ${ response.status } ` );
}
return ( await response . json ()) as User ;
}
function greet ( user : User ) : string {
// Simple greeting function that uses the user's name
return `Hello, ${ user.name } !` ;
}
Monokai Night Z | Coding Theme