Full workbench mockup using this variant's colors and tokenColors.
colors
Workbench UI color keys from the theme JSON colors map.
activityBar.activeBorder#16BDEC
activityBar.background#FCFCFC
activityBar.border#DBDBDB
activityBar.foreground#1A1A1A
activityBar.inactiveForeground#C7C4C2
breadcrumb.background#FCFCFC
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
scope
foreground
fontStyle
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Wordsmith — Wordsmith Light
debugIcon.breakpointCurrentStackframeForeground
#16BDEC
debugIcon.breakpointForeground#16BDEC
diffEditor.insertedTextBackground#3F831E33
diffEditor.removedTextBackground#CB481933
editor.background#F7F7F7
editor.foreground#1A1A1A
editor.hoverHighlightBackground#BFE8F4
editor.selectionBackground#BFE8F4
editor.selectionHighlightBackground#BFE8F455
editor.stackFrameHighlightBackground#BFE8F4
editor.wordHighlightBackground#BFE8F455
editorCursor.background#16BDEC
editorCursor.foreground#16BDEC
editorGroup.border#DBDBDB
editorGroupHeader.border#DBDBDB
editorGroupHeader.noTabsBackground#FCFCFC
editorGroupHeader.tabsBackground#F7F7F7
editorGutter.addedBackground#3F831E
editorGutter.deletedBackground#CB4819
editorGutter.modifiedBackground#A66501
editorIndentGuide.activeBackground#C7C4C2
editorIndentGuide.background#C7C4C2
editorLineNumber.activeForeground#1A1A1A
editorLineNumber.foreground#C7C4C2
editorLink.activeForeground#16BDEC
editorOverviewRuler.addedForeground#3F831E
editorOverviewRuler.deletedForeground#CB4819
editorOverviewRuler.modifiedForeground#A66501
editorWidget.background#FCFCFC
editorWidget.border#DBDBDB
foreground#1A1A1A
gitDecoration.addedResourceForeground#3F831E
gitDecoration.deletedResourceForeground#CB4819
gitDecoration.modifiedResourceForeground#A66501
input.background#FFFFFF
list.activeSelectionBackground#F0F0F0
list.activeSelectionForeground#1A1A1A
list.focusBackground#F0F0F0
list.highlightForeground#16BDEC
list.hoverBackground#FCFCFC
list.inactiveSelectionBackground#FCFCFC
minimap.selectionHighlight#BFE8F4
minimapGutter.addedBackground#3F831E
minimapGutter.deletedBackground#CB4819
minimapGutter.modifiedBackground#A66501
panel.background#FCFCFC
panel.border#DBDBDB
panelTitle.activeForeground#1A1A1A
panelTitle.inactiveForeground#1A1A1A
peekView.border#C7C4C2
peekViewEditor.background#FCFCFC
peekViewEditor.matchHighlightBackground#BFE8F4
peekViewResult.background#F7F7F7
peekViewResult.fileForeground#1A1A1A
peekViewResult.lineForeground#999999
peekViewResult.matchHighlightBackground#BFE8F4
peekViewResult.selectionBackground#F0F0F0
peekViewResult.selectionForeground#1A1A1A
peekViewTitle.background#F7F7F7
peekViewTitleDescription.foreground#999999
peekViewTitleLabel.foreground#1A1A1A
rust_analyzer.inlayHints.foreground#C7C4C2
selection.background#B3D7FF
sideBar.background#FCFCFC
sideBar.border#DBDBDB
sideBarSectionHeader.background#FCFCFC
sideBarSectionHeader.foreground#999999
statusBar.background#F7F7F7
statusBar.border#DBDBDB
statusBar.debuggingBackground#F7F7F7
statusBar.foreground#1A1A1A
statusBar.noFolderBackground#F7F7F7
tab.activeBackground#FCFCFC
tab.activeForeground#1A1A1A
tab.border#DBDBDB
tab.inactiveBackground#F7F7F7
tab.inactiveForeground#1A1A1A
terminal.ansiBlack#F7F7F7
terminal.ansiBlue#3476B9
terminal.ansiBrightBlack#C7C4C2
terminal.ansiBrightBlue#3476B9
terminal.ansiBrightCyan#16BDEC
terminal.ansiBrightGreen#3F831E
terminal.ansiBrightMagenta#B24FA3
terminal.ansiBrightRed#CB4819
terminal.ansiBrightWhite#1A1A1A
terminal.ansiBrightYellow#A66501
terminal.ansiCyan#16BDEC
terminal.ansiGreen#3F831E
terminal.ansiMagenta#B24FA3
terminal.ansiRed#CB4819
terminal.ansiWhite#1A1A1A
terminal.ansiYellow#A66501
terminal.foreground#1A1A1A
textLink.activeForeground#16BDEC
textLink.foreground#16BDEC
titleBar.activeBackground#FCFCFC
titleBar.activeForeground#1A1A1A
titleBar.inactiveBackground#FCFCFC
titleBar.inactiveForeground#1A1A1A
tree.indentGuidesStroke#C7C4C2
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}!`;}
3
fetchUser.ts
index.ts
README.md
srccomponentsfetchUser.ts
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*
01
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Light+
Button.tsx
Modal.tsx
hooks
utils
index.ts
public
package.json
tsconfig.json
README.md
fetchUser
31
32
33
~/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}!`;}