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 #242424 activityBar.foreground #e6e6e6 activityBarBadge.background #2b2b2b activityBarBadge.foreground #FFFFFF badge.background #00000000 badge.foreground #e7e7e7 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle markup.raw, meta.link, meta.class, meta.import, meta.package, entity.name.class, entity.name.type.class, entity.other.attribute-name, keyword.other.unit, meta.property-list, support.class, meta.class.body, support.constant.media.css #ffa198 — support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss, keyword.operator.css,keyword.operator.scss,keyword.operator.less, string.quoted.double punctuation, markup.inserted, string #a3df90 — meta.diff.header.from-file, meta.diff.header.to-file, meta.method-call, meta.class.body, meta.method, markup.link, markup.inline.raw, markup.heading.setext, markup.other.markdown, punctuation.definition.list, punctuation.definition.to-file.diff, punctuation.definition.from-file.diff, punctuation.definition.heading.markdown, markup.heading punctuation.definition.heading, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.id, entity.name.section.markdown, entity.name.function, entity.name.section, support.function, support.type, constant.other.symbol, keyword.other.special-method, meta.function-call, meta.indexed-name.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
button.background
#fff
button.foreground #1a1a1a
button.hoverBackground #ececec
dropdown.background #2c2c2c
dropdown.border #00000000
editor.background #202020
editor.findMatchBackground #ffffff1e
editor.findMatchHighlightBackground #ffffff1e
editor.foreground #d4d4d4
editor.lineHighlightBackground #ffffff07
editor.selectionBackground #ffffff10
editor.selectionHighlightBackground #ffffff1a
editorCursor.foreground #A9B2C3
editorGroupHeader.tabsBackground #1b1b1b
editorLineNumber.foreground #727272
focusBorder #00000000
input.background #292929
input.border #00000000
input.foreground #d4d4d4
input.placeholderForeground #8d8d8d
list.activeSelectionBackground #ffffff0c
list.activeSelectionForeground #ebebeb
list.focusBackground #ffffff0c
list.highlightForeground #D7DAE0
list.hoverBackground #ffffff05
list.inactiveSelectionBackground #ffffff04
list.inactiveSelectionForeground #D7DAE0
sideBar.background #1d1d1d
sideBar.foreground #e0e0e0
sideBarTitle.foreground #fff
statusBar.background #1d1d1d
statusBar.debuggingBackground #202020
statusBar.debuggingForeground #e0e0e0
statusBar.focusBorder #00000000
statusBar.foreground #a8a8a8
statusBar.noFolderBackground #202020
statusBar.noFolderForeground #e0e0e0
tab.activeBackground #202020
tab.activeForeground #ffffff
tab.border #00000000
tab.hoverBackground #ffffff04
tab.inactiveBackground #1a1a1a
tab.inactiveForeground #9e9e9e
titleBar.activeBackground #1d1d1d
titleBar.inactiveBackground #1b1b1b
#e8b2f5
storage.type.primitive, keyword.operator, keyword.other.type, constant.language, constant.character.escape, markup.inserted.diff, markup.quote.markdown, punctuation.section.embedded.end, punctuation.section.embedded.begin, punctuation.definition.quote.begin.markdown #a5d6ff —
keyword, keyword.control, keyword.control.flow, keyword.control.import, keyword.operator.logical, storage.type, storage.modifier, meta.selector #ff7b72 —
source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block, punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.section.inner-class, punctuation.definition.array, punctuation.section.method, punctuation.section.class, meta.separator, meta.tag, variable, variable.parameter, variable.interpolation, source.css property-value, support.type.property-value, support.type.vendored.property-name, support.type.property-name, markup.deleted.diff, markup.heading, string.other.link, punctuation.terminator.rule, punctuation.separator.key-value, punctuation.definition.begin.bracket.curly, punctuation.definition.end.bracket.curly, punctuation.definition.arguments.begin.bracket.round, punctuation.definition.arguments.end.bracket.round, punctuation.section.property-list.end.bracket.curly, punctuation.section.property-list.begin.bracket.curly, punctuation.section.try.begin.bracket.curly, punctuation.section.try.end.bracket.curly, punctuation.section.catch.end.bracket.curly, punctuation.section.catch.begin.bracket.curly, punctuation.definition.class.end.bracket.curly, punctuation.definition.class.begin.bracket.curly, punctuation.terminator.expression, punctuation.definition.entity, punctuation.definition.dictionary.end, punctuation.definition.dictionary.begin, punctuation.separator.dictionary.pair, punctuation.separator.array, punctuation.separator.dictionary.key-value, keyword.operator.class, punctuation.terminator, storage.modifier.package.java, storage.modifier.import.java, storage.type.java, constant.other.key.java, meta.brace.round, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, meta.function-call.arguments, punctuation.definition.annotation-arguments.begin.bracket.round, punctuation.definition.annotation-arguments.end.bracket.round, punctuation.section.block.end.bracket.curly, punctuation.section.block.begin.bracket.curly, punctuation.bracket.angle, punctuation.bracket.round.java, meta.method.body, punctuation.section.function.begin.bracket.round, punctuation.section.function.end.bracket.round, meta.property-name, keyword.operator.list.shell, meta.method-call.java, punctuation.definition.list.begin.python, punctuation.definition.list.end.python #D4D4D4 —
punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag #a8a8a8 —
comment, comment.line, comment.block, comment.markup.link, comment.block.documentation, punctuation.definition.comment, comment.block.java, punctuation.definition.comment.shebang, comment.line.number-sign.shebang.shell #6e6e6e italic
markup.heading, constant.numeric, keyword.other.type, storage.type.annotation, meta.definition.variable, entity.name.tag, entity.other.attribute-name.id, entity.other.attribute-name.class, support.variable.property, support.type.property-name.json, punctuation.definition.variable, punctuation.definition.annotation #79c0ff —
invalid.deprecated #646464 —
markup.italic markup.bold, markup.bold markup.italic — italic bold
markup.strikethrough — strikethrough
markup.strikethrough markup.bold, markup.bold markup.strikethrough — strikethrough bold
markup.italic markup.bold markup.strikethrough, markup.bold markup.italic markup.strikethrough, markup.italic markup.strikethrough markup.bold, markup.bold markup.strikethrough markup.italic, markup.strikethrough markup.italic markup.bold, markup.strikethrough markup.bold markup.italic — italic strikethrough bold
markup.bold, variable.language.this, variable.language.this, variable.language.special.cls.python, variable.language.special.self.python, variable.parameter.function.language.special.cls.python, variable.parameter.function.language.special.self.python — 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...
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 }!` ;
}
Beyond | Coding Theme