HearthCode Theme

Name: HearthCode Theme
Author: HearthCode

Publisher: HearthCodeThemes in package: 4

Warmth or structure, with meaning kept clear across Dark and Light. Includes calibrated Ember and Moss themes plus the built-in Theme Forge.

Open in VS Code GitHub

Color themes

VS Code preview

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

HearthCode Theme — HearthCode Ember 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#16120f
activityBar.border#332d29
activityBar.foreground#d3c9b8
activityBar.inactiveForeground#5f5850
activityBarBadge.background#dc8d46
activityBarBadge.foreground#191815
badge.background#dc8d46
badge.foreground#191815
button.background#dc8d46
button.foreground#191815
button.hoverBackground#e29a54
button.secondaryBackground#443e38
button.secondaryForeground#d3c9b8
dropdown.background#292420
dropdown.border#443e38
dropdown.foreground#d3c9b8
editor.background#1f1a17
editor.findMatchBackground#dc8d4636
editor.findMatchHighlightBackground#dc8d461a
editor.foreground#d3c9b8
editor.lineHighlightBackground#292420
editor.selectionBackground#dc8d462f
editor.selectionHighlightBackground#dc8d4618
editor.wordHighlightBackground#dc8d461d
editorBracketHighlight.foreground1#dc8d46
editorBracketHighlight.foreground2#e1ba73
editorBracketHighlight.foreground3#8dbb75
editorBracketMatch.background#dc8d4618
editorBracketMatch.border#dc8d4652
editorCursor.background#1f1a17
editorCursor.foreground#dc8d46
editorError.foreground#cc5a3f
editorGroupHeader.tabsBackground#16120f
editorGroupHeader.tabsBorder#332d29
editorIndentGuide.activeBackground1#655b4a
editorIndentGuide.background1#48423b
editorInfo.foreground#6f94a4
editorLineNumber.activeForeground#a3947c
editorLineNumber.foreground#615a52
editorWarning.foreground#cb844a
editorWhitespace.foreground#48423b
focusBorder#dc8d46a6
gitDecoration.addedResourceForeground#98ab7d
gitDecoration.conflictingResourceForeground#cc5a3f
gitDecoration.deletedResourceForeground#cc5a3f
gitDecoration.ignoredResourceForeground#5f5850
gitDecoration.modifiedResourceForeground#cb844a
gitDecoration.untrackedResourceForeground#98ab7d
input.background#292420
input.border#443e38
input.foreground#d3c9b8
input.placeholderForeground#5f5850
inputOption.activeBackground#dc8d4616
inputOption.activeBorder#dc8d46
list.activeSelectionBackground#3b3630
list.activeSelectionForeground#e8ddca
list.focusBackground#3b3630
list.highlightForeground#dc8d46
list.hoverBackground#2d2520
list.hoverForeground#d3c9b8
list.inactiveSelectionBackground#2f2b26
notificationLink.foreground#dc8d46
notifications.background#292420
notifications.border#443e38
notifications.foreground#d3c9b8
panel.background#16120f
panel.border#332d29
panelTitle.activeBorder#dc8d46
panelTitle.activeForeground#d3c9b8
panelTitle.inactiveForeground#7d766b
progressBar.background#dc8d46
scrollbarSlider.activeBackground#655b4aaa
scrollbarSlider.background#4a433866
scrollbarSlider.hoverBackground#4a433899
selection.background#dc8d462f
sideBar.background#16120f
sideBar.border#332d29
sideBar.foreground#989083
sideBarSectionHeader.background#2c241f
sideBarSectionHeader.border#332d29
sideBarSectionHeader.foreground#7d766b
sideBarTitle.foreground#7d766b
statusBar.background#9a5426
statusBar.border#332d29
statusBar.debuggingBackground#5d3418
statusBar.debuggingForeground#f5ead8
statusBar.foreground#f5ead8
statusBar.noFolderBackground#312b23
statusBar.noFolderForeground#f5ead8
statusBarItem.activeBackground#dc8d4633
statusBarItem.hoverBackground#dc8d4626
tab.activeBackground#1f1a17
tab.activeBorder#dc8d46
tab.activeForeground#d3c9b8
tab.border#332d29
tab.hoverBackground#2d2520
tab.inactiveBackground#16120f
tab.inactiveForeground#7d766b
tab.unfocusedActiveForeground#989083
terminal.ansiBlack#2f2921
terminal.ansiBlue#6f8ca4
terminal.ansiBrightBlack#655c4f
terminal.ansiBrightBlue#86a4bc
terminal.ansiBrightCyan#8cb9b3
terminal.ansiBrightGreen#96b986
terminal.ansiBrightMagenta#c5a080
terminal.ansiBrightRed#d37962
terminal.ansiBrightWhite#e8ddca
terminal.ansiBrightYellow#c7a95b
terminal.ansiCyan#79a8a2
terminal.ansiGreen#87ab70
terminal.ansiMagenta#b38b6a
terminal.ansiRed#c66a52
terminal.ansiWhite#d3c9b8
terminal.ansiYellow#b89543
terminal.background#1f1a17
terminal.foreground#d3c9b8
terminalCursor.foreground#dc8d46
titleBar.activeBackground#16120f
titleBar.activeForeground#d3c9b8
titleBar.border#332d29
titleBar.inactiveBackground#16120f
titleBar.inactiveForeground#7d766b
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#756958	italic
keyword, storage.type, storage.modifier, keyword.control	#ca5b41	bold
keyword.operator, keyword.operator.assignment	#9c978f
meta.function-call entity.name.function, meta.function-call.js entity.name.function.js, meta.function-call.ts entity.name.function.ts, meta.function-call.py entity.name.function.py, meta.function-call.python entity.name.function.python, meta.function-call.go entity.name.function.go, meta.function-call.rust entity.name.function.rust	#6f94a4	—
meta.method-call entity.name.function, meta.method-call.js entity.name.function.js, meta.method-call.ts entity.name.function.ts, meta.method-call.py entity.name.function.py, meta.method-call.python entity.name.function.python, meta.method-call.go entity.name.function.go, meta.method-call.rust entity.name.function.rust	#ad6a45	—
entity.name.function, support.function, meta.function-call.generic	#6f94a4	—
entity.name.function.member, entity.name.function.member.python, entity.name.function.member.go, entity.name.function.member.rust	#ad6a45	—
variable.other.property, variable.other.member, meta.property-name, support.type.property-name	#788058	—
string, string.quoted, string.template, string.regexp	#c39b69	—
constant.numeric, constant.language.boolean, constant.language.null, constant.language.undefined	#aa7a94	—
entity.name.type, entity.name.class, storage.type.java, storage.type.primitive.java, entity.name.struct.rust, entity.name.type.class, support.type, support.type.builtin, support.class	#99904c	italic
variable, variable.other.readwrite, variable.other.constant	#c3bfb9	—
meta.object-literal.key	#b7774f	—
entity.other.attribute-name	#5ea2c4	—
entity.name.tag, punctuation.definition.tag	#af513b	—
meta.decorator, punctuation.decorator	#caa46c	italic
punctuation, meta.brace	#a29663	—
constant.other.color, support.constant	#aa7a94	—
markup.heading	#e1ba73	bold
markup.bold	#c26f59	bold
markup.italic	#c89254	italic
markup.inline.raw, markup.fenced_code	#8fbd79	—
markup.underline.link	#8fbd79	—
invalid.deprecated	#ca8364	strikethrough
invalid.illegal	#ca8364	underline

