Full workbench mockup using this variant's colors and tokenColors.
colors
Workbench UI color keys from the theme JSON colors map.
activityBar.background#1a4c37
activityBar.border#4cb88a
activityBar.foreground#4cb88a
activityBarBadge.background#ec8618
activityBarBadge.foreground#ffffff
editor.background#f9f6f0
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
scope
foreground
fontStyle
comment
#999988
—
string
#e6482c
—
constant.numeric
#009999
—
constant.language
#595143
bold
constant.character, constant.other
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
PSR Theme — PSR Theme
editor.foreground
#333333
sideBar.background#f9f6f0
sideBar.border#4cb88a
sideBar.foreground#595143
sideBarSectionHeader.background#1a4c37
sideBarSectionHeader.border#4cb88a
sideBarSectionHeader.foreground#4cb88a
sideBarTitle.foreground#1a4c37
statusBar.background#4cb88a
statusBar.foreground#1a4c37
statusBar.noFolderBackground#4cb88a
statusBar.noFolderForeground#1a4c37
#008080
—
variable
#008080
—
keyword
#595143
bold
storage
#595143
bold
storage.type
#595143
bold
entity.name.type.class
#445588
bold
entity.other.inherited-class
#595143
entity.name.function
#990000
bold
variable.parameter
#FD971F
bold
entity.name.tag
#445588
bold
entity.other.attribute-name
#595143
bold
support.function
#990000
bold
support.constant
#ec8618
—
support.type, support.class
#595143
—
support.other.variable
#FF0000
bold
invalid
#F92672
bold
invalid.deprecated
#FF0000
bold
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}!`;}