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 #aca1cf activityBar.background #161617 activityBar.border #131314 activityBar.foreground #c9c7cd activityBar.inactiveForeground #757581 activityBarBadge.background #57575f tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle namespace, entity.name.namespace #f591b2 italic type, entity.name.type.primitive #e29eca — type.defaultLibrary, support.type, entity.name.type #b9aeda — function, entity.name.function, function.defaultLibrary, support.function #c1c0d4 — method, entity.name.function.member, entity.name.function.clojure, entity.name.tag
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Mellow Minimal — Mellow-Minimal
activityBarBadge.foreground
#c9c7cd
breadcrumb.activeSelectionForeground #cac9dd
breadcrumb.focusForeground #cac9dd
breadcrumb.foreground #c9c7cd
breadcrumbPicker.background #353539
button.background #57575f
button.foreground #ffffff
button.hoverBackground #757581
button.secondaryBackground #57575f
button.secondaryForeground #ffffff
button.secondaryHoverBackground #757581
checkbox.background #2a2a2d
checkbox.border #3e3e43
debugToolBar.background #161617
diffEditor.insertedLineBackground #90b99f66
diffEditor.insertedTextBackground #90b99f33
diffEditor.removedLineBackground #f5a19166
diffEditor.removedTextBackground #f5a19133
dropdown.background #2a2a2d
dropdown.border #3e3e43
dropdown.foreground #c9c7cd
dropdown.listBackground #2a2a2d
editor.background #161617
editor.foldBackground #1b1b1d
editor.foreground #c9c7cd
editor.lineHighlightBackground #1b1b1d
editor.lineHighlightBorder #1b1b1d
editor.selectionBackground #3e3e43
editor.selectionHighlightBackground #3e3e43
editorBracketHighlight.foreground1 #9998a8
editorBracketHighlight.foreground2 #9998a8
editorBracketHighlight.foreground3 #9998a8
editorBracketHighlight.foreground4 #9998a8
editorBracketHighlight.foreground5 #9998a8
editorBracketHighlight.foreground6 #9998a8
editorBracketHighlight.unexpectedBracket.foreground #9998a8
editorCursor.foreground #c1c0d4
editorGroupHeader.tabsBackground #0b0b0b
editorGutter.addedBackground #9dc6ac
editorGutter.deletedBackground #ffae9f
editorGutter.modifiedBackground #f0c5a9
editorIndentGuide.activeBackground #57575f
editorIndentGuide.background #2a2a2d
editorInlayHint.background #161617
editorInlayHint.foreground #757581
editorInlayHint.paramBackground #161617
editorInlayHint.paramForeground #757581
editorInlayHint.typeBackground #161617
editorInlayHint.typeForeground #757581
editorLineNumber.activeForeground #cac9dd
editorLineNumber.foreground #57575f
editorMarkerNavigation.background #161617
editorSuggestWidget.background #161617
editorWhitespace.foreground #2a2a2d
editorWidget.background #161617
editorWidget.resizeBorder #161617
focusBorder #57575f
gitDecoration.addedResourceForeground #9dc6ac
gitDecoration.conflictingResourceForeground #ffae9f
gitDecoration.deletedResourceForeground #ffae9f
gitDecoration.ignoredResourceForeground #757581
gitDecoration.modifiedResourceForeground #f0c5a9
gitDecoration.submoduleResourceForeground #3e3e43
gitDecoration.untrackedResourceForeground #9dc6ac
icon.foreground #9998a8
input.background #131314
input.border #131314
input.foreground #c9c7cd
input.placeholderForeground #757581
inputOption.activeBorder #57575f
list.activeSelectionBackground #161617
list.hoverBackground #161617
list.inactiveSelectionBackground #1b1b1d
menu.background #161617
menu.foreground #c9c7cd
menu.selectionBackground #3e3e43
menu.selectionForeground #ac9fcf
menu.separatorBackground #161617
notifications.background #161617
notifications.border #161617
notifications.foreground #c9c7cd
panel.background #161617
peekView.border #ac9fcf
peekViewEditor.background #161617
peekViewResult.background #161617
peekViewTitle.background #161617
scrollbar.shadow #161617
sideBar.background #131314
sideBar.border #131314
sideBar.foreground #c9c7cd
sideBarSectionHeader.background #161617
sideBarSectionHeader.border #131314
sideBarSectionHeader.foreground #ac9fcf
sideBarTitle.foreground #c1c0d4
statusBar.background #161617
statusBar.border #161617
statusBar.debuggingBackground #161617
statusBar.debuggingForeground #c9c7cd
statusBar.focusBorder #161617
statusBar.foreground #c9c7cd
statusBar.noFolderBackground #161617
statusBarItem.activeBackground #57575f
statusBarItem.focusBorder #161617
statusBarItem.hoverBackground #3e3e43
statusBarItem.prominentBackground #161617
statusBarItem.remoteBackground #161617
statusBarItem.remoteForeground #c9c7cd
tab.activeBackground #161617
tab.activeBorder #161617
tab.activeBorderTop #aca1cf
tab.activeForeground #cac9dd
tab.border #161617
tab.hoverBackground #161617
tab.inactiveBackground #0b0b0b
tab.inactiveForeground #757581
tab.unfocusedActiveBorder #161617
tab.unfocusedActiveBorderTop #161617
tab.unfocusedHoverBackground #161617
terminal.ansiBlack #27272a
terminal.ansiBlue #aca1cf
terminal.ansiBrightBlack #353539
terminal.ansiBrightBlue #b9aeda
terminal.ansiBrightCyan #f591b2
terminal.ansiBrightGreen #9dc6ac
terminal.ansiBrightMagenta #ecaad6
terminal.ansiBrightRed #ffae9f
terminal.ansiBrightWhite #cac9dd
terminal.ansiBrightYellow #f0c5a9
terminal.ansiCyan #ea83a5
terminal.ansiGreen #90b99f
terminal.ansiMagenta #e29eca
terminal.ansiRed #f5a191
terminal.ansiWhite #c1c0d4
terminal.ansiYellow #e6b99d
terminal.background #161617
terminal.foreground #c9c7cd
textBlockQuote.background #90b99f
textCodeBlock.background #1b1b1d
textLink.activeForeground #9998a8
textLink.foreground #9998a8
titleBar.activeBackground #0b0b0b
titleBar.inactiveBackground #0b0b0b
tree.indentGuidesStroke #3e3e43 class, entity.name.type.class, class.defaultLibrary, support.class #aca1cf —
struct, storage.type #aca1cf —
interface, entity.name.type.interface #aca1cf —
enum, entity.name.type.enum #aca1cf —
macro, entity.name.function.macro #f591b2 —
parameter, variable.parameter, meta.attribute, keyword.control.clojure #ea83a5 —
variable, variable.other.readwrite, entity.name.variable, variable.readonly, variable.other.constant, variable.readonly.defaultLibrary, support.constant #c1c0d4 —
property, variable.other.property, property.readonly, variable.other.constant.property #e6b99d —
comment, punctuation.definition.comment, string.comment #757581 italic
string, string punctuation.section.embedded source, constant.other.color, support.constant.property-value.css #90b99f —
keyword, variable.language #aca1cf —
keyword.operator, constant.keyword #e6b99d —
keyword.operator.namespace, punctuation.brackets #9998a8 —
constant.language #e6b99d —
entity.name.type.result #f0c5a9 —
markup.heading #b9aeda bold
markup.raw, markup.inline.raw, markup.fenced_code #e6b99d —
markup.underline.link #90b99f —
string.other.link.title #aca1cf italic
punctuation.definition.heading, punctuation.definition.tag.begin, punctuation.definition.tag.end #9998a8 normal
entity.name.tag.html, entity.name.tag.js #ea83a5 —
entity.other.attribute-name.html, entity.other.attribute-name.js #aca1cf italic
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 }!` ;
}
Mellow Minimal | Coding Theme