Skip to main content
Home Theme VS Code Wonderland Theme simple dark background and lovely cool pastel colors
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 #151718 activityBar.border #9eced177 activityBar.foreground #9eced1 activityBar.inactiveForeground #9eced177 activityBarBadge.background #151718 activityBarBadge.foreground #b3d2dd tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment #5e686e — string #ade2e4 — constant.numeric #7b84ff — constant.language #7b84ff — constant.character, constant.other
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Wonderland Theme — wonderland-theme
badge.background #151718
badge.foreground #9eced1
breadcrumb.foreground #9eced1
button.background #151718
button.foreground #dbdbdb
button.hoverBackground #151718
checkbox.border #9eced177
contrastActiveBorder #151718
contrastBorder #9eced177
debugExceptionWidget.background #151718
debugExceptionWidget.border #9eced1
debugToolBar.background #151718
debugToolBar.border #9eced1
diffEditor.insertedTextBackground #31899555
diffEditor.insertedTextBorder #31899555
diffEditor.removedTextBackground #3f2f8988
diffEditor.removedTextBorder #31899555
dropdown.background #151718
dropdown.border #9eced177
dropdown.foreground #dbdbdb
editor.background #151718
editor.findMatchBackground #079499
editor.findMatchBorder #9eced177
editor.findMatchHighlightBackground #eeeeee44
editor.foreground #dbdbdb
editor.inactiveSelectionBackground #079499
editor.lineHighlightBorder #9eced177
editor.selectionBackground #079499
editor.selectionForeground #000c18
editorError.foreground #d84a80
editorGroup.border #9eced177
editorGroupHeader.border #151718
editorGroupHeader.noTabsBackground #151718
editorGroupHeader.tabsBackground #151718
editorGroupHeader.tabsBorder #9eced177
editorHint.foreground #89d0ff
editorHoverWidget.background #151718
editorHoverWidget.border #9eced177
editorIndentGuide.activeBackground #9eced1
editorLineNumber.activeForeground #9eced1
editorLineNumber.foreground #9eced1
editorLink.activeForeground #89d0ff
editorMarkerNavigation.background #060621
editorMarkerNavigationError.background #d84a80
editorMarkerNavigationWarning.background #787c7b
editorSuggestWidget.background #151718
editorSuggestWidget.border #9eced1
editorSuggestWidget.foreground #dbdbdb
editorSuggestWidget.highlightForeground #89d0ff
editorSuggestWidget.selectedBackground #9eced177
editorWarning.foreground #3247ff
editorWidget.background #151718
editorWidget.border #151718
focusBorder #9eced177
foreground #dbdbdb
gitDecoration.addedResourceForeground #abb2f0
gitDecoration.conflictingResourceForeground #29cdeb
gitDecoration.deletedResourceForeground #ff94c6
gitDecoration.ignoredResourceForeground #9eced177
gitDecoration.modifiedResourceForeground #75cea9
gitDecoration.submoduleResourceForeground #ade2e4
gitDecoration.untrackedResourceForeground #7b84ff
icon.foreground #dbdbdb
input.background #151718
input.border #9eced177
input.foreground #dbdbdb
input.placeholderForeground #9eced177
list.activeSelectionBackground #b3b3b315
list.errorForeground #d84a80
list.focusBackground #9eced177
list.hoverBackground #b3b3b315
list.inactiveSelectionBackground #55555515
list.warningForeground #3247ff
menu.background #151718
menu.border #9eced177
merge.border #9eced177
notificationCenter.border #9eced1
notificationCenterHeader.background #151718
notificationCenterHeader.foreground #dbdbdb
notifications.background #151718
notifications.border #9eced177
notifications.foreground #dbdbdb
panel.background #151718
panel.border #9eced177
panel.dropBorder #9eced1
panelSection.border #9eced177
panelTitle.activeForeground #9eced1
panelTitle.inactiveForeground #9eced177
peekView.border #9eced177
peekViewTitle.background #151718
peekViewTitleLabel.foreground #dbdbdb
quickInput.background #151718
sideBar.background #151718
sideBar.border #9eced177
sideBar.dropBackground #9eced177
sideBar.foreground #dbdbdb
sideBarSectionHeader.background #151718
sideBarSectionHeader.border #9eced177
sideBarSectionHeader.foreground #9eced1
sideBarTitle.foreground #9eced1
statusBar.background #151718
statusBar.border #9eced177
statusBar.debuggingBackground #b3b3b315
statusBar.debuggingForeground #9eced1
statusBar.foreground #9eced1
statusBar.noFolderBackground #151718
statusBar.noFolderForeground #9eced1
tab.activeBackground #151718
tab.activeBorder #151718
tab.activeForeground #dbdbdb
tab.activeModifiedBorder #9eced177
tab.border #9eced177
tab.hoverBorder #9eced177
tab.inactiveBackground #151718
tab.inactiveForeground #dbdbdb
tab.inactiveModifiedBorder #9eced177
tab.unfocusedActiveBorder #151718
tab.unfocusedActiveForeground #dbdbdb
tab.unfocusedInactiveForeground #dbdbdb
terminal.ansiBlack #9eced1
terminal.ansiBlue #5ccaef
terminal.ansiBrightBlack #9eced1
terminal.ansiBrightBlue #5ccaef
terminal.ansiBrightCyan #29cdeb
terminal.ansiBrightGreen #abb2f0
terminal.ansiBrightMagenta #ff94c6
terminal.ansiBrightRed #d84a80
terminal.ansiBrightWhite #f1f1f1
terminal.ansiBrightYellow #75cea9
terminal.ansiCyan #29cdeb
terminal.ansiGreen #abb2f0
terminal.ansiMagenta #ff94c6
terminal.ansiRed #d84a80
terminal.ansiWhite #f1f1f1
terminal.ansiYellow #75cea9
terminal.border #9eced177
titleBar.activeBackground #151718
titleBar.activeForeground #9eced1
titleBar.border #9eced177
titleBar.inactiveBackground #151718
titleBar.inactiveForeground #9eced1 #7b84ff
storage.type #29cdeb italic
entity.name.class #abb2f0 underline
entity.other.inherited-class #abb2f0 italic underline
entity.name.function #abb2f0
variable.parameter #ff94c6 italic
entity.name.tag #75cea9 bold
entity.other.attribute-name #abb2f0
support.type, support.class #29cdeb italic
support.other.variable #ff94c6
invalid.deprecated #f0f3f8 —
meta.structure.dictionary.json, string.quoted.double.json #c2cfce —
meta.diff, meta.diff.header #5e7075 —
constant.numeric.line-number.find-in-files - match #7b84ffA0 —
entity.name.filename.find-in-files #ade2e4 —
variable.language #abb2f0 —
heading.1.markdown #abb2f0 bold
punctuation.definition.heading.markdown #abb2f0 —
entity.name.section.markdown #abb2f0 —
punctuation.definition.list.begin.markdown #7b84ff —
meta.image.inline.markdown #ade2e4 —
markup.bold.markdown #dbdbdb bold
markup.italic.markdown #dbdbdb italic
markup.inline.raw.string.markdown #29cdeb —
meta.separator.markdown #9eced1 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end #7b84ff —
variable.other.object, punctuation.accessor, meta.brace.round, variable.other.readwrite, punctuation.separator.comma #dbdbdb —
token.error-token #d84a80 —
token.debug-token #6967e6 —
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*
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 } !` ;
}
Wonderland Theme | Coding Theme