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 Everforest 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#343F44
activityBar.foreground#D3C6AA
descriptionForeground#7A8478
editor.background#2D353B
editor.foreground#D3C6AA
editor.inactiveSelectionBackground#543A48
editor.selectionBackground#543A48
editorCursor.foreground#E69875
editorLineNumber.activeForeground#D3C6AA
editorLineNumber.foreground#7A8478
editorWidget.background#343F44
editorWidget.foreground#D3C6AA
errorForeground#E67E80
focusBorder#E69875
foreground#D3C6AA
panel.background#2D353B
panel.border#7A8478
sideBar.background#343F44
sideBar.foreground#D3C6AA
statusBar.background#343F44
statusBar.foreground#D3C6AA
terminal.ansiBlack#475258
terminal.ansiBlue#7FBBB3
terminal.ansiBrightBlack#7A8478
terminal.ansiBrightBlue#7FBBB3
terminal.ansiBrightCyan#83C092
terminal.ansiBrightGreen#A7C080
terminal.ansiBrightMagenta#D699B6
terminal.ansiBrightRed#E67E80
terminal.ansiBrightWhite#FFF9E8
terminal.ansiBrightYellow#DBBC7F
terminal.ansiCyan#83C092
terminal.ansiGreen#A7C080
terminal.ansiMagenta#D699B6
terminal.ansiRed#E67E80
terminal.ansiWhite#D3C6AA
terminal.ansiYellow#DBBC7F
terminal.background#2D353B
terminal.foreground#D3C6AA
terminal.selectionBackground#543A48
terminalCursor.foreground#E69875
textLink.activeForeground#E69875
textLink.foreground#7FBBB3
titleBar.activeBackground#343F44
titleBar.activeForeground#D3C6AA

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7A8478	italic
string, constant.other.symbol	#A7C080	—
constant.numeric, constant.language	#D699B6	—
keyword, storage.type, storage.modifier	#E67E80	—
entity.name.function, support.function	#7FBBB3	—
entity.name.type, support.type, support.class	#DBBC7F	—
variable.language, variable.parameter	#83C092	—
entity.name.tag	#E67E80	—
entity.other.attribute-name	#DBBC7F	—

VS Code preview

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

VSCode Herdr Palettes — Herdr Everforest 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#F4EEDC
activityBar.foreground#5C6A72
descriptionForeground#939F91
editor.background#FDF6E3
editor.foreground#5C6A72
editor.inactiveSelectionBackground#E6E2CC
editor.selectionBackground#E6E2CC
editorCursor.foreground#F57D26
editorLineNumber.activeForeground#5C6A72
editorLineNumber.foreground#939F91
editorWidget.background#F4EEDC
editorWidget.foreground#5C6A72
errorForeground#F85552
focusBorder#F57D26
foreground#5C6A72
panel.background#FDF6E3
panel.border#939F91
sideBar.background#F4EEDC
sideBar.foreground#5C6A72
statusBar.background#F4EEDC
statusBar.foreground#5C6A72
terminal.ansiBlack#5C6A72
terminal.ansiBlue#3A94C5
terminal.ansiBrightBlack#939F91
terminal.ansiBrightBlue#3A94C5
terminal.ansiBrightCyan#35A77C
terminal.ansiBrightGreen#8DA101
terminal.ansiBrightMagenta#DF69BA
terminal.ansiBrightRed#F85552
terminal.ansiBrightWhite#4B565C
terminal.ansiBrightYellow#DFA000
terminal.ansiCyan#35A77C
terminal.ansiGreen#8DA101
terminal.ansiMagenta#DF69BA
terminal.ansiRed#F85552
terminal.ansiWhite#E0D8C3
terminal.ansiYellow#DFA000
terminal.background#FDF6E3
terminal.foreground#5C6A72
terminal.selectionBackground#E6E2CC
terminalCursor.foreground#F57D26
textLink.activeForeground#F57D26
textLink.foreground#3A94C5
titleBar.activeBackground#F4EEDC
titleBar.activeForeground#5C6A72

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#939F91	italic
string, constant.other.symbol	#8DA101	—
constant.numeric, constant.language	#DF69BA	—
keyword, storage.type, storage.modifier	#F85552	—
entity.name.function, support.function	#3A94C5	—
entity.name.type, support.type, support.class	#DFA000	—
variable.language, variable.parameter	#35A77C	—
entity.name.tag	#F85552	—
entity.other.attribute-name	#DFA000	—

VS Code preview

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

