Herzha Theme

Name: Herzha Theme
Author: madhanmaaz

Publisher: madhanmaazThemes in package: 17

Herzha themes for vscode.

Open in VS Code GitHub

Color themes

VS Code preview

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

Herzha Theme — Herzha Toxic

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.activeBorder#A8FF00
activityBar.background#030600
activityBar.border#162800
activityBar.foreground#F0FFD9
activityBar.inactiveForeground#A7C38A
activityBarBadge.background#A8FF00
activityBarBadge.foreground#223300
badge.background#A8FF00
badge.foreground#223300
button.background#A8FF00
button.border#00000000
button.foreground#223300
button.hoverBackground#CCFF5C
button.secondaryBackground#17210D
button.secondaryForeground#bddaa0
button.secondaryHoverBackground#2A3918
button.separator#F0FFD9
descriptionForeground#A7C38A
diffEditor.insertedTextBackground#5cff0026
diffEditor.removedTextBackground#ff315b26
disabledForeground#f0ffd966
dropdown.background#030600
dropdown.border#162800
dropdown.foreground#F0FFD9
dropdown.listBackground#050900
editor.background#050900
editor.findMatchBackground#788000
editor.findMatchHighlightBackground#005937
editor.foreground#F0FFD9
editor.inactiveSelectionBackground#2e4700
editor.lineHighlightBackground#30332b
editor.lineHighlightBorder#00000000
editor.selectionBackground#3b5900
editor.selectionHighlightBackground#3e5f00
editor.stackFrameHighlightBackground#3c4000
editor.wordHighlightBackground#00000000
editor.wordHighlightStrongBackground#00000000
editorBracketHighlight.foreground1#deffa3
editorBracketHighlight.foreground2#deffa3
editorBracketHighlight.foreground3#deffa3
editorBracketHighlight.foreground4#deffa3
editorBracketHighlight.foreground5#deffa3
editorBracketHighlight.foreground6#deffa3
editorBracketMatch.background#3e5f00
editorBracketMatch.border#77b500
editorCursor.foreground#A8FF00
editorError.border#00000000
editorError.foreground#FF315B
editorGroup.border#162800
editorGroup.dropBackground#a8ff0033
editorGroupHeader.border#274600
editorGroupHeader.noTabsBackground#030600
editorGroupHeader.tabsBackground#030600
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#5CFF00
editorGutter.deletedBackground#FF315B
editorGutter.modifiedBackground#EFFF00
editorHoverWidget.background#030600
editorHoverWidget.border#162800
editorIndentGuide.activeBackground#7d8571
editorIndentGuide.background#3c4036
editorInlayHint.background#030600
editorInlayHint.foreground#F0FFD9
editorLineNumber.activeForeground#F0FFD9
editorLineNumber.foreground#78806d
editorLink.activeForeground#A8FF00
editorSuggestWidget.background#030600
editorSuggestWidget.border#162800
editorSuggestWidget.foreground#F0FFD9
editorSuggestWidget.highlightForeground#A8FF00
editorSuggestWidget.selectedBackground#3b5900
editorWarning.border#00000000
editorWarning.foreground#EFFF00
editorWhitespace.foreground#f0ffd966
editorWidget.background#030600
editorWidget.border#162800
errorForeground#FF315B
focusBorder#A8FF00
foreground#F0FFD9
gitDecoration.conflictingResourceForeground#FF6684
gitDecoration.deletedResourceForeground#FF315B
gitDecoration.ignoredResourceForeground#A7C38A
gitDecoration.modifiedResourceForeground#EFFF00
gitDecoration.submoduleResourceForeground#00FF9D
gitDecoration.untrackedResourceForeground#7DFF5C
icon.foreground#F0FFD9
input.background#050900
input.border#162800
input.foreground#F0FFD9
input.placeholderForeground#f0ffd9b3
inputOption.activeBackground#f0ffd921
inputOption.activeBorder#A8FF00
inputOption.activeForeground#F0FFD9
inputOption.hoverBackground#f0ffd91a
inputValidation.errorBackground#ff315b40
inputValidation.errorBorder#FF315B
inputValidation.infoBackground#00e5ff40
inputValidation.infoBorder#00E5FF
inputValidation.warningBackground#efff0040
inputValidation.warningBorder#EFFF00
keybindingLabel.background#030600
keybindingLabel.border#17210D
keybindingLabel.bottomBorder#2A3918
keybindingLabel.foreground#A7C38A
list.activeSelectionBackground#f0ffd921
list.activeSelectionForeground#F0FFD9
list.activeSelectionIconForeground#F0FFD9
list.dropBackground#a8ff0033
list.errorForeground#FF315B
list.focusBackground#f0ffd921
list.focusForeground#F0FFD9
list.highlightForeground#A8FF00
list.hoverBackground#f0ffd91a
list.hoverForeground#F0FFD9
list.inactiveSelectionBackground#f0ffd921
list.inactiveSelectionForeground#F0FFD9
list.invalidItemForeground#FF315B
menu.separatorBackground#162800
minimap.background#050900
minimapSlider.activeBackground#a8ff008c
minimapSlider.background#a8ff0040
minimapSlider.hoverBackground#a8ff0066
notificationCenter.border#162800
notificationCenterHeader.background#050900
notificationCenterHeader.foreground#F0FFD9
notifications.background#030600
notifications.border#162800
notifications.foreground#F0FFD9
notificationToast.border#274600
panel.background#030600
panel.border#162800
panelTitle.activeBorder#A8FF00
panelTitle.activeForeground#F0FFD9
panelTitle.inactiveForeground#A7C38A
peekView.border#274600
peekViewEditor.background#030600
peekViewEditor.matchHighlightBackground#3e5f00
peekViewResult.background#030600
peekViewResult.fileForeground#F0FFD9
peekViewResult.lineForeground#A7C38A
peekViewResult.matchHighlightBackground#3e5f00
peekViewResult.selectionBackground#f0ffd921
peekViewTitle.background#030600
peekViewTitleDescription.foreground#A7C38A
peekViewTitleLabel.foreground#F0FFD9
pickerGroup.border#274600
pickerGroup.foreground#A8FF00
progressBar.background#A8FF00
quickInput.background#030600
quickInput.foreground#F0FFD9
scrollbar.background#050900
scrollbar.shadow#050900
scrollbarSlider.activeBackground#f0ffd966
scrollbarSlider.background#f0ffd926
scrollbarSlider.hoverBackground#f0ffd940
selection.background#3b5900
settings.headerForeground#F0FFD9
settings.modifiedItemIndicator#EFFF00
sideBar.background#030600
sideBar.border#162800
sideBar.dropBackground#a8ff0033
sideBar.foreground#F0FFD9
sideBarSectionHeader.background#030600
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#F0FFD9
sideBarTitle.foreground#F0FFD9
statusBar.background#030600
statusBar.border#162800
statusBar.debuggingBackground#EFFF00
statusBar.debuggingForeground#303300
statusBar.foreground#F0FFD9
statusBarItem.activeBackground#f0ffd921
statusBarItem.hoverBackground#f0ffd91a
statusBarItem.remoteBackground#A8FF00
statusBarItem.remoteForeground#223300
statusBarItem.remoteHoverBackground#CCFF5C
tab.activeBackground#050900
tab.activeBorderTop#A8FF00
tab.activeForeground#F0FFD9
tab.border#00000000
tab.inactiveBackground#030600
tab.inactiveForeground#A7C38A
terminal.ansiBlack#050900
terminal.ansiBlue#00E5FF
terminal.ansiBrightBlack#71cb00
terminal.ansiBrightBlue#7DFF5C
terminal.ansiBrightCyan#5CEFFF
terminal.ansiBrightGreen#9AFF66
terminal.ansiBrightMagenta#CCFF5C
terminal.ansiBrightRed#FF6684
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#F6FF66
terminal.ansiCyan#00FF9D
terminal.ansiGreen#5CFF00
terminal.ansiMagenta#A8FF00
terminal.ansiRed#FF315B
terminal.ansiWhite#F0FFD9
terminal.ansiYellow#EFFF00
terminal.background#050900
terminal.foreground#F0FFD9
terminal.selectionBackground#3b5900
terminalCursor.background#A8FF00
terminalCursor.foreground#A8FF00
textLink.activeForeground#5CEFFF
textLink.foreground#A8FF00
textSeparator.foreground#A7C38A
titleBar.activeBackground#030600
titleBar.activeForeground#F0FFD9
titleBar.border#162800
titleBar.inactiveBackground#050900
titleBar.inactiveForeground#A7C38A
toolbar.activeBackground#f0ffd921
toolbar.hoverBackground#f0ffd91a
toolbar.hoverOutline#2A3918
tree.indentGuidesStroke#3c4036
welcomePage.progress.background#17210D
welcomePage.tileBackground#030600
widget.border#162800
widget.shadow#050900

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.name.function.preprocessor	#F0FFD9	—
entity.other.attribute-name	#CCFF5C	—
constant, constant.language	#A8FF00	—
comment	#667253	—
entity.name.function	#7DFF5C	—
keyword, storage.type, storage.modifier, storage.type.enum, storage.type.struct, storage.type.template	#CCFF5C	—
constant.numeric	#A8FF00	—
keyword.operator, entity.name.function.operator	#FF315B	—
variable.other.property, variable.other.constant.property, support.type.property-name	#00E5FF	—
entity.other.attribute-name.class.css	#CCFF5C	—
entity.other.attribute-name.id.css	#A8FF00	—
entity.other.attribute-name.pseudo-element	#A8FF00	—
string, constant.other.symbol	#5CFF00	—
constant.character, constant.other	#A8FF00	—
string.regexp	#9AFF66	—
entity.name.tag, meta.tag.sgml	#FF315B	—
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class, storage.type.built-in.primitive, support.type	#00FF9D	—
entity.name.scope-resolution	#5CFFBD	—
variable, variable.parameter.function-call	#F0FFD9	—
variable.language, variable.parameter.function.language.special.self.python	#FF315B	—
variable.parameter, meta.parameter	#F0FFD9	—
text.html.markdown markup.inline.raw	#A7C38A	—
markup.bold	#CCFF5C	—
punctuation.definition.bold	#A8FF00	—
string.other.link.title, punctuation.definition.link.title, string.other.link.description, punctuation.definition.link.description	#A8FF00	—
markup.underline.link, punctuation.definition.metadata	#00E5FF	—
markup.heading	#5CFFBD	—
punctuation.definition.markdown, punctuation.separator, punctuation.terminator, punctuation.section, punctuation.accessor, punctuation.definition.template-expression, punctuation.section.embedded, punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag, meta.decorator punctuation.decorator, markup.list punctuation.definition.list.begin	#deffa3	—
punctuation.definition.template-expression, punctuation.section.embedded, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js	#5CEFFF	—

