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#141414
activityBar.border#2E2E2E
activityBar.foreground#CCCCCC
activityBar.inactiveForeground#707070
breadcrumb.background#141414
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 Dark
debugIcon.breakpointCurrentStackframeForeground
#16BDEC
debugIcon.breakpointForeground#16BDEC
diffEditor.insertedTextBackground#82A56F33
diffEditor.removedTextBackground#D9856733
editor.background#1A1A1A
editor.foreground#CCCCCC
editor.hoverHighlightBackground#19424E
editor.selectionBackground#19424E
editor.selectionHighlightBackground#19424E55
editor.stackFrameHighlightBackground#19424E
editor.wordHighlightBackground#19424E55
editorCursor.background#16BDEC
editorCursor.foreground#16BDEC
editorGroup.border#2E2E2E
editorGroupHeader.border#2E2E2E
editorGroupHeader.noTabsBackground#141414
editorGroupHeader.tabsBackground#1A1A1A
editorGutter.addedBackground#82A56F
editorGutter.deletedBackground#D98567
editorGutter.modifiedBackground#C1944E
editorIndentGuide.activeBackground#707070
editorIndentGuide.background#707070
editorLineNumber.activeForeground#CCCCCC
editorLineNumber.foreground#707070
editorLink.activeForeground#16BDEC
editorOverviewRuler.addedForeground#82A56F
editorOverviewRuler.deletedForeground#D98567
editorOverviewRuler.modifiedForeground#C1944E
editorWidget.background#141414
editorWidget.border#2E2E2E
foreground#CCCCCC
gitDecoration.addedResourceForeground#82A56F
gitDecoration.deletedResourceForeground#D98567
gitDecoration.modifiedResourceForeground#C1944E
input.background#262626
list.activeSelectionBackground#2B2B2B
list.activeSelectionForeground#CCCCCC
list.focusBackground#2B2B2B
list.highlightForeground#16BDEC
list.hoverBackground#141414
list.inactiveSelectionBackground#141414
minimap.selectionHighlight#19424E
minimapGutter.addedBackground#82A56F
minimapGutter.deletedBackground#D98567
minimapGutter.modifiedBackground#C1944E
panel.background#141414
panel.border#2E2E2E
panelTitle.activeForeground#CCCCCC
panelTitle.inactiveForeground#CCCCCC
peekView.border#707070
peekViewEditor.background#141414
peekViewEditor.matchHighlightBackground#19424E
peekViewResult.background#1A1A1A
peekViewResult.fileForeground#CCCCCC
peekViewResult.lineForeground#757575
peekViewResult.matchHighlightBackground#19424E
peekViewResult.selectionBackground#2B2B2B
peekViewResult.selectionForeground#CCCCCC
peekViewTitle.background#1A1A1A
peekViewTitleDescription.foreground#757575
peekViewTitleLabel.foreground#CCCCCC
rust_analyzer.inlayHints.foreground#707070
selection.background#3F638B
sideBar.background#141414
sideBar.border#2E2E2E
sideBarSectionHeader.background#141414
sideBarSectionHeader.foreground#757575
statusBar.background#1A1A1A
statusBar.border#2E2E2E
statusBar.debuggingBackground#1A1A1A
statusBar.foreground#CCCCCC
statusBar.noFolderBackground#1A1A1A
tab.activeBackground#141414
tab.activeForeground#CCCCCC
tab.border#2E2E2E
tab.inactiveBackground#1A1A1A
tab.inactiveForeground#CCCCCC
terminal.ansiBlack#1A1A1A
terminal.ansiBlue#7B9FC2
terminal.ansiBrightBlack#707070
terminal.ansiBrightBlue#7B9FC2
terminal.ansiBrightCyan#16BDEC
terminal.ansiBrightGreen#82A56F
terminal.ansiBrightMagenta#BA8DB3
terminal.ansiBrightRed#D98567
terminal.ansiBrightWhite#CCCCCC
terminal.ansiBrightYellow#C1944E
terminal.ansiCyan#16BDEC
terminal.ansiGreen#82A56F
terminal.ansiMagenta#BA8DB3
terminal.ansiRed#D98567
terminal.ansiWhite#CCCCCC
terminal.ansiYellow#C1944E
terminal.foreground#CCCCCC
textLink.activeForeground#16BDEC
textLink.foreground#16BDEC
titleBar.activeBackground#141414
titleBar.activeForeground#CCCCCC
titleBar.inactiveBackground#141414
titleBar.inactiveForeground#CCCCCC
tree.indentGuidesStroke#707070
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.tsfetchUser
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*
01
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
Button.tsx
Modal.tsx
hooks
utils
index.ts
public
package.json
tsconfig.json
README.md
31
32
33
$
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}!`;}