Full workbench mockup using this variant's colors and tokenColors.
colors
Workbench UI color keys from the theme JSON colors map.
activityBar.background#1c1c1c
activityBar.foreground#abb2bf
activityBarBadge.background#61afef
activityBarBadge.foreground#1c1c1c
editor.background#1c1c1c
editor.findMatchBackground#61afef00
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
scope
foreground
fontStyle
comment, punctuation.definition.comment
#767676
—
string, constant.other.symbol, constant.other.key
#87af87
—
variable
#87afaf
—
constant.numeric
#d7875f
—
keyword
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Habamax — Habamax
editor.findMatchHighlightBackground
#61afef33
editor.foreground#abb2bf
editor.hoverHighlightBackground#3e445100
editor.inactiveSelectionBackground#3e44517e
editor.lineHighlightBackground#2c323c
editor.selectionBackground#3E4451
editor.selectionHighlightBackground#3e445100
editorBracketMatch.background#3E4451
editorBracketMatch.border#61afef
editorCursor.foreground#abb2bf
editorGutter.background#1c1c1c
editorIndentGuide.activeBackground1#5c6370
editorIndentGuide.background1#3E4451
editorLineNumber.activeForeground#abb2bf
editorLineNumber.foreground#5c6370
editorRuler.foreground#5c6370
panel.background#1c1c1c
panel.border#3E4451
panelTitle.activeBorder#61afef
panelTitle.activeForeground#abb2bf
panelTitle.inactiveForeground#5c6370
sideBar.background#1c1c1c
sideBar.foreground#abb2bf
sideBarSectionHeader.background#1c1c1c
sideBarSectionHeader.foreground#abb2bf
statusBar.background#1c1c1c
statusBar.debuggingBackground#98c379
statusBar.debuggingForeground#1c1c1c
statusBar.foreground#abb2bf
statusBar.noFolderBackground#1c1c1c
statusBar.noFolderForeground#abb2bf
statusBarItem.hoverBackground#3E4451
statusBarItem.prominentBackground#3E4451
statusBarItem.prominentHoverBackground#3E4451
terminal.ansiBlack#1c1c1c
terminal.ansiBlue#61afef
terminal.ansiBrightBlack#5c6370
terminal.ansiBrightBlue#8fc6f4
terminal.ansiBrightCyan#7bc6d0
terminal.ansiBrightGreen#b3d39c
terminal.ansiBrightMagenta#d7a1e7
terminal.ansiBrightRed#e9969d
terminal.ansiBrightWhite#c8cdd5
terminal.ansiBrightYellow#edd4a6
terminal.ansiCyan#56b6c2
terminal.ansiGreen#98c379
terminal.ansiMagenta#c678dd
terminal.ansiRed#e06c75
terminal.ansiWhite#abb2bf
terminal.ansiYellow#e5c07b
terminal.background#1c1c1c
terminal.foreground#abb2bf
terminalCursor.foreground#abb2bf
titleBar.activeBackground#1c1c1c
titleBar.activeForeground#abb2bf
titleBar.inactiveBackground#1c1c1c
titleBar.inactiveForeground#5c6370
#af87af
—
keyword.control
#af87af
—
storage
#af87af
—
storage.type
#87afd7
—
entity.name.function
#87afaf
—
variable.parameter
#87afaf
—
entity.name.type
#87afd7
—
entity.name.tag
#5f8787
—
meta.tag
#87afaf
—
punctuation.definition.tag
#5f8787
—
punctuation.separator
#abb2bf
—
punctuation.terminator
#abb2bf
—
support.function
#87afaf
—
support.type
#87afd7
—
support.class
#87afd7
—
support.constant
#d7875f
—
support.variable
#d7875f
—
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}!`;}