VS Code preview

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

Herzha Theme — Herzha Twilight

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.activeBorder#B59DFF
activityBar.background#0B0910
activityBar.border#201b2b
activityBar.foreground#E0D9F5
activityBar.inactiveForeground#B7AFD1
activityBarBadge.background#B59DFF
activityBarBadge.foreground#000000
badge.background#B59DFF
badge.foreground#000000
button.background#B59DFF
button.border#00000000
button.foreground#000000
button.hoverBackground#CBB8FF
button.secondaryBackground#2E2A3D
button.secondaryForeground#e3e1eb
button.secondaryHoverBackground#433F59
button.separator#E0D9F5
descriptionForeground#B7AFD1
diffEditor.insertedTextBackground#6fa89a26
diffEditor.removedTextBackground#c25c8226
disabledForeground#e0d9f566
dropdown.background#0B0910
dropdown.border#201b2b
dropdown.foreground#E0D9F5
dropdown.listBackground#120F18
editor.background#120F18
editor.findMatchBackground#6a5035
editor.findMatchHighlightBackground#3b3254
editor.foreground#E0D9F5
editor.inactiveSelectionBackground#3b3352
editor.lineHighlightBackground#2d2b31
editor.lineHighlightBorder#00000000
editor.selectionBackground#3f3759
editor.selectionHighlightBackground#4b4169
editor.stackFrameHighlightBackground#35281b
editor.wordHighlightBackground#00000000
editor.wordHighlightStrongBackground#00000000
editorBracketHighlight.foreground1#d5caf8
editorBracketHighlight.foreground2#d5caf8
editorBracketHighlight.foreground3#d5caf8
editorBracketHighlight.foreground4#d5caf8
editorBracketHighlight.foreground5#d5caf8
editorBracketHighlight.foreground6#d5caf8
editorBracketMatch.background#4b4169
editorBracketMatch.border#8472ba
editorCursor.foreground#B59DFF
editorError.border#00000000
editorError.foreground#C25C82
editorGroup.border#201b2b
editorGroup.dropBackground#b59dff33
editorGroupHeader.border#2e273e
editorGroupHeader.noTabsBackground#0B0910
editorGroupHeader.tabsBackground#0B0910
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#6FA89A
editorGutter.deletedBackground#C25C82
editorGutter.modifiedBackground#D4A06A
editorHoverWidget.background#0B0910
editorHoverWidget.border#201b2b
editorIndentGuide.activeBackground#74717f
editorIndentGuide.background#38363d
editorInlayHint.background#0B0910
editorInlayHint.foreground#E0D9F5
editorLineNumber.activeForeground#E0D9F5
editorLineNumber.foreground#706d7b
editorLink.activeForeground#B59DFF
editorSuggestWidget.background#0B0910
editorSuggestWidget.border#201b2b
editorSuggestWidget.foreground#E0D9F5
editorSuggestWidget.highlightForeground#B59DFF
editorSuggestWidget.selectedBackground#3f3759
editorWarning.border#00000000
editorWarning.foreground#D4A06A
editorWhitespace.foreground#e0d9f566
editorWidget.background#0B0910
editorWidget.border#201b2b
errorForeground#C25C82
focusBorder#B59DFF
foreground#E0D9F5
gitDecoration.conflictingResourceForeground#D883A0
gitDecoration.deletedResourceForeground#C25C82
gitDecoration.ignoredResourceForeground#B7AFD1
gitDecoration.modifiedResourceForeground#D4A06A
gitDecoration.submoduleResourceForeground#A88EF0
gitDecoration.untrackedResourceForeground#B1A0E3
icon.foreground#E0D9F5
input.background#120F18
input.border#201b2b
input.foreground#E0D9F5
input.placeholderForeground#e0d9f5b3
inputOption.activeBackground#e0d9f521
inputOption.activeBorder#B59DFF
inputOption.activeForeground#E0D9F5
inputOption.hoverBackground#e0d9f51a
inputValidation.errorBackground#c25c8240
inputValidation.errorBorder#C25C82
inputValidation.infoBackground#b3a5e640
inputValidation.infoBorder#B3A5E6
inputValidation.warningBackground#d4a06a40
inputValidation.warningBorder#D4A06A
keybindingLabel.background#0B0910
keybindingLabel.border#2E2A3D
keybindingLabel.bottomBorder#433F59
keybindingLabel.foreground#B7AFD1
list.activeSelectionBackground#e0d9f521
list.activeSelectionForeground#E0D9F5
list.activeSelectionIconForeground#E0D9F5
list.dropBackground#b59dff33
list.errorForeground#C25C82
list.focusBackground#e0d9f521
list.focusForeground#E0D9F5
list.highlightForeground#B59DFF
list.hoverBackground#e0d9f51a
list.hoverForeground#E0D9F5
list.inactiveSelectionBackground#e0d9f521
list.inactiveSelectionForeground#E0D9F5
list.invalidItemForeground#C25C82
menu.separatorBackground#201b2b
minimap.background#120F18
minimapSlider.activeBackground#b59dff8c
minimapSlider.background#b59dff40
minimapSlider.hoverBackground#b59dff66
notificationCenter.border#201b2b
notificationCenterHeader.background#120F18
notificationCenterHeader.foreground#E0D9F5
notifications.background#0B0910
notifications.border#201b2b
notifications.foreground#E0D9F5
notificationToast.border#2e273e
panel.background#0B0910
panel.border#201b2b
panelTitle.activeBorder#B59DFF
panelTitle.activeForeground#E0D9F5
panelTitle.inactiveForeground#B7AFD1
peekView.border#2e273e
peekViewEditor.background#0B0910
peekViewEditor.matchHighlightBackground#4b4169
peekViewResult.background#0B0910
peekViewResult.fileForeground#E0D9F5
peekViewResult.lineForeground#B7AFD1
peekViewResult.matchHighlightBackground#4b4169
peekViewResult.selectionBackground#e0d9f521
peekViewTitle.background#0B0910
peekViewTitleDescription.foreground#B7AFD1
peekViewTitleLabel.foreground#E0D9F5
pickerGroup.border#2e273e
pickerGroup.foreground#B59DFF
progressBar.background#B59DFF
quickInput.background#0B0910
quickInput.foreground#E0D9F5
scrollbar.background#120F18
scrollbar.shadow#120F18
scrollbarSlider.activeBackground#e0d9f566
scrollbarSlider.background#e0d9f526
scrollbarSlider.hoverBackground#e0d9f540
selection.background#3f3759
settings.headerForeground#E0D9F5
settings.modifiedItemIndicator#D4A06A
sideBar.background#0B0910
sideBar.border#201b2b
sideBar.dropBackground#b59dff33
sideBar.foreground#E0D9F5
sideBarSectionHeader.background#0B0910
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#E0D9F5
sideBarTitle.foreground#E0D9F5
statusBar.background#0B0910
statusBar.border#201b2b
statusBar.debuggingBackground#D4A06A
statusBar.debuggingForeground#000000
statusBar.foreground#E0D9F5
statusBarItem.activeBackground#e0d9f521
statusBarItem.hoverBackground#e0d9f51a
statusBarItem.remoteBackground#B59DFF
statusBarItem.remoteForeground#000000
statusBarItem.remoteHoverBackground#CBB8FF
tab.activeBackground#120F18
tab.activeBorderTop#B59DFF
tab.activeForeground#E0D9F5
tab.border#00000000
tab.inactiveBackground#0B0910
tab.inactiveForeground#B7AFD1
terminal.ansiBlack#120F18
terminal.ansiBlue#B3A5E6
terminal.ansiBrightBlack#6b5a8f
terminal.ansiBrightBlue#B1A0E3
terminal.ansiBrightCyan#C6B9F0
terminal.ansiBrightGreen#8FC2B4
terminal.ansiBrightMagenta#CBB8FF
terminal.ansiBrightRed#D883A0
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#E3BD8F
terminal.ansiCyan#A88EF0
terminal.ansiGreen#6FA89A
terminal.ansiMagenta#B59DFF
terminal.ansiRed#C25C82
terminal.ansiWhite#E0D9F5
terminal.ansiYellow#D4A06A
terminal.background#120F18
terminal.foreground#E0D9F5
terminal.selectionBackground#3f3759
terminalCursor.background#B59DFF
terminalCursor.foreground#B59DFF
textLink.activeForeground#C6B9F0
textLink.foreground#B59DFF
textSeparator.foreground#B7AFD1
titleBar.activeBackground#0B0910
titleBar.activeForeground#E0D9F5
titleBar.border#201b2b
titleBar.inactiveBackground#120F18
titleBar.inactiveForeground#B7AFD1
toolbar.activeBackground#e0d9f521
toolbar.hoverBackground#e0d9f51a
toolbar.hoverOutline#433F59
tree.indentGuidesStroke#38363d
welcomePage.progress.background#2E2A3D
welcomePage.tileBackground#0B0910
widget.border#201b2b
widget.shadow#120F18

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.name.function.preprocessor	#E0D9F5	—
entity.other.attribute-name	#CBB8FF	—
constant, constant.language	#B59DFF	—
comment	#686377	—
entity.name.function	#B1A0E3	—
keyword, storage.type, storage.modifier, storage.type.enum, storage.type.struct, storage.type.template	#CBB8FF	—
constant.numeric	#B59DFF	—
keyword.operator, entity.name.function.operator	#C25C82	—
variable.other.property, variable.other.constant.property, support.type.property-name	#B3A5E6	—
entity.other.attribute-name.class.css	#CBB8FF	—
entity.other.attribute-name.id.css	#B59DFF	—
entity.other.attribute-name.pseudo-element	#B59DFF	—
string, constant.other.symbol	#6FA89A	—
constant.character, constant.other	#B59DFF	—
string.regexp	#8FC2B4	—
entity.name.tag, meta.tag.sgml	#C25C82	—
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class, storage.type.built-in.primitive, support.type	#A88EF0	—
entity.name.scope-resolution	#BEA9FF	—
variable, variable.parameter.function-call	#E0D9F5	—
variable.language, variable.parameter.function.language.special.self.python	#C25C82	—
variable.parameter, meta.parameter	#E0D9F5	—
text.html.markdown markup.inline.raw	#B7AFD1	—
markup.bold	#CBB8FF	—
punctuation.definition.bold	#B59DFF	—
string.other.link.title, punctuation.definition.link.title, string.other.link.description, punctuation.definition.link.description	#B59DFF	—
markup.underline.link, punctuation.definition.metadata	#B3A5E6	—
markup.heading	#BEA9FF	—
punctuation.definition.markdown, punctuation.separator, punctuation.terminator, punctuation.section, punctuation.accessor, punctuation.definition.template-expression, punctuation.section.embedded, punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag, meta.decorator punctuation.decorator, markup.list punctuation.definition.list.begin	#d5caf8	—
punctuation.definition.template-expression, punctuation.section.embedded, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js	#C6B9F0	—

