Full workbench mockup using this variant's colors and tokenColors.
colors
Workbench UI color keys from the theme JSON colors map.
activityBar.background#1C1E22
activityBar.foreground#97a8aaff
activityBarBadge.background#1C1E22
activityBarBadge.foreground#97a8aaff
editor.background#1C1E22
editor.foreground#97a8aaff
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
scope
foreground
fontStyle
—
#97a8aaff
—
comment
#5C5754
—
string
#AD8E44C4
—
constant.numeric
#7590A0
—
constant.language
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Red Mint Theme — Red Mint
editor.lineHighlightBackground
#3D3B3A00
editor.selectionBackground#3D3B3A
editorCursor.foreground#97a8aaff
editorWhitespace.foreground#3D3B3A
sideBar.background#1C1E22
sideBar.foreground#97a8aaff
sideBarSectionHeader.background#1C1E22
sideBarSectionHeader.border#1C1E22
sideBarSectionHeader.foreground#97a8aaff
sideBarTitle.foreground#97a8aaff
#44AD95B8
—
constant.character, constant.other
#44AD95B8
—
variable
#97a8aaff
keyword
#AD5944F5
—
storage
#97a8aaff
storage.type
#857B60
—
entity.name.class
#97a8aaff
—
entity.other.inherited-class
#97a8aaff
—
entity.name.function
#7590A0
variable.parameter
#97a8aaff
—
entity.name.tag
#97a8aaff
entity.other.attribute-name
#97a8aaff
support.function
#7590A0
support.constant
#97A8AA
support.type, support.class
#97A8AA
—
support.other.variable
#97A8AA
invalid
#97a8aaff
invalid.deprecated
#97a8aaff
—
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...
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
~/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}!`;}