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.activeBorder #00b2dea2 activityBar.background #fff activityBar.border #e1e4e8 activityBar.foreground #2f363d activityBar.inactiveForeground #959da5 activityBarBadge.background #00b2dea2 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment, string.comment #9f9f9f italic comments.block.preprocessor #9f9f9f comment.block.documentation, comment.documentation #50B100 bold constant, entity.name.constant, variable.other.constant, variable.language #6c62e0 — entity, entity.name
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
monokai-light — Monokai Light
activityBarBadge.foreground
#fff
badge.background #dbedff
badge.foreground #0399be
breadcrumb.activeSelectionForeground #586069
breadcrumb.focusForeground #2f363d
breadcrumb.foreground #6a737d
breadcrumbPicker.background #fafbfc
button.background #0399be
button.foreground #fff
button.hoverBackground #0391b4
button.secondaryBackground #e1e4e8
button.secondaryForeground #1b1f23
button.secondaryHoverBackground #d1d5da
checkbox.background #fafbfc
checkbox.border #d1d5da
debugToolBar.background #fff
descriptionForeground #6a737d
diffEditor.insertedTextBackground #50b10018
diffEditor.removedTextBackground #f9267328
dropdown.background #fafbfc
dropdown.border #e1e4e8
dropdown.foreground #2f363d
dropdown.listBackground #fff
editor.background #fff
editor.findMatchBackground #ffdf5d
editor.findMatchHighlightBackground #ffdf5d66
editor.focusedStackFrameHighlightBackground #28a74525
editor.foldBackground #d1d5da11
editor.foreground #24292e
editor.inactiveSelectionBackground #0366d611
editor.lineHighlightBackground #f6f8fa
editor.linkedEditingBackground #0366d611
editor.selectionBackground #0366d625
editor.selectionHighlightBackground #50b10018
editor.selectionHighlightBorder #34d05800
editor.stackFrameHighlightBackground #ffd33d33
editor.wordHighlightBackground #34d05800
editor.wordHighlightBorder #50b1005d
editor.wordHighlightStrongBackground #34d05800
editor.wordHighlightStrongBorder #50b100ad
editorBracketHighlight.foreground1 #00B0DE
editorBracketHighlight.foreground2 #F25A00
editorBracketHighlight.foreground3 #6c62e0
editorBracketHighlight.foreground4 #00B0DE
editorBracketHighlight.foreground5 #F25A00
editorBracketHighlight.foreground6 #6c62e0
editorBracketMatch.background #50b10018
editorBracketMatch.border #34d05800
editorError.foreground #f8004a
editorGroup.border #e1e4e8
editorGroupHeader.tabsBackground #f6f8fa
editorGroupHeader.tabsBorder #e1e4e8
editorGutter.addedBackground #50b1009d
editorGutter.deletedBackground #f8004a98
editorGutter.modifiedBackground #00b2dea2
editorIndentGuide.activeBackground #d7dbe0
editorIndentGuide.background #eff2f6
editorLineNumber.activeForeground #24292e
editorLineNumber.foreground #1b1f234d
editorLink.activeForeground #0399be
editorOverviewRuler.border #fff
editorWarning.foreground #F25A00
editorWhitespace.foreground #d1d5da
editorWidget.background #f6f8fa
errorForeground #f8004a
focusBorder #00b2dea2
foreground #444d56
gitDecoration.addedResourceForeground #50B100
gitDecoration.conflictingResourceForeground #F25A00
gitDecoration.deletedResourceForeground #f8004a
gitDecoration.ignoredResourceForeground #959da5
gitDecoration.modifiedResourceForeground #00B0DE
gitDecoration.submoduleResourceForeground #959da5
gitDecoration.untrackedResourceForeground #50B100
input.background #fafbfc
input.border #e1e4e8
input.foreground #2f363d
input.placeholderForeground #959da5
list.activeSelectionBackground #e2e5e9
list.activeSelectionForeground #2f363d
list.focusBackground #ebf0f4
list.focusOutline #cce5ff
list.hoverBackground #ebf0f4
list.hoverForeground #2f363d
list.inactiveFocusBackground #dbedff
list.inactiveSelectionBackground #e8eaed
list.inactiveSelectionForeground #2f363d
menu.selectionForeground #0399be
menubar.selectionForeground #0399be
notificationCenterHeader.background #e1e4e8
notificationCenterHeader.foreground #6a737d
notifications.background #fafbfc
notifications.border #e1e4e8
notifications.foreground #2f363d
notificationsErrorIcon.foreground #f8004a
notificationsInfoIcon.foreground #0399be
notificationsWarningIcon.foreground #F25A00
panel.background #f6f8fa
panel.border #e1e4e8
panelInput.border #e1e4e8
panelTitle.activeBorder #00b2dea2
panelTitle.activeForeground #2f363d
panelTitle.inactiveForeground #6a737d
pickerGroup.border #e1e4e8
pickerGroup.foreground #2f363d
progressBar.background #0399be
quickInput.background #fafbfc
quickInput.foreground #2f363d
scrollbar.shadow #6a737d33
scrollbarSlider.activeBackground #959da588
scrollbarSlider.background #959da533
scrollbarSlider.hoverBackground #959da544
settings.headerForeground #2f363d
settings.modifiedItemIndicator #00B0DE
sideBar.background #f6f8fa
sideBar.border #e1e4e8
sideBar.foreground #586069
sideBarSectionHeader.background #f6f8fa
sideBarSectionHeader.border #e1e4e8
sideBarSectionHeader.foreground #2f363d
sideBarTitle.foreground #2f363d
statusBar.background #fff
statusBar.border #e1e4e8
statusBar.debuggingBackground #0399be
statusBar.debuggingForeground #fff
statusBar.foreground #586069
statusBar.noFolderBackground #fff
statusBarItem.prominentBackground #e8eaed
symbolIcon.booleanForeground #6c62e0
symbolIcon.classForeground #F92672
symbolIcon.constantForeground #6c62e0
symbolIcon.fieldForeground #00B0DE
symbolIcon.functionForeground #F25A00
symbolIcon.interfaceForeground #00B0DE
symbolIcon.methodForeground #F25A00
symbolIcon.stringForeground #FF9600
symbolIcon.structForeground #50B100
symbolIcon.variableForeground #6c62e0
tab.activeBackground #fff
tab.activeBorder #fff
tab.activeBorderTop #00b2dea2
tab.activeForeground #2f363d
tab.border #e1e4e8
tab.hoverBackground #fff
tab.inactiveBackground #f6f8fa
tab.inactiveForeground #6a737d
tab.unfocusedActiveBorder #fff
tab.unfocusedActiveBorderTop #e1e4e8
tab.unfocusedHoverBackground #fff
terminal.ansiBlack #24292e
terminal.ansiBlue #00B0DE
terminal.ansiBrightBlack #959da5
terminal.ansiBrightBlue #00B0DE
terminal.ansiBrightCyan #3192aa
terminal.ansiBrightGreen #50B100
terminal.ansiBrightMagenta #6c62e0
terminal.ansiBrightRed #F92672
terminal.ansiBrightWhite #d1d5da
terminal.ansiBrightYellow #FF9600
terminal.ansiCyan #1b7c83
terminal.ansiGreen #50B100
terminal.ansiMagenta #6c62e0
terminal.ansiRed #F92672
terminal.ansiWhite #6a737d
terminal.ansiYellow #FF9600
terminal.foreground #586069
terminal.tab.activeBorder #00b2dea2
terminalCursor.background #d1d5da
textBlockQuote.background #fafbfc
textBlockQuote.border #e1e4e8
textCodeBlock.background #f6f8fa
textLink.activeForeground #0399be
textLink.foreground #0399be
textPreformat.foreground #586069
textSeparator.foreground #d1d5da
titleBar.activeBackground #fff
titleBar.activeForeground #2f363d
titleBar.border #e1e4e8
titleBar.inactiveBackground #f6f8fa
titleBar.inactiveForeground #6a737d
tree.indentGuidesStroke #e1e4e8 variable.parameter.function #24292e
storage.type.function.arrow —
storage, storage.type #F92672 —
storage.modifier.package, storage.modifier.import, storage.type.java #24292e
string, punctuation.definition.string, string punctuation.section.embedded source #FF9600 —
support.type.property-name — italic
meta.property-name #00B0DE —
invalid.broken #000000 italic
invalid.deprecated #000000 italic
invalid.illegal #000000 italic
invalid.unimplemented #000000 italic
carriage-return #fafbfc italic underline
message.error #000000 italic
source.regexp, string.regexp #F25A00 —
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repetition #F25A00 —
string.regexp constant.character.escape #00B0DE bold
meta.module-reference #00B0DE —
punctuation.definition.list.begin.markdown #F25A00 —
markup.heading, markup.heading entity.name #F92672 bold
markup.italic #24292e italic
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted #F92672 —
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted #50B100 —
markup.changed, punctuation.definition.changed #F25A00 —
meta.diff.range #6c62e0 bold
meta.separator #00B0DE bold
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote #586069 —
brackethighlighter.unmatched #b31d28 —
constant.other.reference.link, string.other.link #00B0DE underline
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
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*
Button.tsx
fetchUser
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 }!` ;
}
monokai-light | Coding Theme