VSCode Herdr Palettes — Herdr Neverforest 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#272E33
activityBar.foreground#D3C6AA
descriptionForeground#5C6668
editor.background#1E2326
editor.foreground#D3C6AA
editor.inactiveSelectionBackground#3C4144
editor.selectionBackground#3C4144
editorCursor.foreground#E69875
editorLineNumber.activeForeground#D3C6AA
editorLineNumber.foreground#5C6668
editorWidget.background#272E33
editorWidget.foreground#D3C6AA
errorForeground#E67E80
focusBorder#E69875
foreground#D3C6AA
panel.background#1E2326
panel.border#5C6668
sideBar.background#272E33
sideBar.foreground#D3C6AA
statusBar.background#272E33
statusBar.foreground#D3C6AA
terminal.ansiBlack#272E33
terminal.ansiBlue#7FBBB3
terminal.ansiBrightBlack#5C6668
terminal.ansiBrightBlue#7FBBB3
terminal.ansiBrightCyan#83C092
terminal.ansiBrightGreen#A7C080
terminal.ansiBrightMagenta#D699B6
terminal.ansiBrightRed#E67E80
terminal.ansiBrightWhite#FFF9E8
terminal.ansiBrightYellow#DBBC7F
terminal.ansiCyan#83C092
terminal.ansiGreen#A7C080
terminal.ansiMagenta#D699B6
terminal.ansiRed#E67E80
terminal.ansiWhite#D3C6AA
terminal.ansiYellow#DBBC7F
terminal.background#1E2326
terminal.foreground#D3C6AA
terminal.selectionBackground#3C4144
terminalCursor.foreground#E69875
textLink.activeForeground#E69875
textLink.foreground#7FBBB3
titleBar.activeBackground#272E33
titleBar.activeForeground#D3C6AA

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#5C6668	italic
string, constant.other.symbol	#A7C080	—
constant.numeric, constant.language	#D699B6	—
keyword, storage.type, storage.modifier	#E67E80	—
entity.name.function, support.function	#7FBBB3	—
entity.name.type, support.type, support.class	#DBBC7F	—
variable.language, variable.parameter	#83C092	—
entity.name.tag	#E67E80	—
entity.other.attribute-name	#DBBC7F	—

VS Code preview

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

VSCode Herdr Palettes — Herdr Neverforest 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#F3EAD3
activityBar.foreground#4B565C
descriptionForeground#829181
editor.background#FFFBEF
editor.foreground#4B565C
editor.inactiveSelectionBackground#E8DFC8
editor.selectionBackground#E8DFC8
editorCursor.foreground#F57D26
editorLineNumber.activeForeground#4B565C
editorLineNumber.foreground#829181
editorWidget.background#F3EAD3
editorWidget.foreground#4B565C
errorForeground#F85552
focusBorder#F57D26
foreground#4B565C
panel.background#FFFBEF
panel.border#829181
sideBar.background#F3EAD3
sideBar.foreground#4B565C
statusBar.background#F3EAD3
statusBar.foreground#4B565C
terminal.ansiBlack#4B565C
terminal.ansiBlue#3A94C5
terminal.ansiBrightBlack#829181
terminal.ansiBrightBlue#3A94C5
terminal.ansiBrightCyan#35A77C
terminal.ansiBrightGreen#8DA101
terminal.ansiBrightMagenta#DF69BA
terminal.ansiBrightRed#F85552
terminal.ansiBrightWhite#4B565C
terminal.ansiBrightYellow#DFA000
terminal.ansiCyan#35A77C
terminal.ansiGreen#8DA101
terminal.ansiMagenta#DF69BA
terminal.ansiRed#F85552
terminal.ansiWhite#F3EAD3
terminal.ansiYellow#DFA000
terminal.background#FFFBEF
terminal.foreground#4B565C
terminal.selectionBackground#E8DFC8
terminalCursor.foreground#F57D26
textLink.activeForeground#F57D26
textLink.foreground#3A94C5
titleBar.activeBackground#F3EAD3
titleBar.activeForeground#4B565C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#829181	italic
string, constant.other.symbol	#8DA101	—
constant.numeric, constant.language	#DF69BA	—
keyword, storage.type, storage.modifier	#F85552	—
entity.name.function, support.function	#3A94C5	—
entity.name.type, support.type, support.class	#DFA000	—
variable.language, variable.parameter	#35A77C	—
entity.name.tag	#F85552	—
entity.other.attribute-name	#DFA000	—