Full workbench mockup using this variant's colors and tokenColors.
colors
Workbench UI color keys from the theme JSON colors map.
activityBar.background#ffffff
activityBar.foreground#42B549
activityBarBadge.background#FF0000
activityBarBadge.foreground#ffffff
button.background#FF5925
button.foreground#ffffff
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
scope
foreground
fontStyle
—
#F8F8F2
—
comment
#75715E
—
string
#bab46f
—
constant.numeric
#AE81FF
—
constant.language
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Tokopedia — Tokopedia
button.hoverBackground
#dd4010
editor.background#FFFFFF
editor.foreground#3B3A32
editor.lineHighlightBackground#FFF8DC
editor.selectionBackground#FFD700
editor.selectionHighlightBackground#FFD700
editorCursor.foreground#42B549
editorGroupHeader.tabsBackground#42B549
editorRuler.foreground#42B549
editorSuggestWidget.highlightForeground#ffffff
editorSuggestWidget.selectedBackground#50B5B5
editorWhitespace.foreground#3B3A32
list.activeSelectionBackground#FF5925
list.activeSelectionForeground#FFFFFF
list.hoverForeground#FF5925
list.inactiveSelectionForeground#4FA149
panel.background#FFFFFF
panel.border#FFFFFF
panelInput.border#DCDCDC
panelTitle.activeBorder#42B549
panelTitle.activeForeground#42B549
panelTitle.inactiveForeground#A9A9A9
sideBar.background#FFFFFF
sideBar.foreground#4FA149
sideBarSectionHeader.background#FFFFFF
sideBarSectionHeader.foreground#000000
sideBarTitle.foreground#bbbbbb
statusBar.background#4FA149
statusBar.border#4FA149
statusBar.foreground#ffffff
statusBarItem.activeBackground#42B549
statusBarItem.hoverBackground#42B549
terminal.background#ffffff
terminal.border#A9A9A9
terminal.foreground#000000
titleBar.activeBackground#4FA149
titleBar.activeForeground#ffffff
titleBar.border#42B549
titleBar.inactiveBackground#7fca7a
#AE81FF
—
constant.character, constant.other
#AE81FF
—
variable
—
italic
keyword
#F92672
—
storage
#F92672
storage.type
#179db6
italic
entity.name.class
#A6E22E
underline
entity.other.inherited-class
#A6E22E
italic underline
entity.name.function
#8fc919
variable.parameter
#FD971F
italic
entity.name.tag
#F92672
entity.other.attribute-name
#A6E22E
support.function
#2099b0
support.constant
#2aa9c1
support.type, support.class
#2aa9c1
italic
support.other.variable
#2aa9c1
—
invalid
#F8F8F0
invalid.deprecated
#F8F8F0
—
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}!`;}