Skip to main content
Home Theme VS Code Monokai Night Z Monokai Night Z is a fork of Monokai Night theme by Fabio Spampinato
Monokai Night Z | Coding Theme
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.activeBorder #0f0f0f activityBar.background #21252b activityBar.foreground #D7DAE0 activityBar.inactiveForeground #888888 activityBarBadge.background #528bff activityBarBadge.foreground #F8FAFD 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 Blue
badge.background #363636
badge.foreground #dddddd
breadcrumb.activeSelectionForeground #dddddd
breadcrumb.background #161616
breadcrumb.focusForeground #dddddd
breadcrumb.foreground #666666
breadcrumbPicker.background #363636
button.background #0e639c
button.foreground #eeeeee
button.hoverBackground #1177bb
debugExceptionWidget.background #363636
debugExceptionWidget.border #666666
debugToolBar.background #363636
debugToolBar.border #363636
descriptionForeground #dddddd
diffEditor.border #000000
diffEditor.insertedTextBackground #007e9733
diffEditor.removedTextBackground #c4265e44
dropdown.background #1d1f23
dropdown.border #181A1F
dropdown.foreground #dddddd
dropdown.listBackground #363636
editor.background #21252b
editor.findMatchBackground #42557B
editor.findMatchBorder #00000000
editor.findMatchHighlightBackground #314365
editor.findMatchHighlightBorder #00000000
editor.findRangeHighlightBackground #f2f2f20c
editor.focusedStackFrameHighlightBackground #b1b01124
editor.foreground #F8F8F2
editor.hoverHighlightBackground #363636
editor.inactiveSelectionBackground #464646
editor.lineHighlightBackground #2c313a
editor.lineHighlightBorder #292929
editor.rangeHighlightBackground #292929
editor.rangeHighlightBorder #292929
editor.selectionBackground #3E4451
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 #f8f8f0
editorError.border #00000000
editorError.foreground #c24038
editorGroup.background #181A1F
editorGroup.border #181A1F
editorGroup.dropBackground #ffffff12
editorGroup.emptyBackground #1f1f1f
editorGroup.focusedEmptyBorder #00000000
editorGroupHeader.noTabsBackground #161616
editorGroupHeader.tabsBackground #21252B
editorGroupHeader.tabsBorder #161616
editorGutter.addedBackground #86b42b
editorGutter.deletedBackground #c4265e
editorGutter.modifiedBackground #007acc
editorHint.foreground #007acc
editorHoverWidget.background #21252B
editorHoverWidget.border #181A1F
editorIndentGuide.activeBackground #363636
editorIndentGuide.background #3B4048
editorInfo.foreground #007acc
editorLineNumber.activeForeground #AAAAAA
editorLineNumber.foreground #495162
editorLink.activeForeground #66d9ef
editorMarkerNavigation.background #363636
editorMarkerNavigationError.background #fe413f
editorMarkerNavigationInfo.background #007acc
editorMarkerNavigationWarning.background #b1b011
editorOverviewRuler.addedForeground #86b42b
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 #484848
editorSuggestWidget.background #21252B
editorSuggestWidget.border #181A1F
editorSuggestWidget.foreground #dddddd
editorSuggestWidget.highlightForeground #dddddd
editorSuggestWidget.selectedBackground #2c313a
editorUnnecessaryCode.border #00000000
editorWarning.border #00000000
editorWarning.foreground #b1b011
editorWhitespace.foreground #3B4048
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 #1d1f23
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 #d7dae0
list.dropBackground #363636
list.errorForeground #fe413f
list.focusBackground #383E4A
list.focusForeground #dddddd
list.highlightForeground #C5C5C5
list.hoverBackground #ffffff10
list.hoverForeground #dddddd
list.inactiveSelectionBackground #ffffff24
list.inactiveSelectionForeground #d7dae0
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
notification.background #21252b
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 #0c0d0f
scrollbarSlider.activeBackground #747D9180
scrollbarSlider.background #4E566680
scrollbarSlider.hoverBackground #5A637580
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 #2c3038
sideBar.dropBackground #262626
sideBar.foreground #dddddd
sideBarSectionHeader.background #21252b
sideBarSectionHeader.border #262626
sideBarSectionHeader.foreground #dddddd
sideBarTitle.foreground #dddddd
statusBar.background #2f5691
statusBar.debuggingBackground #21252B
statusBar.debuggingBorder #000000
statusBar.debuggingForeground #dddddd
statusBar.foreground #f8f8f2
statusBar.noFolderBackground #21252B
statusBar.noFolderBorder #000000
statusBar.noFolderForeground #dddddd
statusBarItem.activeBackground #ffffff16
statusBarItem.hoverBackground #2c313a
statusBarItem.prominentBackground #363636
statusBarItem.prominentHoverBackground #ffffff40
tab.activeBackground #16191d
tab.activeBorder #101010
tab.activeBorderTop #ffffff
tab.activeForeground #dddddd
tab.activeModifiedBorder #dddddd
tab.border #181A1F
tab.hoverBackground #1f1f1f
tab.hoverBorder #161616
tab.inactiveBackground #2c3038
tab.inactiveForeground #777777
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 #282c34
titleBar.activeForeground #9da5b4
titleBar.inactiveBackground #282C34
titleBar.inactiveForeground #6B717D
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 } !` ;
}