Skip to main content
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
.foreground #6394bf actionBar.toggledBackground #383a49 activityBar.activeBorder #4d9375 activityBar.background #000 activityBar.border #191919 activityBar.foreground #dbd7cacc tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment #7E8E91 — — #F8F8F2 — meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python #F8F8F2 — string #E6DB74 — punctuation.definition.template-expression, punctuation.section.embedded
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Monokai Deep Dark — Monokai deep dark
activityBarBadge.background
#4d9375
activityBarBadge.foreground #000
badge.background #4d9375
badge.foreground #000
breadcrumb.activeSelectionForeground #eeeeee18
breadcrumb.background #121212
breadcrumb.focusForeground #dbd7cacc
breadcrumb.foreground #959da5
breadcrumbPicker.background #000
button.background #4d9375
button.foreground #000
button.hoverBackground #4d9375
checkbox.background #121212
checkbox.border #6B6B6B
debugToolBar.background #000
diffEditor.insertedTextBackground #4b661680
diffEditor.removedTextBackground #90274A70
editor.background #000
editor.foreground #F8F8F2
editor.lineHighlightBackground #303030
editor.selectionBackground #403d3d
editor.selectionHighlightBackground #575b6180
editor.wordHighlightBackground #4a4a7680
editor.wordHighlightStrongBackground #6a6a9680
editorCursor.foreground #f8f8f0
editorGroupHeader.tabsBackground #000
editorGroupHeader.tabsBorder #191919
editorHoverWidget.background #131010
editorIndentGuide.activeBackground1 #767771
editorIndentGuide.background1 #464741
editorInlayHint.background #00000000
editorInlayHint.foreground #444444
editorLineNumber.activeForeground #c2c2bf
editorLineNumber.foreground #90908a
editorStickyScroll.background #121212
editorStickyScrollHover.background #121212
editorSuggestWidget.background #000
editorSuggestWidget.selectedBackground #293739
editorWhitespace.foreground #464741
editorWidget.background #000
focusBorder #00000000
foreground #dbd7cacc
input.background #121212
input.border #191919
input.foreground #dbd7cacc
input.placeholderForeground #dedcd590
inputOption.activeBackground #dedcd550
list.activeSelectionBackground #121212
list.activeSelectionForeground #f8f8f2
list.activeSelectionIconForeground #FFF
list.dropBackground #383B3D
list.focusBackground #121212
list.highlightForeground #4d9375
list.hoverBackground #121212
list.hoverForeground #dbd7cacc
list.inactiveFocusBackground #000
list.inactiveSelectionBackground #121212
list.inactiveSelectionForeground #dbd7cacc
menu.background #252526
menu.border #454545
menu.foreground #CCCCCC
menu.separatorBackground #191919
minimap.selectionHighlight #303030
notificationCenterHeader.background #000
notificationCenterHeader.foreground #959da5
notifications.background #000
notifications.border #191919
notifications.foreground #dbd7cacc
notificationsErrorIcon.foreground #cb7676
notificationsWarningIcon.foreground #d4976c
panel.background #000
panel.border #191919
panelInput.border #2f363d
panelTitle.activeBorder #4d9375
panelTitle.inactiveForeground #959da5
peekViewEditor.background #000
peekViewResult.background #000
ports.iconRunningProcessForeground #369432
sideBar.background #000
sideBar.border #191919
sideBar.foreground #bfbaaa
sideBarSectionHeader.background #000
sideBarSectionHeader.border #191919
sideBarSectionHeader.foreground #dbd7cacc
sideBarTitle.foreground #dbd7cacc
statusBar.background #000
statusBar.border #191919
statusBar.debuggingBackground #121212
statusBar.debuggingForeground #bfbaaa
statusBar.foreground #bfbaaa
statusBar.noFolderBackground #000
statusBarItem.remoteBackground #16825D
statusBarItem.remoteForeground #FFF
tab.activeBackground #000
tab.activeBorder #191919
tab.activeBorderTop #dedcd590
tab.activeForeground #dbd7cacc
tab.border #191919
tab.hoverBackground #121212
tab.inactiveBackground #000
tab.inactiveForeground #959da5
tab.lastPinnedBorder #ccc3
tab.unfocusedActiveBorder #191919
tab.unfocusedActiveBorderTop #191919
tab.unfocusedHoverBackground #000
terminal.ansiBlack #393a34
terminal.ansiBlue #6A7EC8
terminal.ansiBrightBlack #777777
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
textLink.activeForeground #4d9375
textLink.foreground #4d9375
titleBar.activeBackground #000
titleBar.activeForeground #bfbaaa
titleBar.border #121212
titleBar.inactiveBackground #000
titleBar.inactiveForeground #959da5
welcomePage.buttonBackground #bda
welcomePage.buttonHoverBackground #444d56
widget.border #303031 meta.template.expression #F8F8F2 —
constant.language #AE81FF —
constant.character, constant.other #AE81FF —
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution #A6E22E underline
entity.other.inherited-class #A6E22E italic underline
entity.name.function #A6E22E
variable.parameter #FD971F
entity.other.attribute-name #A6E22E
support.type, support.class #66D9EF
invalid.deprecated #F44747 —
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 bold
markup.heading.markdown — bold
markup.quote.markdown #75715E italic
markup.bold.markdown — bold
string.other.link.title.markdown,string.other.link.description.markdown #AE81FF —
markup.underline.link.markdown,markup.underline.link.image.markdown #E6DB74 —
markup.italic.markdown — italic
markup.strikethrough — strikethrough
markup.list.unnumbered.markdown, markup.list.numbered.markdown #f8f8f2 —
punctuation.definition.list.begin.markdown #A6E22E —
token.error-token #f44747 —
token.debug-token #b267e6 —
variable.language #FD971F —
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 Deep Dark | Coding Theme