VS Code preview

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

Herzha Theme — Herzha Ultra

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.activeBorder#9D4DFF
activityBar.background#050208
activityBar.border#160829
activityBar.foreground#F5E9FF
activityBar.inactiveForeground#B9A1CC
activityBarBadge.background#9D4DFF
activityBarBadge.foreground#ffffff
badge.background#9D4DFF
badge.foreground#ffffff
button.background#9D4DFF
button.border#00000000
button.foreground#ffffff
button.hoverBackground#BE85FF
button.secondaryBackground#1B1228
button.secondaryForeground#ccbde2
button.secondaryHoverBackground#302047
button.separator#F5E9FF
descriptionForeground#B9A1CC
diffEditor.insertedTextBackground#00f5a026
diffEditor.removedTextBackground#ff3b6b26
disabledForeground#f5e9ff66
dropdown.background#050208
dropdown.border#160829
dropdown.foreground#F5E9FF
dropdown.listBackground#08030F
editor.background#08030F
editor.findMatchBackground#806b00
editor.findMatchHighlightBackground#4e5900
editor.foreground#F5E9FF
editor.inactiveSelectionBackground#2d164b
editor.lineHighlightBackground#312f33
editor.lineHighlightBorder#00000000
editor.selectionBackground#371b59
editor.selectionHighlightBackground#3c1d63
editor.stackFrameHighlightBackground#403600
editor.wordHighlightBackground#00000000
editor.wordHighlightStrongBackground#00000000
editorBracketHighlight.foreground1#dfc2ff
editorBracketHighlight.foreground2#dfc2ff
editorBracketHighlight.foreground3#dfc2ff
editorBracketHighlight.foreground4#dfc2ff
editorBracketHighlight.foreground5#dfc2ff
editorBracketHighlight.foreground6#dfc2ff
editorBracketMatch.background#3c1d63
editorBracketMatch.border#7037b7
editorCursor.foreground#9D4DFF
editorError.border#00000000
editorError.foreground#FF3B6B
editorGroup.border#160829
editorGroup.dropBackground#9d4dff33
editorGroupHeader.border#230d42
editorGroupHeader.noTabsBackground#050208
editorGroupHeader.tabsBackground#050208
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#00F5A0
editorGutter.deletedBackground#FF3B6B
editorGutter.modifiedBackground#FFD600
editorHoverWidget.background#050208
editorHoverWidget.border#160829
editorIndentGuide.activeBackground#7f7985
editorIndentGuide.background#3d3a40
editorInlayHint.background#050208
editorInlayHint.foreground#F5E9FF
editorLineNumber.activeForeground#F5E9FF
editorLineNumber.foreground#7b7580
editorLink.activeForeground#9D4DFF
editorSuggestWidget.background#050208
editorSuggestWidget.border#160829
editorSuggestWidget.foreground#F5E9FF
editorSuggestWidget.highlightForeground#9D4DFF
editorSuggestWidget.selectedBackground#371b59
editorWarning.border#00000000
editorWarning.foreground#FFD600
editorWhitespace.foreground#f5e9ff66
editorWidget.background#050208
editorWidget.border#160829
errorForeground#FF3B6B
focusBorder#9D4DFF
foreground#F5E9FF
gitDecoration.conflictingResourceForeground#FF7195
gitDecoration.deletedResourceForeground#FF3B6B
gitDecoration.ignoredResourceForeground#B9A1CC
gitDecoration.modifiedResourceForeground#FFD600
gitDecoration.submoduleResourceForeground#DFFF00
gitDecoration.untrackedResourceForeground#FF70C5
icon.foreground#F5E9FF
input.background#08030F
input.border#160829
input.foreground#F5E9FF
input.placeholderForeground#f5e9ffb3
inputOption.activeBackground#f5e9ff21
inputOption.activeBorder#9D4DFF
inputOption.activeForeground#F5E9FF
inputOption.hoverBackground#f5e9ff1a
inputValidation.errorBackground#ff3b6b40
inputValidation.errorBorder#FF3B6B
inputValidation.infoBackground#a970ff40
inputValidation.infoBorder#A970FF
inputValidation.warningBackground#ffd60040
inputValidation.warningBorder#FFD600
keybindingLabel.background#050208
keybindingLabel.border#1B1228
keybindingLabel.bottomBorder#302047
keybindingLabel.foreground#B9A1CC
list.activeSelectionBackground#f5e9ff21
list.activeSelectionForeground#F5E9FF
list.activeSelectionIconForeground#F5E9FF
list.dropBackground#9d4dff33
list.errorForeground#FF3B6B
list.focusBackground#f5e9ff21
list.focusForeground#F5E9FF
list.highlightForeground#9D4DFF
list.hoverBackground#f5e9ff1a
list.hoverForeground#F5E9FF
list.inactiveSelectionBackground#f5e9ff21
list.inactiveSelectionForeground#F5E9FF
list.invalidItemForeground#FF3B6B
menu.separatorBackground#160829
minimap.background#08030F
minimapSlider.activeBackground#9d4dff8c
minimapSlider.background#9d4dff40
minimapSlider.hoverBackground#9d4dff66
notificationCenter.border#160829
notificationCenterHeader.background#08030F
notificationCenterHeader.foreground#F5E9FF
notifications.background#050208
notifications.border#160829
notifications.foreground#F5E9FF
notificationToast.border#230d42
panel.background#050208
panel.border#160829
panelTitle.activeBorder#9D4DFF
panelTitle.activeForeground#F5E9FF
panelTitle.inactiveForeground#B9A1CC
peekView.border#230d42
peekViewEditor.background#050208
peekViewEditor.matchHighlightBackground#3c1d63
peekViewResult.background#050208
peekViewResult.fileForeground#F5E9FF
peekViewResult.lineForeground#B9A1CC
peekViewResult.matchHighlightBackground#3c1d63
peekViewResult.selectionBackground#f5e9ff21
peekViewTitle.background#050208
peekViewTitleDescription.foreground#B9A1CC
peekViewTitleLabel.foreground#F5E9FF
pickerGroup.border#230d42
pickerGroup.foreground#9D4DFF
progressBar.background#9D4DFF
quickInput.background#050208
quickInput.foreground#F5E9FF
scrollbar.background#08030F
scrollbar.shadow#08030F
scrollbarSlider.activeBackground#f5e9ff66
scrollbarSlider.background#f5e9ff26
scrollbarSlider.hoverBackground#f5e9ff40
selection.background#371b59
settings.headerForeground#F5E9FF
settings.modifiedItemIndicator#FFD600
sideBar.background#050208
sideBar.border#160829
sideBar.dropBackground#9d4dff33
sideBar.foreground#F5E9FF
sideBarSectionHeader.background#050208
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#F5E9FF
sideBarTitle.foreground#F5E9FF
statusBar.background#050208
statusBar.border#160829
statusBar.debuggingBackground#FFD600
statusBar.debuggingForeground#332b00
statusBar.foreground#F5E9FF
statusBarItem.activeBackground#f5e9ff21
statusBarItem.hoverBackground#f5e9ff1a
statusBarItem.remoteBackground#9D4DFF
statusBarItem.remoteForeground#ffffff
statusBarItem.remoteHoverBackground#BE85FF
tab.activeBackground#08030F
tab.activeBorderTop#9D4DFF
tab.activeForeground#F5E9FF
tab.border#00000000
tab.inactiveBackground#050208
tab.inactiveForeground#B9A1CC
terminal.ansiBlack#08030F
terminal.ansiBlue#A970FF
terminal.ansiBrightBlack#5e23b1
terminal.ansiBrightBlue#FF70C5
terminal.ansiBrightCyan#C49AFF
terminal.ansiBrightGreen#5CFFC0
terminal.ansiBrightMagenta#BE85FF
terminal.ansiBrightRed#FF7195
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#FFE866
terminal.ansiCyan#DFFF00
terminal.ansiGreen#00F5A0
terminal.ansiMagenta#9D4DFF
terminal.ansiRed#FF3B6B
terminal.ansiWhite#F5E9FF
terminal.ansiYellow#FFD600
terminal.background#08030F
terminal.foreground#F5E9FF
terminal.selectionBackground#371b59
terminalCursor.background#9D4DFF
terminalCursor.foreground#9D4DFF
textLink.activeForeground#C49AFF
textLink.foreground#9D4DFF
textSeparator.foreground#B9A1CC
titleBar.activeBackground#050208
titleBar.activeForeground#F5E9FF
titleBar.border#160829
titleBar.inactiveBackground#08030F
titleBar.inactiveForeground#B9A1CC
toolbar.activeBackground#f5e9ff21
toolbar.hoverBackground#f5e9ff1a
toolbar.hoverOutline#302047
tree.indentGuidesStroke#3d3a40
welcomePage.progress.background#1B1228
welcomePage.tileBackground#050208
widget.border#160829
widget.shadow#08030F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.name.function.preprocessor	#F5E9FF	—
entity.other.attribute-name	#BE85FF	—
constant, constant.language	#9D4DFF	—
comment	#6a5e76	—
entity.name.function	#FF70C5	—
keyword, storage.type, storage.modifier, storage.type.enum, storage.type.struct, storage.type.template	#BE85FF	—
constant.numeric	#9D4DFF	—
keyword.operator, entity.name.function.operator	#FF3B6B	—
variable.other.property, variable.other.constant.property, support.type.property-name	#A970FF	—
entity.other.attribute-name.class.css	#BE85FF	—
entity.other.attribute-name.id.css	#9D4DFF	—
entity.other.attribute-name.pseudo-element	#9D4DFF	—
string, constant.other.symbol	#00F5A0	—
constant.character, constant.other	#9D4DFF	—
string.regexp	#5CFFC0	—
entity.name.tag, meta.tag.sgml	#FF3B6B	—
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class, storage.type.built-in.primitive, support.type	#DFFF00	—
entity.name.scope-resolution	#EAFF66	—
variable, variable.parameter.function-call	#F5E9FF	—
variable.language, variable.parameter.function.language.special.self.python	#FF3B6B	—
variable.parameter, meta.parameter	#F5E9FF	—
text.html.markdown markup.inline.raw	#B9A1CC	—
markup.bold	#BE85FF	—
punctuation.definition.bold	#9D4DFF	—
string.other.link.title, punctuation.definition.link.title, string.other.link.description, punctuation.definition.link.description	#9D4DFF	—
markup.underline.link, punctuation.definition.metadata	#A970FF	—
markup.heading	#EAFF66	—
punctuation.definition.markdown, punctuation.separator, punctuation.terminator, punctuation.section, punctuation.accessor, punctuation.definition.template-expression, punctuation.section.embedded, punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag, meta.decorator punctuation.decorator, markup.list punctuation.definition.list.begin	#dfc2ff	—
punctuation.definition.template-expression, punctuation.section.embedded, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js	#C49AFF	—