VS Code preview

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

HearthCode Theme — HearthCode Ember 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#e1d6c7
activityBar.border#d0c4b3
activityBar.foreground#352b21
activityBar.inactiveForeground#a99f91
activityBarBadge.background#4c7688
activityBarBadge.foreground#faf5ef
badge.background#4c7688
badge.foreground#faf5ef
button.background#4c7688
button.foreground#faf5ef
button.hoverBackground#3f6678
button.secondaryBackground#d3c8b9
button.secondaryForeground#352b21
dropdown.background#dfd2c1
dropdown.border#d3c8b9
dropdown.foreground#352b21
editor.background#ecdfcd
editor.findMatchBackground#4c768836
editor.findMatchHighlightBackground#4c76881a
editor.foreground#30261b
editor.lineHighlightBackground#dccfbe
editor.selectionBackground#4c768820
editor.selectionHighlightBackground#4c768810
editor.wordHighlightBackground#4c768814
editorBracketHighlight.foreground1#4c7688
editorBracketHighlight.foreground2#674100
editorBracketHighlight.foreground3#2f6f2d
editorBracketMatch.background#4c768816
editorBracketMatch.border#4c768846
editorCursor.background#ecdfcd
editorCursor.foreground#4c7688
editorError.foreground#b04935
editorGroupHeader.tabsBackground#e1d6c7
editorGroupHeader.tabsBorder#d0c4b3
editorIndentGuide.activeBackground1#b49d7b
editorIndentGuide.background1#d5c9b9
editorInfo.foreground#416d86
editorLineNumber.activeForeground#7e5e37
editorLineNumber.foreground#b2a696
editorWarning.foreground#ba7239
editorWhitespace.foreground#d5c9b9
focusBorder#4c7688f2
gitDecoration.addedResourceForeground#6a7d58
gitDecoration.conflictingResourceForeground#b04935
gitDecoration.deletedResourceForeground#b04935
gitDecoration.ignoredResourceForeground#a99f91
gitDecoration.modifiedResourceForeground#ba7239
gitDecoration.untrackedResourceForeground#6a7d58
input.background#dfd2c1
input.border#d3c8b9
input.foreground#352b21
input.placeholderForeground#a99f91
inputOption.activeBackground#4c76880f
inputOption.activeBorder#4c7688
list.activeSelectionBackground#d9cec0
list.activeSelectionForeground#352b21
list.focusBackground#d9cec0
list.highlightForeground#4c7688
list.hoverBackground#e2d7ca
list.hoverForeground#352b21
list.inactiveSelectionBackground#dbd0c1
notificationLink.foreground#4c7688
notifications.background#dfd2c1
notifications.border#d3c8b9
notifications.foreground#352b21
panel.background#e1d6c7
panel.border#d0c4b3
panelTitle.activeBorder#4c7688
panelTitle.activeForeground#352b21
panelTitle.inactiveForeground#80766a
progressBar.background#4c7688
scrollbarSlider.activeBackground#b49d7baa
scrollbarSlider.background#d2c2a566
scrollbarSlider.hoverBackground#d2c2a599
selection.background#4c768820
sideBar.background#e1d6c7
sideBar.border#d0c4b3
sideBar.foreground#5a5045
sideBarSectionHeader.background#e5dacd
sideBarSectionHeader.border#d0c4b3
sideBarSectionHeader.foreground#80766a
sideBarTitle.foreground#80766a
statusBar.background#a85120
statusBar.border#d0c4b3
statusBar.debuggingBackground#7f4313
statusBar.debuggingForeground#f7efe6
statusBar.foreground#f7efe6
statusBar.noFolderBackground#8a562d
statusBar.noFolderForeground#f7efe6
statusBarItem.activeBackground#4c768833
statusBarItem.hoverBackground#4c768826
tab.activeBackground#ecdfcd
tab.activeBorder#4c7688
tab.activeForeground#352b21
tab.border#d0c4b3
tab.hoverBackground#e2d7ca
tab.inactiveBackground#e1d6c7
tab.inactiveForeground#80766a
tab.unfocusedActiveForeground#5a5045
terminal.ansiBlack#3a3020
terminal.ansiBlue#2a5070
terminal.ansiBrightBlack#7f6d53
terminal.ansiBrightBlue#3a6080
terminal.ansiBrightCyan#3a7060
terminal.ansiBrightGreen#3b7f38
terminal.ansiBrightMagenta#885428
terminal.ansiBrightRed#be4a2a
terminal.ansiBrightWhite#2f210e
terminal.ansiBrightYellow#927a3e
terminal.ansiCyan#2a6050
terminal.ansiGreen#2e6a2c
terminal.ansiMagenta#784418
terminal.ansiRed#ad3518
terminal.ansiWhite#624a2c
terminal.ansiYellow#7f6531
terminal.background#ecdfcd
terminal.foreground#30261b
terminalCursor.foreground#4c7688
titleBar.activeBackground#e1d6c7
titleBar.activeForeground#352b21
titleBar.border#d0c4b3
titleBar.inactiveBackground#e1d6c7
titleBar.inactiveForeground#80766a
widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#83776d	italic
keyword, storage.type, storage.modifier, keyword.control	#b6442f	bold
keyword.operator, keyword.operator.assignment	#64675f
meta.function-call entity.name.function, meta.function-call.js entity.name.function.js, meta.function-call.ts entity.name.function.ts, meta.function-call.py entity.name.function.py, meta.function-call.python entity.name.function.python, meta.function-call.go entity.name.function.go, meta.function-call.rust entity.name.function.rust	#2e6f8f	—
meta.method-call entity.name.function, meta.method-call.js entity.name.function.js, meta.method-call.ts entity.name.function.ts, meta.method-call.py entity.name.function.py, meta.method-call.python entity.name.function.python, meta.method-call.go entity.name.function.go, meta.method-call.rust entity.name.function.rust	#a46746	—
entity.name.function, support.function, meta.function-call.generic	#2e6f8f	—
entity.name.function.member, entity.name.function.member.python, entity.name.function.member.go, entity.name.function.member.rust	#a46746	—
variable.other.property, variable.other.member, meta.property-name, support.type.property-name	#5c6447	—
string, string.quoted, string.template, string.regexp	#7a4f21	—
constant.numeric, constant.language.boolean, constant.language.null, constant.language.undefined	#8d5e75	—
entity.name.type, entity.name.class, storage.type.java, storage.type.primitive.java, entity.name.struct.rust, entity.name.type.class, support.type, support.type.builtin, support.class	#736a18	italic
variable, variable.other.readwrite, variable.other.constant	#4a453f	—
meta.object-literal.key	#894c20	—
entity.other.attribute-name	#005bbb	—
entity.name.tag, punctuation.definition.tag	#77291e	—
meta.decorator, punctuation.decorator	#8a4700	italic
punctuation, meta.brace	#8c804a	—
constant.other.color, support.constant	#8d5e75	—
markup.heading	#854d00	bold
markup.bold	#b02d21	bold
markup.italic	#8d4600	italic
markup.inline.raw, markup.fenced_code	#006b00	—
markup.underline.link	#006b00	—
invalid.deprecated	#ad2402	strikethrough
invalid.illegal	#ad2402	underline

