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.
activityBar.background #212121 activityBar.border #21212160 activityBar.foreground #EEFFFF activityBarBadge.background #80CBC4 activityBarBadge.foreground #000000 badge.background #00000030 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #F8F8F2 — meta.function-call.js entity.name.function, meta.function-call.js support.function.dom.js, support.variable.dom.js, support.variable.property.js #66D9EF — support.variable.property.process #66D9EF — support.variable.object.process #66D9EF italic comment
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Everything Monokai — Material Darker + Monokai ST3
badge.foreground
#545454
breadcrumb.activeSelectionForeground #80CBC4
breadcrumb.background #212121
breadcrumb.focusForeground #EEFFFF
breadcrumb.foreground #616161
breadcrumbPicker.background #212121
button.background #61616150
debugToolBar.background #212121
diffEditor.insertedTextBackground #C3E88D15
diffEditor.removedTextBackground #FF537020
dropdown.background #212121
dropdown.border #FFFFFF10
editor.background #212121
editor.findMatchBackground #000000
editor.findMatchBorder #80CBC4
editor.findMatchHighlightBackground #00000050
editor.findMatchHighlightBorder #ffffff30
editor.foreground #EEFFFF
editor.lineHighlightBackground #00000050
editor.selectionBackground #61616150
editor.selectionHighlightBackground #FFCC0020
editorBracketMatch.background #212121
editorBracketMatch.border #ffffff50
editorCursor.foreground #f8f8f0
editorError.foreground #FF537070
editorGroup.border #00000030
editorGroupHeader.tabsBackground #212121
editorGutter.addedBackground #C3E88D60
editorGutter.deletedBackground #FF537060
editorGutter.modifiedBackground #82AAFF60
editorHoverWidget.background #212121
editorHoverWidget.border #FFFFFF10
editorIndentGuide.activeBackground #424242
editorIndentGuide.background #42424270
editorInfo.foreground #82AAFF70
editorLineNumber.activeForeground #616161
editorLineNumber.foreground #424242
editorLink.activeForeground #EEFFFF
editorMarkerNavigation.background #EEFFFF05
editorOverviewRuler.border #212121
editorOverviewRuler.errorForeground #FF537040
editorOverviewRuler.findMatchForeground #80CBC4
editorOverviewRuler.infoForeground #82AAFF40
editorOverviewRuler.warningForeground #FFCB6B40
editorRuler.foreground #424242
editorSuggestWidget.background #212121
editorSuggestWidget.border #FFFFFF10
editorSuggestWidget.foreground #EEFFFF
editorSuggestWidget.highlightForeground #80CBC4
editorSuggestWidget.selectedBackground #00000050
editorWarning.foreground #FFCB6B70
editorWhitespace.foreground #EEFFFF40
editorWidget.background #212121
editorWidget.resizeBorder #80CBC4
extensionButton.prominentBackground #C3E88D90
extensionButton.prominentHoverBackground #C3E88D
focusBorder #FFFFFF00
gitDecoration.conflictingResourceForeground #FFCB6B90
gitDecoration.deletedResourceForeground #FF537090
gitDecoration.ignoredResourceForeground #61616190
gitDecoration.modifiedResourceForeground #82AAFF90
gitDecoration.untrackedResourceForeground #C3E88D90
input.background #2B2B2B
input.border #FFFFFF10
input.foreground #EEFFFF
input.placeholderForeground #EEFFFF60
inputOption.activeBackground #EEFFFF30
inputOption.activeBorder #EEFFFF30
inputValidation.errorBorder #FF537050
inputValidation.infoBorder #82AAFF50
inputValidation.warningBorder #FFCB6B50
list.activeSelectionBackground #212121
list.activeSelectionForeground #80CBC4
list.focusBackground #EEFFFF20
list.focusForeground #EEFFFF
list.highlightForeground #80CBC4
list.hoverBackground #212121
list.hoverForeground #FFFFFF
list.inactiveSelectionBackground #00000030
list.inactiveSelectionForeground #80CBC4
listFilterWidget.background #00000030
listFilterWidget.noMatchesOutline #00000030
listFilterWidget.outline #00000030
menu.background #212121
menu.foreground #EEFFFF
menu.selectionBackground #00000050
menu.selectionBorder #00000030
menu.selectionForeground #80CBC4
menu.separatorBackground #EEFFFF
menubar.selectionBackground #00000030
menubar.selectionBorder #00000030
menubar.selectionForeground #80CBC4
notificationLink.foreground #80CBC4
notifications.background #212121
notifications.foreground #EEFFFF
panel.background #212121
panel.border #21212160
panelTitle.activeBorder #80CBC4
panelTitle.activeForeground #FFFFFF
panelTitle.inactiveForeground #EEFFFF
peekView.border #00000030
peekViewEditor.background #EEFFFF05
peekViewEditor.matchHighlightBackground #61616150
peekViewEditorGutter.background #EEFFFF05
peekViewResult.background #EEFFFF05
peekViewResult.matchHighlightBackground #61616150
peekViewResult.selectionBackground #61616170
peekViewTitle.background #EEFFFF05
peekViewTitleDescription.foreground #EEFFFF60
pickerGroup.foreground #80CBC4
progressBar.background #80CBC4
scrollbar.shadow #21212100
scrollbarSlider.activeBackground #80CBC4
scrollbarSlider.background #EEFFFF20
scrollbarSlider.hoverBackground #EEFFFF10
selection.background #80CBC4
settings.checkboxBackground #212121
settings.checkboxForeground #EEFFFF
settings.dropdownBackground #212121
settings.dropdownForeground #EEFFFF
settings.headerForeground #80CBC4
settings.modifiedItemIndicator #80CBC4
settings.numberInputBackground #212121
settings.numberInputForeground #EEFFFF
settings.textInputBackground #212121
settings.textInputForeground #EEFFFF
sideBar.background #212121
sideBar.border #21212160
sideBar.foreground #616161
sideBarSectionHeader.background #212121
sideBarSectionHeader.border #21212160
sideBarTitle.foreground #EEFFFF
statusBar.background #212121
statusBar.border #21212160
statusBar.debuggingBackground #C792EA
statusBar.debuggingForeground #ffffff
statusBar.foreground #616161
statusBar.noFolderBackground #212121
statusBarItem.hoverBackground #54545420
statusBarItem.remoteBackground #80CBC4
statusBarItem.remoteForeground #000000
tab.activeBorder #80CBC4
tab.activeForeground #FFFFFF
tab.activeModifiedBorder #616161
tab.border #212121
tab.inactiveBackground #212121
tab.inactiveForeground #616161
tab.unfocusedActiveBorder #545454
tab.unfocusedActiveForeground #EEFFFF
terminal.ansiBlack #454444
terminal.ansiBlue #52aed8
terminal.ansiBrightBlack #666565
terminal.ansiBrightBlue #80c7e7
terminal.ansiBrightCyan #a5e1e1
terminal.ansiBrightGreen #b1d3b0
terminal.ansiBrightMagenta #eb9deb
terminal.ansiBrightRed #ea99aa
terminal.ansiBrightWhite #e5e4e4
terminal.ansiBrightYellow #e7e698
terminal.ansiCyan #76b7bc
terminal.ansiGreen #99d798
terminal.ansiMagenta #e27de2
terminal.ansiRed #ed5e7b
terminal.ansiWhite #c1c0c0
terminal.ansiYellow #e2c264
terminalCursor.background #000000
terminalCursor.foreground #f8f8f0
textLink.activeForeground #EEFFFF
textLink.foreground #80CBC4
titleBar.activeBackground #212121
titleBar.activeForeground #EEFFFF
titleBar.border #21212160
titleBar.inactiveBackground #212121
titleBar.inactiveForeground #616161
tree.indentGuidesStroke #424242
widget.shadow #00000030 punctuation.definition.template-expression, punctuation.section.embedded.coffee #F92672 —
meta.template.expression #F8F8F2 —
constant.language #AE81FF —
constant.character, constant.other #AE81FF —
storage.type #66D9EF italic
entity.name.type, entity.name.class —
entity.other.inherited-class #A6E22E italic underline
entity.name.function #A6E22E
variable.parameter #FD971F italic
entity.name.tag, meta.tag.sgml.doctype.html #F92672
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 #FD971F italic
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css #f8f8f2
keyword.var.go #66D9EF italic
meta.method-call.php entity.name.function #66D9EF
storage.type.class.jsdoc, variable.other.jsdoc #75715E —
string.quoted.docstring.multi.python #75715E —
entity.name.type.class.python #a6e22eff —
meta.class.python support.type.python #a6e22eff —
meta.function-call.generic.python #66d9efff —
punctuation.definition.decorator.python #F92672 —
entity.name.function.decorator.python #66D9EF —
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...
main*
Everything Monokai | Coding Theme Button.tsx
31
~/my-project
$
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 } !` ;
}