VS Code preview

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

Herzha Theme — Herzha Vanta

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.activeBorder#A779F3
activityBar.background#08080b
activityBar.border#17171e
activityBar.foreground#a9b1d6
activityBar.inactiveForeground#787c99
activityBarBadge.background#A779F3
activityBarBadge.foreground#000000
badge.background#A779F3
badge.foreground#000000
button.background#A779F3
button.border#00000000
button.foreground#000000
button.hoverBackground#BB9AF7
button.secondaryBackground#384059
button.secondaryForeground#ffffff
button.secondaryHoverBackground#4C536F
button.separator#a9b1d6
descriptionForeground#787c99
diffEditor.insertedTextBackground#85d0b726
diffEditor.removedTextBackground#fb899e26
disabledForeground#a9b1d666
dropdown.background#08080b
dropdown.border#17171e
dropdown.foreground#a9b1d6
dropdown.listBackground#0A0A0D
editor.background#0A0A0D
editor.findMatchBackground#796546
editor.findMatchHighlightBackground#014250
editor.foreground#a9b1d6
editor.inactiveSelectionBackground#312647
editor.lineHighlightBackground#22232b
editor.lineHighlightBorder#00000000
editor.selectionBackground#3a2a55
editor.selectionHighlightBackground#41315e
editor.stackFrameHighlightBackground#3d3223
editor.wordHighlightBackground#00000000
editor.wordHighlightStrongBackground#00000000
editorBracketHighlight.foreground1#a9a3dd
editorBracketHighlight.foreground2#a9a3dd
editorBracketHighlight.foreground3#a9a3dd
editorBracketHighlight.foreground4#a9a3dd
editorBracketHighlight.foreground5#a9a3dd
editorBracketHighlight.foreground6#a9a3dd
editorBracketMatch.background#41315e
editorBracketMatch.border#7858ae
editorCursor.foreground#A779F3
editorError.border#00000000
editorError.foreground#FB899E
editorGroup.border#17171e
editorGroup.dropBackground#a779f333
editorGroupHeader.border#252530
editorGroupHeader.noTabsBackground#08080b
editorGroupHeader.tabsBackground#08080b
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#85D0B7
editorGutter.deletedBackground#FB899E
editorGutter.modifiedBackground#F2C98B
editorHoverWidget.background#08080b
editorHoverWidget.border#17171e
editorIndentGuide.activeBackground#585c6f
editorIndentGuide.background#2a2c36
editorInlayHint.background#08080b
editorInlayHint.foreground#a9b1d6
editorLineNumber.activeForeground#a9b1d6
editorLineNumber.foreground#55596b
editorLink.activeForeground#A779F3
editorSuggestWidget.background#08080b
editorSuggestWidget.border#17171e
editorSuggestWidget.foreground#a9b1d6
editorSuggestWidget.highlightForeground#A779F3
editorSuggestWidget.selectedBackground#3a2a55
editorWarning.border#00000000
editorWarning.foreground#F2C98B
editorWhitespace.foreground#a9b1d666
editorWidget.background#08080b
editorWidget.border#17171e
errorForeground#FB899E
focusBorder#A779F3
foreground#a9b1d6
gitDecoration.conflictingResourceForeground#FF9FB1
gitDecoration.deletedResourceForeground#FB899E
gitDecoration.ignoredResourceForeground#787c99
gitDecoration.modifiedResourceForeground#F2C98B
gitDecoration.submoduleResourceForeground#03BDE5
gitDecoration.untrackedResourceForeground#87A1FF
icon.foreground#a9b1d6
input.background#0A0A0D
input.border#17171e
input.foreground#a9b1d6
input.placeholderForeground#a9b1d6b3
inputOption.activeBackground#a9b1d621
inputOption.activeBorder#A779F3
inputOption.activeForeground#a9b1d6
inputOption.hoverBackground#a9b1d61a
inputValidation.errorBackground#fb899e40
inputValidation.errorBorder#FB899E
inputValidation.infoBackground#7dcfff40
inputValidation.infoBorder#7DCFFF
inputValidation.warningBackground#f2c98b40
inputValidation.warningBorder#F2C98B
keybindingLabel.background#08080b
keybindingLabel.border#384059
keybindingLabel.bottomBorder#4C536F
keybindingLabel.foreground#787c99
list.activeSelectionBackground#a9b1d621
list.activeSelectionForeground#a9b1d6
list.activeSelectionIconForeground#a9b1d6
list.dropBackground#a779f333
list.errorForeground#FB899E
list.focusBackground#a9b1d621
list.focusForeground#a9b1d6
list.highlightForeground#A779F3
list.hoverBackground#a9b1d61a
list.hoverForeground#a9b1d6
list.inactiveSelectionBackground#a9b1d621
list.inactiveSelectionForeground#a9b1d6
list.invalidItemForeground#FB899E
menu.separatorBackground#17171e
minimap.background#0A0A0D
minimapSlider.activeBackground#a779f38c
minimapSlider.background#a779f340
minimapSlider.hoverBackground#a779f366
notificationCenter.border#17171e
notificationCenterHeader.background#0A0A0D
notificationCenterHeader.foreground#a9b1d6
notifications.background#08080b
notifications.border#17171e
notifications.foreground#a9b1d6
notificationToast.border#252530
panel.background#08080b
panel.border#17171e
panelTitle.activeBorder#A779F3
panelTitle.activeForeground#a9b1d6
panelTitle.inactiveForeground#787c99
peekView.border#252530
peekViewEditor.background#08080b
peekViewEditor.matchHighlightBackground#41315e
peekViewResult.background#08080b
peekViewResult.fileForeground#a9b1d6
peekViewResult.lineForeground#787c99
peekViewResult.matchHighlightBackground#41315e
peekViewResult.selectionBackground#a9b1d621
peekViewTitle.background#08080b
peekViewTitleDescription.foreground#787c99
peekViewTitleLabel.foreground#a9b1d6
pickerGroup.border#252530
pickerGroup.foreground#A779F3
progressBar.background#A779F3
quickInput.background#08080b
quickInput.foreground#a9b1d6
scrollbar.background#0A0A0D
scrollbar.shadow#0A0A0D
scrollbarSlider.activeBackground#a9b1d666
scrollbarSlider.background#a9b1d626
scrollbarSlider.hoverBackground#a9b1d640
selection.background#3a2a55
settings.headerForeground#a9b1d6
settings.modifiedItemIndicator#F2C98B
sideBar.background#08080b
sideBar.border#17171e
sideBar.dropBackground#a779f333
sideBar.foreground#a9b1d6
sideBarSectionHeader.background#08080b
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#a9b1d6
sideBarTitle.foreground#a9b1d6
statusBar.background#08080b
statusBar.border#17171e
statusBar.debuggingBackground#F2C98B
statusBar.debuggingForeground#2d1d05
statusBar.foreground#a9b1d6
statusBarItem.activeBackground#a9b1d621
statusBarItem.hoverBackground#a9b1d61a
statusBarItem.remoteBackground#A779F3
statusBarItem.remoteForeground#000000
statusBarItem.remoteHoverBackground#BB9AF7
tab.activeBackground#0A0A0D
tab.activeBorderTop#A779F3
tab.activeForeground#a9b1d6
tab.border#00000000
tab.inactiveBackground#08080b
tab.inactiveForeground#787c99
terminal.ansiBlack#0A0A0D
terminal.ansiBlue#7DCFFF
terminal.ansiBrightBlack#5e5e7b
terminal.ansiBrightBlue#87A1FF
terminal.ansiBrightCyan#8BD5FF
terminal.ansiBrightGreen#95DFC6
terminal.ansiBrightMagenta#BB9AF7
terminal.ansiBrightRed#FF9FB1
terminal.ansiBrightWhite#eef0f7
terminal.ansiBrightYellow#F5D08A
terminal.ansiCyan#03BDE5
terminal.ansiGreen#85D0B7
terminal.ansiMagenta#A779F3
terminal.ansiRed#FB899E
terminal.ansiWhite#a9b1d6
terminal.ansiYellow#F2C98B
terminal.background#0A0A0D
terminal.foreground#a9b1d6
terminal.selectionBackground#3a2a55
terminalCursor.background#A779F3
terminalCursor.foreground#A779F3
textLink.activeForeground#8BD5FF
textLink.foreground#A779F3
textSeparator.foreground#787c99
titleBar.activeBackground#08080b
titleBar.activeForeground#a9b1d6
titleBar.border#17171e
titleBar.inactiveBackground#0A0A0D
titleBar.inactiveForeground#787c99
toolbar.activeBackground#a9b1d621
toolbar.hoverBackground#a9b1d61a
toolbar.hoverOutline#4C536F
tree.indentGuidesStroke#2a2c36
welcomePage.progress.background#384059
welcomePage.tileBackground#08080b
widget.border#17171e
widget.shadow#0A0A0D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.name.function.preprocessor	#a9b1d6	—
entity.other.attribute-name	#BB9AF7	—
constant, constant.language	#A779F3	—
comment	#4f4f65	—
entity.name.function	#87A1FF	—
keyword, storage.type, storage.modifier, storage.type.enum, storage.type.struct, storage.type.template	#BB9AF7	—
constant.numeric	#A779F3	—
keyword.operator, entity.name.function.operator	#FB899E	—
variable.other.property, variable.other.constant.property, support.type.property-name	#7DCFFF	—
entity.other.attribute-name.class.css	#BB9AF7	—
entity.other.attribute-name.id.css	#A779F3	—
entity.other.attribute-name.pseudo-element	#A779F3	—
string, constant.other.symbol	#85D0B7	—
constant.character, constant.other	#A779F3	—
string.regexp	#95DFC6	—
entity.name.tag, meta.tag.sgml	#FB899E	—
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class, storage.type.built-in.primitive, support.type	#03BDE5	—
entity.name.scope-resolution	#2CCAF0	—
variable, variable.parameter.function-call	#a9b1d6	—
variable.language, variable.parameter.function.language.special.self.python	#FB899E	—
variable.parameter, meta.parameter	#a9b1d6	—
text.html.markdown markup.inline.raw	#787c99	—
markup.bold	#BB9AF7	—
punctuation.definition.bold	#A779F3	—
string.other.link.title, punctuation.definition.link.title, string.other.link.description, punctuation.definition.link.description	#A779F3	—
markup.underline.link, punctuation.definition.metadata	#7DCFFF	—
markup.heading	#2CCAF0	—
punctuation.definition.markdown, punctuation.separator, punctuation.terminator, punctuation.section, punctuation.accessor, punctuation.definition.template-expression, punctuation.section.embedded, punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag, meta.decorator punctuation.decorator, markup.list punctuation.definition.list.begin	#a9a3dd	—
punctuation.definition.template-expression, punctuation.section.embedded, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js	#8BD5FF	—