Full workbench mockup using this variant's colors and tokenColors.
colors
Workbench UI color keys from the theme JSON colors map.
activityBar.background#1B2029
activityBar.foreground#B7BCC7
activityBar.inactiveForeground#6B7280
editor.background#222630
editor.findMatchBackground#454A56
editor.findMatchBorder#8CA1B7
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
scope
foreground
fontStyle
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Slate — Slate
editor.findMatchHighlightBackground
#454A56
editor.foreground#B7BCC7
editor.lineHighlightBackground#272C36
editor.selectionBackground#454A56
editorCodeLens.foreground#6B7280
editorCursor.background#222630
editorCursor.foreground#D8DEEA
editorGroup.border#13161D
editorGroupHeader.tabsBackground#181C25
editorLightBulb.foreground#E3CB99
editorLineNumber.activeForeground#B7BCC7
editorLineNumber.foreground#6B7280
editorOverviewRuler.border#454A56
editorOverviewRuler.findMatchForeground#8CA1B7
editorWidget.background#1B2029
editorWidget.border#13161D
focusBorder#454A56
foreground#B7BCC7
input.background#13161D
list.activeSelectionBackground#272C36
list.activeSelectionForeground#B7BCC7
list.focusBackground#272C36
list.highlightForeground#D8DEEA
list.hoverBackground#272C36
list.inactiveSelectionBackground#272C36
minimap.findMatchHighlight#8CA1B7
minimap.selectionHighlight#454A56
rust_analyzer.inlayHints.foreground#6B7280
scrollbarSlider.activeBackground#454A56AA
scrollbarSlider.background#454A5666
scrollbarSlider.hoverBackground#454A56AA
selection.background#454A56
sideBar.background#1B2029
sideBar.foreground#818691
statusBar.background#272C36
statusBar.debuggingBackground#272C36
statusBar.debuggingForeground#C5907E
statusBar.foreground#818691
statusBar.noFolderBackground#272C36
statusBar.noFolderForeground#818691
tab.activeForeground#B7BCC7
tab.border#181C25
tab.inactiveBackground#181C25
tab.inactiveForeground#818691
titleBar.activeBackground#272C36
titleBar.activeForeground#B7BCC7
titleBar.border#454A56
titleBar.inactiveBackground#272C36
titleBar.inactiveForeground#818691
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+
Slate | Coding Theme
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}!`;}