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 #111019 activityBar.foreground #d5d8dab3 activityBarBadge.background #e95378 activityBarBadge.foreground #111019 badge.background #161420 badge.foreground #d5d8da tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment #BBBBBB4D italic constant.character.escape #25B0BCE6 — entity.name #FAC29AE6 — entity.name.function #FDB849 — entity.name.tag
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
breadcrumbPicker.background
#111019
button.background #161420
debugToolBar.background #0B0A10
diffEditor.insertedTextBackground #09f7a01a
diffEditor.removedTextBackground #f43e5c1a
dropdown.background #0B0A10
dropdown.listBackground #161420
editor.background #0B0A10
editor.findMatchBackground #111019
editor.findMatchHighlightBackground #211E2F
editor.findRangeHighlightBackground #6c6f931a
editor.hoverHighlightBackground #6c6f934d
editor.inactiveSelectionBackground #161420
editor.lineHighlightBackground #111019
editor.rangeHighlightBackground #2e303e80
editor.selectionBackground #a42aeb3d
editor.selectionHighlightBackground #211E2F
editor.wordHighlightBackground #a42aeb3d
editor.wordHighlightStrongBackground #a42aeb3d
editorBracketMatch.background #6c6f9380
editorBracketMatch.border #6c6f9300
editorCodeLens.foreground #6c6f9380
editorCursor.background #0B0A10
editorCursor.foreground #fb8b24
editorError.foreground #f43e5c
editorGroup.border #1a1c23
editorGroup.dropBackground #6c6f934d
editorGroupHeader.tabsBackground #111019
editorGutter.addedBackground #09f7a0b3
editorGutter.deletedBackground #f43e5cb3
editorGutter.modifiedBackground #21bfc2b3
editorIndentGuide.activeBackground #161420
editorIndentGuide.background #1f1f1f57
editorLineNumber.activeForeground #d5d8da80
editorLineNumber.foreground #d5d8da1a
editorOverviewRuler.addedForeground #09f7a080
editorOverviewRuler.border #2e303eb3
editorOverviewRuler.bracketMatchForeground #d5d8da80
editorOverviewRuler.deletedForeground #f43e5c80
editorOverviewRuler.errorForeground #f43e5ce6
editorOverviewRuler.findMatchForeground #6c6f93
editorOverviewRuler.modifiedForeground #21bfc280
editorOverviewRuler.warningForeground #27d79780
editorRuler.foreground #6c6f934d
editorSuggestWidget.highlightForeground #e95378
editorWarning.foreground #27d797b3
editorWhitespace.foreground #2B273F
editorWidget.background #0B0A10
editorWidget.border #0B0A10
errorForeground #f43e5c
extensionButton.prominentBackground #e95378
extensionButton.prominentHoverBackground #e9436d
focusBorder #1a1c23
foreground #d5d8da
gitDecoration.addedResourceForeground #27d797b3
gitDecoration.deletedResourceForeground #f43e5c
gitDecoration.ignoredResourceForeground #d5d8da4d
gitDecoration.modifiedResourceForeground #fab38e
gitDecoration.untrackedResourceForeground #27d797
input.background #161420
inputOption.activeBorder #e9436d80
inputValidation.errorBackground #f43e5c80
inputValidation.errorBorder #f43e5c00
list.activeSelectionBackground #2e303e80
list.activeSelectionForeground #d5d8da
list.dropBackground #6c6f9380
list.errorForeground #f43e5ce6
list.focusBackground #2e303e80
list.focusForeground #d5d8da
list.highlightForeground #e95378
list.hoverBackground #2e303e80
list.hoverForeground #d5d8da
list.inactiveFocusBackground #2e303e80
list.inactiveSelectionBackground #2e303e4d
list.inactiveSelectionForeground #d5d8da
list.warningForeground #27d797b3
menu.background #111019
panel.background #111019
panel.border #0B0A10
panelTitle.activeBorder #e95378
peekView.border #1a1c23
peekViewEditor.background #0B0A10
peekViewEditor.matchHighlightBackground #6c6f9380
peekViewResult.background #0B0A10
peekViewResult.matchHighlightBackground #6c6f9380
peekViewResult.selectionBackground #2e303e80
peekViewTitle.background #0B0A10
pickerGroup.foreground #e95378e6
progressBar.background #e95378
scrollbar.shadow #111019
scrollbarSlider.activeBackground #6c6f9380
scrollbarSlider.background #6c6f931a
scrollbarSlider.hoverBackground #6c6f934d
selection.background #6c6f9380
sideBar.background #111019
sideBar.dropBackground #6c6f934d
sideBar.foreground #d5d8da80
sideBarSectionHeader.background #111019
sideBarSectionHeader.foreground #d5d8dab3
statusBar.background #0B0A10
statusBar.debuggingBackground #fab38e
statusBar.debuggingForeground #111019
statusBar.foreground #d5d8da80
statusBar.noFolderBackground #0B0A10
statusBarItem.hoverBackground #161420
statusBarItem.prominentBackground #161420
statusBarItem.prominentHoverBackground #6c6f93
tab.activeBackground #0B0A10
tab.activeBorder #e95378
tab.border #1c1e2600
tab.inactiveBackground #0B0A10
terminal.ansiBlue #26bbd9
terminal.ansiBrightBlue #3fc4de
terminal.ansiBrightCyan #6be4e6
terminal.ansiBrightGreen #3fdaa4
terminal.ansiBrightMagenta #f075b5
terminal.ansiBrightRed #ec6a88
terminal.ansiBrightYellow #fbc3a7
terminal.ansiCyan #59e1e3
terminal.ansiGreen #29d398
terminal.ansiMagenta #ee64ac
terminal.ansiRed #e95678
terminal.ansiYellow #fab795
terminal.foreground #d5d8da
terminal.selectionBackground #6c6f934d
terminalCursor.background #d5d8da
terminalCursor.foreground #6c6f9380
textLink.activeForeground #e9436d
textLink.foreground #e95378
titleBar.activeBackground #0B0A10
titleBar.inactiveBackground #111019
walkThrough.embeddedEditorBackground #0B0A10
widget.shadow #111019 #E95678E6
entity.name.type, storage.type.cs #FAC29AE6 —
entity.other.attribute-name #46ACAD bold
entity.other.inherited-class #FAB795E6 —
entity.other.attribute-name.id #25B0BCE6 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #FAB795E6 —
entity.name.variable, variable #E95678E6 —
entity.name.type.class.ts, entity.name.type.interface.ts #E0AAFF —
variable.other.constant.property.ts, variable.other.constant.object.property.ts #FFFFFF —
keyword.other.unit #F09483E6 —
markup.quote #FAB795B3 italic
markup.heading, entity.name.section #E95678E6 —
markup.italic #25B0BCE6 italic
markup.inline.raw, markup.fenced_code.block #F09483E6 —
markup.underline.link #FAB795E6 —
storage, keyword, keyword.operator, keyword.operator.new, keyword.operator.logical, keyword.operator.expression, keyword.operator.delete, variable.language #46ACAD bold
text.html.derivative #CED4DA bold
string.quoted, string.template, constant, string.quoted.double, string.quoted.single, string.quoted.double.ts, constant.numeric.decimal, constant.language.null #EAAC8B —
string.other.link #F09483E6 —
support.function #25B0BCE6 —
support.variable #E95678E6 —
support.type.property-name, meta.object-literal.key #E95678E6
support.type.property-name.css #D9D9D9 —
variable.parameter — italic
string.template meta.embedded #BBBBBB —
punctuation.definition.tag, punctuation.separator #FFFFFF9F —
punctuation.definition.template-expression #B877DBE6 —
punctuation.section.embedded #B877DBE6 —
punctuation.definition.list #F09483E6 —
token.error-token #F44747 —
token.debug-token #B267E6 —
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*
Apatheia | Coding Theme 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 } !` ;
}