VS Code preview

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

HearthCode Theme — HearthCode Moss 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#191815
activityBar.border#3c3a32
activityBar.foreground#d2bea2
activityBar.inactiveForeground#685f52
activityBarBadge.background#cb9322
activityBarBadge.foreground#191815
badge.background#cb9322
badge.foreground#191815
button.background#cb9322
button.foreground#191815
button.hoverBackground#d49d2d
button.secondaryBackground#443e35
button.secondaryForeground#d2bea2
dropdown.background#2b2b26
dropdown.border#443e35
dropdown.foreground#d2bea2
editor.background#1b1d1a
editor.findMatchBackground#cb932236
editor.findMatchHighlightBackground#cb93221a
editor.foreground#d2bea2
editor.lineHighlightBackground#272824
editor.selectionBackground#cb93222e
editor.selectionHighlightBackground#cb932217
editor.wordHighlightBackground#cb93221d
editorBracketHighlight.foreground1#d4b84f
editorBracketHighlight.foreground2#d2a33d
editorBracketHighlight.foreground3#68adc1
editorBracketMatch.background#d4b84f1a
editorBracketMatch.border#d4b84f47
editorCursor.background#1b1d1a
editorCursor.foreground#8bb49e
editorError.foreground#d4b84f
editorGroupHeader.tabsBackground#191815
editorGroupHeader.tabsBorder#3c3a32
editorIndentGuide.activeBackground1#918675
editorIndentGuide.background1#454138
editorInfo.foreground#68adc1
editorLineNumber.activeForeground#c5a36e
editorLineNumber.foreground#5d574b
editorWarning.foreground#d2a33d
editorWhitespace.foreground#454138
focusBorder#cb9322a6
gitDecoration.addedResourceForeground#91cf72
gitDecoration.conflictingResourceForeground#d4b84f
gitDecoration.deletedResourceForeground#d4b84f
gitDecoration.ignoredResourceForeground#685f52
gitDecoration.modifiedResourceForeground#d2a33d
gitDecoration.untrackedResourceForeground#91cf72
input.background#2b2b26
input.border#443e35
input.foreground#d2bea2
input.placeholderForeground#685f52
inputOption.activeBackground#cb932215
inputOption.activeBorder#cb9322
list.activeSelectionBackground#3a362e
list.activeSelectionForeground#e4d5bc
list.focusBackground#3a362e
list.highlightForeground#cb9322
list.hoverBackground#2a2723
list.hoverForeground#d2bea2
list.inactiveSelectionBackground#2d2a25
notificationLink.foreground#cb9322
notifications.background#2b2b26
notifications.border#443e35
notifications.foreground#d2bea2
panel.background#191815
panel.border#3c3a32
panelTitle.activeBorder#cb9322
panelTitle.activeForeground#d2bea2
panelTitle.inactiveForeground#847867
progressBar.background#cb9322
scrollbarSlider.activeBackground#655b4aaa
scrollbarSlider.background#4a433866
scrollbarSlider.hoverBackground#4a433899
selection.background#cb93222e
sideBar.background#191815
sideBar.border#3c3a32
sideBar.foreground#a99983
sideBarSectionHeader.background#282521
sideBarSectionHeader.border#3c3a32
sideBarSectionHeader.foreground#847867
sideBarTitle.foreground#847867
statusBar.background#b37f16
statusBar.border#3c3a32
statusBar.debuggingBackground#5d3418
statusBar.debuggingForeground#efe5d5
statusBar.foreground#191815
statusBar.noFolderBackground#312b23
statusBar.noFolderForeground#efe5d5
statusBarItem.activeBackground#cb932233
statusBarItem.hoverBackground#cb932226
tab.activeBackground#1b1d1a
tab.activeBorder#cb9322
tab.activeForeground#d2bea2
tab.border#3c3a32
tab.hoverBackground#2a2723
tab.inactiveBackground#191815
tab.inactiveForeground#847867
tab.unfocusedActiveForeground#a99983
terminal.ansiBlack#1d201f
terminal.ansiBlue#79a89f
terminal.ansiBrightBlack#675d52
terminal.ansiBrightBlue#92bbb1
terminal.ansiBrightCyan#9bc099
terminal.ansiBrightGreen#b6c97f
terminal.ansiBrightMagenta#dc9fb2
terminal.ansiBrightRed#ee8376
terminal.ansiBrightWhite#f1e6d4
terminal.ansiBrightYellow#deba72
terminal.ansiCyan#8fb686
terminal.ansiGreen#9fb86f
terminal.ansiMagenta#ca8ea5
terminal.ansiRed#e06c5e
terminal.ansiWhite#d6c3a3
terminal.ansiYellow#d2ab61
terminal.background#1b1d1a
terminal.foreground#d2bea2
terminalCursor.foreground#8bb49e
titleBar.activeBackground#191815
titleBar.activeForeground#d2bea2
titleBar.border#3c3a32
titleBar.inactiveBackground#191815
titleBar.inactiveForeground#847867
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#817566	italic
keyword, storage.type, storage.modifier, keyword.control	#d4b84f	bold
keyword.operator, keyword.operator.assignment	#979087
meta.function-call entity.name.function, meta.function-call.js entity.name.function.js, meta.function-call.ts entity.name.function.ts, meta.function-call.py entity.name.function.py, meta.function-call.python entity.name.function.python, meta.function-call.go entity.name.function.go, meta.function-call.rust entity.name.function.rust	#93ce75	—
meta.method-call entity.name.function, meta.method-call.js entity.name.function.js, meta.method-call.ts entity.name.function.ts, meta.method-call.py entity.name.function.py, meta.method-call.python entity.name.function.python, meta.method-call.go entity.name.function.go, meta.method-call.rust entity.name.function.rust	#68bca3	—
entity.name.function, support.function, meta.function-call.generic	#93ce75	—
entity.name.function.member, entity.name.function.member.python, entity.name.function.member.go, entity.name.function.member.rust	#68bca3	—
variable.other.property, variable.other.member, meta.property-name, support.type.property-name	#8ebb7f	—
string, string.quoted, string.template, string.regexp	#caa46c	—
constant.numeric, constant.language.boolean, constant.language.null, constant.language.undefined	#77a7d2	—
entity.name.type, entity.name.class, storage.type.java, storage.type.primitive.java, entity.name.struct.rust, entity.name.type.class, support.type, support.type.builtin, support.class	#68adc1	italic
variable, variable.other.readwrite, variable.other.constant	#c3bfb9	—
meta.object-literal.key	#b7774f	—
entity.other.attribute-name	#5ea2c4	—
entity.name.tag, punctuation.definition.tag	#c5bf56	—
meta.decorator, punctuation.decorator	#caa46c	italic
punctuation, meta.brace	#b47a8b	—
constant.other.color, support.constant	#77a7d2	—
markup.heading	#e1ba73	bold
markup.bold	#c26f59	bold
markup.italic	#c89254	italic
markup.inline.raw, markup.fenced_code	#8fbd79	—
markup.underline.link	#8fbd79	—
invalid.deprecated	#ca8364	strikethrough
invalid.illegal	#ca8364	underline

