VSCode Herdr Palettes

Name: VSCode Herdr Palettes
Author: shokk

Publisher: shokkThemes in package: 8

Eight lightweight VS Code color themes designed to provide named terminal palettes for Herdr's terminal theme.

Open in VS Code GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

VSCode Herdr Palettes — Herdr Catppuccin Dark

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
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}!`;
}

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*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#313244
activityBar.foreground#CDD6F4
descriptionForeground#585B70
editor.background#1E1E2E
editor.foreground#CDD6F4
editor.inactiveSelectionBackground#45475A
editor.selectionBackground#45475A
editorCursor.foreground#F5E0DC
editorLineNumber.activeForeground#CDD6F4
editorLineNumber.foreground#585B70
editorWidget.background#313244
editorWidget.foreground#CDD6F4
errorForeground#F38BA8
focusBorder#F5E0DC
foreground#CDD6F4
panel.background#1E1E2E
panel.border#585B70
sideBar.background#313244
sideBar.foreground#CDD6F4
statusBar.background#313244
statusBar.foreground#CDD6F4
terminal.ansiBlack#45475A
terminal.ansiBlue#89B4FA
terminal.ansiBrightBlack#585B70
terminal.ansiBrightBlue#89B4FA
terminal.ansiBrightCyan#94E2D5
terminal.ansiBrightGreen#A6E3A1
terminal.ansiBrightMagenta#F5C2E7
terminal.ansiBrightRed#F38BA8
terminal.ansiBrightWhite#BAC2DE
terminal.ansiBrightYellow#F9E2AF
terminal.ansiCyan#94E2D5
terminal.ansiGreen#A6E3A1
terminal.ansiMagenta#F5C2E7
terminal.ansiRed#F38BA8
terminal.ansiWhite#A6ADC8
terminal.ansiYellow#F9E2AF
terminal.background#1E1E2E
terminal.foreground#CDD6F4
terminal.selectionBackground#45475A
terminalCursor.foreground#F5E0DC
textLink.activeForeground#F5E0DC
textLink.foreground#89B4FA
titleBar.activeBackground#313244
titleBar.activeForeground#CDD6F4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#585B70	italic
string, constant.other.symbol	#A6E3A1	—
constant.numeric, constant.language	#F5C2E7	—
keyword, storage.type, storage.modifier	#F38BA8	—
entity.name.function, support.function	#89B4FA	—
entity.name.type, support.type, support.class	#F9E2AF	—
variable.language, variable.parameter	#94E2D5	—
entity.name.tag	#F38BA8	—
entity.other.attribute-name	#F9E2AF	—

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

VSCode Herdr Palettes — Herdr Catppuccin Latte Dark

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
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}!`;
}

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*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#414559
activityBar.foreground#C6D0F5
descriptionForeground#737994
editor.background#303446
editor.foreground#C6D0F5
editor.inactiveSelectionBackground#51576D
editor.selectionBackground#51576D
editorCursor.foreground#F2D5CF
editorLineNumber.activeForeground#C6D0F5
editorLineNumber.foreground#737994
editorWidget.background#414559
editorWidget.foreground#C6D0F5
errorForeground#E78284
focusBorder#F2D5CF
foreground#C6D0F5
panel.background#303446
panel.border#737994
sideBar.background#414559
sideBar.foreground#C6D0F5
statusBar.background#414559
statusBar.foreground#C6D0F5
terminal.ansiBlack#414559
terminal.ansiBlue#8CAAEE
terminal.ansiBrightBlack#737994
terminal.ansiBrightBlue#8CAAEE
terminal.ansiBrightCyan#81C8BE
terminal.ansiBrightGreen#A6D189
terminal.ansiBrightMagenta#F4B8E4
terminal.ansiBrightRed#E78284
terminal.ansiBrightWhite#C6D0F5
terminal.ansiBrightYellow#E5C890
terminal.ansiCyan#81C8BE
terminal.ansiGreen#A6D189
terminal.ansiMagenta#F4B8E4
terminal.ansiRed#E78284
terminal.ansiWhite#A5ADCE
terminal.ansiYellow#E5C890
terminal.background#303446
terminal.foreground#C6D0F5
terminal.selectionBackground#51576D
terminalCursor.foreground#F2D5CF
textLink.activeForeground#F2D5CF
textLink.foreground#8CAAEE
titleBar.activeBackground#414559
titleBar.activeForeground#C6D0F5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#737994	italic
string, constant.other.symbol	#A6D189	—
constant.numeric, constant.language	#F4B8E4	—
keyword, storage.type, storage.modifier	#E78284	—
entity.name.function, support.function	#8CAAEE	—
entity.name.type, support.type, support.class	#E5C890	—
variable.language, variable.parameter	#81C8BE	—
entity.name.tag	#E78284	—
entity.other.attribute-name	#E5C890	—

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

