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 #191a23 activityBar.dropBackground #191a23 activityBar.foreground #ebebe1 badge.background #918686 badge.foreground #ebebe1 button.background #463f42 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #ebebe1 — meta.block, meta.embedded, source.groovy.embedded #ebebe1 — comment #6b6264 — string, punctuation.definition.string #f9c490 — punctuation.definition.template-expression, punctuation.section.embedded
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
debugExceptionWidget.background
#24232a
debugExceptionWidget.border #191a23
debugToolBar.background #24232a
diffEditor.insertedTextBackground #879d7020
diffEditor.removedTextBackground #d6567630
dropdown.background #191a23
dropdown.listBackground #191a23
editor.background #2e2b31
editor.findMatchBackground #bc9c8680
editor.findMatchHighlightBackground #604d5c80
editor.foreground #ebebe1
editor.hoverHighlightBackground #6b626480
editor.lineHighlightBackground #3a353980
editor.selectionBackground #6b626480
editor.selectionHighlightBackground #4d95b140
editorCursor.foreground #ebebe1
editorGroup.border #191a23
editorGroup.dropBackground #191a2380
editorGroupHeader.tabsBackground #24232a
editorGutter.addedBackground #879d70
editorGutter.deletedBackground #d65676
editorGutter.modifiedBackground #4d95b1
editorHoverWidget.background #24232a
editorHoverWidget.border #24232a
editorIndentGuide.activeBackground #463f42
editorIndentGuide.background #463f42
editorLineNumber.activeForeground #918686
editorLineNumber.foreground #6b6264
editorSuggestWidget.background #24232a
editorSuggestWidget.border #191a23
editorSuggestWidget.highlightForeground #4d95b1
editorWhitespace.foreground #463f42
editorWidget.background #24232a
errorForeground #d65676
focusBorder #00000000
foreground #ebebe1
gitDecoration.addedResourceForeground #e1e897
gitDecoration.conflictingResourceForeground #d65676
gitDecoration.deletedResourceForeground #d65676
gitDecoration.ignoredResourceForeground #918686
gitDecoration.modifiedResourceForeground #4d95b1
gitDecoration.untrackedResourceForeground #e1e897
input.background #191a23
inputOption.activeBackground #3a3539
inputValidation.errorBackground #45324b
inputValidation.errorBorder #d65676
inputValidation.infoBackground #243b4e
inputValidation.infoBorder #4d95b1
inputValidation.warningBackground #bc9c86
inputValidation.warningBorder #f9c490
list.activeSelectionBackground #463f42
list.dropBackground #191a23
list.errorForeground #d65676
list.focusBackground #2e2b31
list.highlightForeground #ebebe1
list.hoverBackground #2e2b31
list.inactiveSelectionBackground #2e2b31
list.warningForeground #f9c490
menu.background #24232a
menu.foreground #ebebe1
minimap.errorHighlight #d65676
minimap.findMatchHighlight #bc9c8680
minimap.selectionHighlight #463f4280
minimap.warningHighlight #f9c490
minimapGutter.addedBackground #879d70
minimapGutter.deletedBackground #d65676
minimapGutter.modifiedBackground #4d95b1
panel.background #2e2b31
panelTitle.activeBorder #918686
panelTitle.activeForeground #ebebe1
panelTitle.inactiveForeground #918686
peekView.border #191a23
peekViewEditor.background #24232a
peekViewEditor.matchHighlightBackground #463f42
peekViewResult.background #191a23
peekViewResult.matchHighlightBackground #463f42
peekViewResult.selectionBackground #2e2b31
peekViewTitle.background #191a23
pickerGroup.foreground #918686
progressBar.background #918686
scrollbar.shadow #00000030
selection.background #beb8b3
settings.numberInputBackground #191a23
settings.textInputBackground #191a23
sideBar.background #24232a
sideBarSectionHeader.background #2e2b31
statusBar.background #191a23
statusBar.debuggingBackground #d65676
statusBar.noFolderBackground #4d95b1
statusBarItem.remoteBackground #4d95b1
tab.inactiveBackground #24232a
tab.inactiveForeground #918686
terminal.ansiBlack #2e2b31
terminal.ansiBlue #243b4e
terminal.ansiBrightBlack #463f42
terminal.ansiBrightBlue #4d95b1
terminal.ansiBrightCyan #4d95b1
terminal.ansiBrightGreen #e1e897
terminal.ansiBrightMagenta #d65676
terminal.ansiBrightRed #d65676
terminal.ansiBrightWhite #ebebe1
terminal.ansiBrightYellow #f9c490
terminal.ansiCyan #243b4e
terminal.ansiGreen #879d70
terminal.ansiMagenta $red1
terminal.ansiRed #45324b
terminal.ansiWhite #eee0c4
terminal.ansiYellow #bc9c86
titleBar.activeBackground #191a23
titleBar.inactiveBackground #191a23
tree.indentGuidesStroke #463f42
widget.shadow #00000030 meta.template.expression #ebebe1 —
constant.language #eee0c4 —
constant.character, constant.other #eee0c4 —
keyword, storage.type.function #d65676 —
keyword.local, keyword.type, storage, storage.type.built-in.primitive #4d95b1
entity.name.type, entity.name.class, entity.name.scope-resolution #b4c283 —
entity.other.inherited-class #b4c283 —
support.function.any-method, entity.name.function #b4c283
entity.other.attribute-name #b4c283
support.type, support.class #4d95b1 —
invalid.deprecated #ebebe1 —
meta.structure.dictionary, support.type.property-name #ebebe1 —
constant.numeric.line-number.find-in-files - match #eee0c4A0 —
entity.name.filename.find-in-files #f9c490 —
markup.bold, markup.italic #4d95b1 —
markup.heading.setext #b4c283 bold
markup.heading.markdown, entity.name.section.markdown #b4c283 bold
markup.quote.markdown #918686 —
markup.bold.markdown — bold
string.other.link.title.markdown,string.other.link.description.markdown #eee0c4 —
markup.underline.link.markdown,markup.underline.link.image.markdown #f9c490 —
markup.italic.markdown — italic
markup.list.unnumbered.markdown, markup.list.numbered.markdown #ebebe1 —
punctuation.definition.list.begin.markdown #b4c283 —
token.error-token #d65676 —
token.debug-token #d65676 —
variable.language #c6f6ef —
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 } !` ;
}
Puffin Theme | Coding Theme