VS Code preview

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

HearthCode Theme — HearthCode Moss 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#d4d1c4
activityBar.border#c3c0b5
activityBar.foreground#342d28
activityBar.inactiveForeground#7f7a71
activityBarBadge.background#b87911
activityBarBadge.foreground#191815
badge.background#b87911
badge.foreground#191815
button.background#b87911
button.foreground#191815
button.hoverBackground#bb7e16
button.secondaryBackground#bdb9ad
button.secondaryForeground#342d28
dropdown.background#d2cfc3
dropdown.border#bdb9ad
dropdown.foreground#342d28
editor.background#e7e5d8
editor.findMatchBackground#b8791136
editor.findMatchHighlightBackground#b879111a
editor.foreground#342d28
editor.lineHighlightBackground#cecabe
editor.selectionBackground#b8791126
editor.selectionHighlightBackground#b8791113
editor.wordHighlightBackground#b8791118
editorBracketHighlight.foreground1#83640f
editorBracketHighlight.foreground2#855a70
editorBracketHighlight.foreground3#237296
editorBracketMatch.background#83640f14
editorBracketMatch.border#83640f3d
editorCursor.background#e7e5d8
editorCursor.foreground#486a59
editorError.foreground#83640f
editorGroupHeader.tabsBackground#d4d1c4
editorGroupHeader.tabsBorder#c3c0b5
editorIndentGuide.activeBackground1#8b7d63
editorIndentGuide.background1#c8c5b9
editorInfo.foreground#237296
editorLineNumber.activeForeground#7c5f34
editorLineNumber.foreground#a7a399
editorWarning.foreground#b17818
editorWhitespace.foreground#c8c5b9
focusBorder#94650feb
gitDecoration.addedResourceForeground#397625
gitDecoration.conflictingResourceForeground#83640f
gitDecoration.deletedResourceForeground#83640f
gitDecoration.ignoredResourceForeground#7f7a71
gitDecoration.modifiedResourceForeground#b17818
gitDecoration.untrackedResourceForeground#397625
input.background#d2cfc3
input.border#bdb9ad
input.foreground#342d28
input.placeholderForeground#7f7a71
inputOption.activeBackground#b8791111
inputOption.activeBorder#b87911
list.activeSelectionBackground#bebaae
list.activeSelectionForeground#2c2722
list.focusBackground#bebaae
list.highlightForeground#b87911
list.hoverBackground#cac7bb
list.hoverForeground#342d28
list.inactiveSelectionBackground#c7c4b8
notificationLink.foreground#b87911
notifications.background#d2cfc3
notifications.border#bdb9ad
notifications.foreground#342d28
panel.background#d4d1c4
panel.border#c3c0b5
panelTitle.activeBorder#b87911
panelTitle.activeForeground#342d28
panelTitle.inactiveForeground#645e57
progressBar.background#b87911
scrollbarSlider.activeBackground#b49d7baa
scrollbarSlider.background#d2c2a566
scrollbarSlider.hoverBackground#d2c2a599
selection.background#b8791126
sideBar.background#d4d1c4
sideBar.border#c3c0b5
sideBar.foreground#47413b
sideBarSectionHeader.background#c7c4b8
sideBarSectionHeader.border#c3c0b5
sideBarSectionHeader.foreground#645e57
sideBarTitle.foreground#645e57
statusBar.background#bb7c12
statusBar.border#c3c0b5
statusBar.debuggingBackground#7f4313
statusBar.debuggingForeground#f6efe5
statusBar.foreground#191815
statusBar.noFolderBackground#8a562d
statusBar.noFolderForeground#f6efe5
statusBarItem.activeBackground#b8791133
statusBarItem.hoverBackground#b8791126
tab.activeBackground#e7e5d8
tab.activeBorder#b87911
tab.activeForeground#342d28
tab.border#c3c0b5
tab.hoverBackground#cac7bb
tab.inactiveBackground#d4d1c4
tab.inactiveForeground#645e57
tab.unfocusedActiveForeground#47413b
terminal.ansiBlack#3a342e
terminal.ansiBlue#517d76
terminal.ansiBrightBlack#8c7c69
terminal.ansiBrightBlue#658d85
terminal.ansiBrightCyan#70946f
terminal.ansiBrightGreen#79914c
terminal.ansiBrightMagenta#b9758b
terminal.ansiBrightRed#c9675c
terminal.ansiBrightWhite#2d241e
terminal.ansiBrightYellow#ab8034
terminal.ansiCyan#608763
terminal.ansiGreen#718246
terminal.ansiMagenta#a26179
terminal.ansiRed#ba5146
terminal.ansiWhite#43382e
terminal.ansiYellow#9d7124
terminal.background#e7e5d8
terminal.foreground#342d28
terminalCursor.foreground#486a59
titleBar.activeBackground#d4d1c4
titleBar.activeForeground#342d28
titleBar.border#c3c0b5
titleBar.inactiveBackground#d4d1c4
titleBar.inactiveForeground#645e57
widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7f766a	italic
keyword, storage.type, storage.modifier, keyword.control	#83640f	bold
keyword.operator, keyword.operator.assignment	#5f5c57
meta.function-call entity.name.function, meta.function-call.js entity.name.function.js, meta.function-call.ts entity.name.function.ts, meta.function-call.py entity.name.function.py, meta.function-call.python entity.name.function.python, meta.function-call.go entity.name.function.go, meta.function-call.rust entity.name.function.rust	#3e752b	—
meta.method-call entity.name.function, meta.method-call.js entity.name.function.js, meta.method-call.ts entity.name.function.ts, meta.method-call.py entity.name.function.py, meta.method-call.python entity.name.function.python, meta.method-call.go entity.name.function.go, meta.method-call.rust entity.name.function.rust	#0e7963	—
entity.name.function, support.function, meta.function-call.generic	#3e752b	—
entity.name.function.member, entity.name.function.member.python, entity.name.function.member.go, entity.name.function.member.rust	#0e7963	—
variable.other.property, variable.other.member, meta.property-name, support.type.property-name	#46703f	—
string, string.quoted, string.template, string.regexp	#7e5a2a	—
constant.numeric, constant.language.boolean, constant.language.null, constant.language.undefined	#1768a6	—
entity.name.type, entity.name.class, storage.type.java, storage.type.primitive.java, entity.name.struct.rust, entity.name.type.class, support.type, support.type.builtin, support.class	#237296	italic
variable, variable.other.readwrite, variable.other.constant	#46423d	—
meta.object-literal.key	#80441b	—
entity.other.attribute-name	#0067c5	—
entity.name.tag, punctuation.definition.tag	#5f6b24	—
meta.decorator, punctuation.decorator	#8c4c02	italic
punctuation, meta.brace	#935e79	—
constant.other.color, support.constant	#1768a6	—
markup.heading	#7a4500	bold
markup.bold	#a2251d	bold
markup.italic	#914b00	italic
markup.inline.raw, markup.fenced_code	#007301	—
markup.underline.link	#007301	—
invalid.deprecated	#b53616	strikethrough
invalid.illegal	#b53616	underline