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.activeBackground #302721 activityBar.activeBorder #37B390 activityBar.background #302721 activityBar.border #241D1A50 activityBar.dropBorder #241D1A activityBar.foreground #c9d5d0 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #7A655E italic string, string.template #84D4BC — constant.numeric, constant.language, constant.other #E5B088 — keyword, storage.type, storage.modifier #37B390 — entity.name.tag.jsx, entity.name.tag.tsx, punctuation.definition.tag
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Mint Chocolate — Mint Chocolate
activityBar.inactiveForeground
#7A655E
activityBarBadge.background #37B390
activityBarBadge.foreground #302721
badge.background #37B390
badge.foreground #302721
banner.background #241D1A
banner.foreground #c9d5d0
banner.iconForeground #7A655E
breadcrumb.activeSelectionForeground #37B390
breadcrumb.background #302721
breadcrumb.focusForeground #7A655E
breadcrumb.foreground #6E6A86
breadcrumbPicker.background #241D1A
button.background #37B390
button.foreground #302721
button.hoverBackground #45C4A0
button.secondaryBackground #241D1A
button.secondaryForeground #c9d5d0
button.secondaryHoverBackground #4D3C33
charts.blue #66CFB9
charts.foreground #c9d5d0
charts.green #37B390
charts.lines #7A655E
charts.orange #E5B088
charts.purple #CE8179
charts.red #E67A73
charts.yellow #f6c177
editor.background #302721
editor.findMatchBackground #E5B08860
editor.findMatchHighlightBackground #E5B08830
editor.findRangeHighlightBackground #37B39020
editor.foreground #c9d5d0
editor.hoverHighlightBackground #37B39015
editor.lineHighlightBackground #241D1A
editor.lineHighlightBorder #241D1A
editor.selectionBackground #37B39040
editor.selectionHighlightBackground #37B39020
editor.wordHighlightBackground #37B39030
editor.wordHighlightStrongBackground #37B39050
editorCursor.background #c9d5d0
editorCursor.foreground #37B390
editorGroup.dropBackground #37B39020
editorGroup.emptyBackground #241D1A
editorGroup.focusedEmptyBorder #37B390
editorGroupHeader.noTabsBackground #241D1A
editorGroupHeader.tabsBackground #241D1A
editorHoverWidget.background #241D1A
editorHoverWidget.border #4D3C3380
editorLineNumber.activeForeground #c9d5d0
editorLineNumber.foreground #7A655E
editorSuggestWidget.background #241D1A
editorSuggestWidget.border #0000
editorSuggestWidget.foreground #7A655E
editorSuggestWidget.highlightForeground #37B390
editorSuggestWidget.selectedBackground #37B39040
editorWhitespace.foreground #4D3C3380
editorWidget.background #241D1A
editorWidget.border #4D3C33
editorWidget.foreground #7A655E
editorWidget.resizeBorder #37B390
focusBorder #37B39040
foreground #c9d5d0
gitDecoration.addedResourceForeground #84D4BC
gitDecoration.conflictingResourceForeground #CE8179
gitDecoration.deletedResourceForeground #E67A73
gitDecoration.ignoredResourceForeground #7A655E
gitDecoration.modifiedResourceForeground #E5B088
gitDecoration.renamedResourceForeground #37B390
gitDecoration.stageDeletedResourceForeground #E67A73
gitDecoration.stageModifiedResourceForeground #CE8179
gitDecoration.submoduleResourceForeground #f6c177
gitDecoration.untrackedResourceForeground #37B390
list.activeSelectionBackground #37B39020
list.activeSelectionBorder #37B390
list.activeSelectionForeground #c9d5d0
list.dropBackground #241D1A
list.errorForeground #E67A73
list.focusBackground #37B39040
list.focusBorder #37B39080
list.focusForeground #c9d5d0
list.focusHighlightForeground #84D4BC
list.focusOutline #37B39040
list.highlightForeground #84D4BC
list.hoverBackground #37B39010
list.hoverForeground #c9d5d0
list.inactiveSelectionBackground #37B39010
list.inactiveSelectionBorder #37B39040
list.inactiveSelectionForeground #c9d5d0
list.warningForeground #E5B088
scrollbar.shadow #241D1A80
sideBar.background #302721
sideBar.border #241D1A50
sideBar.dropBackground #37B39020
sideBar.foreground #c9d5d0
sideBarSectionHeader.background #241D1A
sideBarSectionHeader.border #c9d5d020
sideBarSectionHeader.foreground #c9d5d0
sideBarTitle.foreground #c9d5d0
statusBar.background #241D1A
statusBar.border #37B39020
statusBar.debuggingBackground #37B390
statusBar.debuggingBorder #37B390
statusBar.debuggingForeground #241D1A
statusBar.foreground #c9d5d0
statusBar.noFolderBackground #241D1A
statusBar.noFolderForeground #7A655E
statusBarItem.activeBackground #37B39030
statusBarItem.compactHoverBackground #37B39020
statusBarItem.errorBackground #E67A73
statusBarItem.errorForeground #241D1A
statusBarItem.hoverBackground #37B39020
statusBarItem.prominentBackground #37B390
statusBarItem.prominentForeground #241D1A
statusBarItem.prominentHoverBackground #45C4A0
statusBarItem.remoteBackground #37B390
statusBarItem.remoteForeground #241D1A
statusBarItem.warningBackground #E5B088
statusBarItem.warningForeground #241D1A
tab.activeBackground #302721
tab.activeBorderTop #37B390
tab.activeForeground #c9d5d0
tab.activeModifiedBorder #66CFB9
tab.border #241D1A
tab.hoverBackground #37B39020
tab.inactiveBackground #241D1A
tab.inactiveForeground #7A655E
tab.inactiveModifiedBorder #66CFB980
tab.lastPinnedBorder #37B390
tab.unfocusedActiveForeground #7A655E
tab.unfocusedActiveModifiedBorder #66CFB980
tab.unfocusedHoverBackground #37B39010
terminal.ansiBlack #241D1A
terminal.ansiBlue #66CFB9
terminal.ansiBrightBlack #4D3C33
terminal.ansiBrightBlue #66CFB9
terminal.ansiBrightCyan #45C4A0
terminal.ansiBrightGreen #84D4BC
terminal.ansiBrightMagenta #CE8179
terminal.ansiBrightRed #E67A73
terminal.ansiBrightWhite #F5FAF8
terminal.ansiBrightYellow #E5B088
terminal.ansiCyan #37B390
terminal.ansiGreen #84D4BC
terminal.ansiMagenta #CE8179
terminal.ansiRed #E67A73
terminal.ansiWhite #c9d5d0
terminal.ansiYellow #E5B088
terminal.background #302721
terminal.foreground #c9d5d0
terminal.selectionBackground #37B39040
terminal.tab.activeBorder #37B390
terminalCursor.background #c9d5d0
terminalCursor.foreground #37B390
toolbar.activeBackground #37B39020
toolbar.hoverBackground #37B39040 entity.other.attribute-name.jsx, entity.other.attribute-name.tsx #45C4A0 italic
entity.name.type.interface, entity.name.type.type #66CFB9 bold
meta.tag, meta.brace #c9d5d0 —
support.type.primitive, support.type.builtin #37B390 —
variable, variable.other #c9d5d0 —
variable.parameter #C4A886 italic
support.function, support.class #66CFB9 —
markup.heading, markup.heading entity.name #37B390 bold
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 }!` ;
}
Mint Chocolate | Coding Theme