VSCode Herdr Palettes — Herdr Catppuccin Latte Light

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
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}!`;
}

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*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#E6E9EF
activityBar.foreground#4C4F69
descriptionForeground#6C6F85
editor.background#EFF1F5
editor.foreground#4C4F69
editor.inactiveSelectionBackground#CCD0DA
editor.selectionBackground#CCD0DA
editorCursor.foreground#DC8A78
editorLineNumber.activeForeground#4C4F69
editorLineNumber.foreground#6C6F85
editorWidget.background#E6E9EF
editorWidget.foreground#4C4F69
errorForeground#D20F39
focusBorder#DC8A78
foreground#4C4F69
panel.background#EFF1F5
panel.border#6C6F85
sideBar.background#E6E9EF
sideBar.foreground#4C4F69
statusBar.background#E6E9EF
statusBar.foreground#4C4F69
terminal.ansiBlack#5C5F77
terminal.ansiBlue#1E66F5
terminal.ansiBrightBlack#6C6F85
terminal.ansiBrightBlue#1E66F5
terminal.ansiBrightCyan#179299
terminal.ansiBrightGreen#40A02B
terminal.ansiBrightMagenta#EA76CB
terminal.ansiBrightRed#D20F39
terminal.ansiBrightWhite#4C4F69
terminal.ansiBrightYellow#DF8E1D
terminal.ansiCyan#179299
terminal.ansiGreen#40A02B
terminal.ansiMagenta#EA76CB
terminal.ansiRed#D20F39
terminal.ansiWhite#ACB0BE
terminal.ansiYellow#DF8E1D
terminal.background#EFF1F5
terminal.foreground#4C4F69
terminal.selectionBackground#CCD0DA
terminalCursor.foreground#DC8A78
textLink.activeForeground#DC8A78
textLink.foreground#1E66F5
titleBar.activeBackground#E6E9EF
titleBar.activeForeground#4C4F69

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6C6F85	italic
string, constant.other.symbol	#40A02B	—
constant.numeric, constant.language	#EA76CB	—
keyword, storage.type, storage.modifier	#D20F39	—
entity.name.function, support.function	#1E66F5	—
entity.name.type, support.type, support.class	#DF8E1D	—
variable.language, variable.parameter	#179299	—
entity.name.tag	#D20F39	—
entity.other.attribute-name	#DF8E1D	—

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

VSCode Herdr Palettes — Herdr Catppuccin Light

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
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}!`;
}

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*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#E6E9EF
activityBar.foreground#4C4F69
descriptionForeground#7C7F93
editor.background#EFF1F5
editor.foreground#4C4F69
editor.inactiveSelectionBackground#CCD0DA
editor.selectionBackground#CCD0DA
editorCursor.foreground#8839EF
editorLineNumber.activeForeground#4C4F69
editorLineNumber.foreground#7C7F93
editorWidget.background#E6E9EF
editorWidget.foreground#4C4F69
errorForeground#D20F39
focusBorder#8839EF
foreground#4C4F69
panel.background#EFF1F5
panel.border#7C7F93
sideBar.background#E6E9EF
sideBar.foreground#4C4F69
statusBar.background#E6E9EF
statusBar.foreground#4C4F69
terminal.ansiBlack#5C5F77
terminal.ansiBlue#1E66F5
terminal.ansiBrightBlack#7C7F93
terminal.ansiBrightBlue#1E66F5
terminal.ansiBrightCyan#04A5E5
terminal.ansiBrightGreen#40A02B
terminal.ansiBrightMagenta#8839EF
terminal.ansiBrightRed#D20F39
terminal.ansiBrightWhite#4C4F69
terminal.ansiBrightYellow#DF8E1D
terminal.ansiCyan#04A5E5
terminal.ansiGreen#40A02B
terminal.ansiMagenta#8839EF
terminal.ansiRed#D20F39
terminal.ansiWhite#ACB0BE
terminal.ansiYellow#DF8E1D
terminal.background#EFF1F5
terminal.foreground#4C4F69
terminal.selectionBackground#CCD0DA
terminalCursor.foreground#8839EF
textLink.activeForeground#8839EF
textLink.foreground#1E66F5
titleBar.activeBackground#E6E9EF
titleBar.activeForeground#4C4F69

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7C7F93	italic
string, constant.other.symbol	#40A02B	—
constant.numeric, constant.language	#8839EF	—
keyword, storage.type, storage.modifier	#D20F39	—
entity.name.function, support.function	#1E66F5	—
entity.name.type, support.type, support.class	#DF8E1D	—
variable.language, variable.parameter	#04A5E5	—
entity.name.tag	#D20F39	—
entity.other.attribute-name	#DF8E1D	—