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 Neon

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#00F5FF
activityBar.background#02040A
activityBar.border#0e1323
activityBar.foreground#E4FFFF
activityBar.inactiveForeground#8FB8C2
activityBarBadge.background#00F5FF
activityBarBadge.foreground#003133
badge.background#00F5FF
badge.foreground#003133
button.background#00F5FF
button.border#00000000
button.foreground#003133
button.hoverBackground#5CFAFF
button.secondaryBackground#16202B
button.secondaryForeground#c5d2e1
button.secondaryHoverBackground#243545
button.separator#E4FFFF
descriptionForeground#8FB8C2
diffEditor.insertedTextBackground#00ff8526
diffEditor.removedTextBackground#ff286826
disabledForeground#e4ffff66
dropdown.background#02040A
dropdown.border#0e1323
dropdown.foreground#E4FFFF
dropdown.listBackground#05070D
editor.background#05070D
editor.findMatchBackground#806b00
editor.findMatchHighlightBackground#005937
editor.foreground#E4FFFF
editor.inactiveSelectionBackground#04434a
editor.lineHighlightBackground#2e3333
editor.lineHighlightBorder#00000000
editor.selectionBackground#005659
editor.selectionHighlightBackground#035a62
editor.stackFrameHighlightBackground#403600
editor.wordHighlightBackground#00000000
editor.wordHighlightStrongBackground#00000000
editorBracketHighlight.foreground1#abfdff
editorBracketHighlight.foreground2#abfdff
editorBracketHighlight.foreground3#abfdff
editorBracketHighlight.foreground4#abfdff
editorBracketHighlight.foreground5#abfdff
editorBracketHighlight.foreground6#abfdff
editorBracketMatch.background#035a62
editorBracketMatch.border#02aeb6
editorCursor.foreground#00F5FF
editorError.border#00000000
editorError.foreground#FF2868
editorGroup.border#0e1323
editorGroup.dropBackground#00f5ff33
editorGroupHeader.border#161f39
editorGroupHeader.noTabsBackground#02040A
editorGroupHeader.tabsBackground#02040A
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#00FF85
editorGutter.deletedBackground#FF2868
editorGutter.modifiedBackground#FFD600
editorHoverWidget.background#02040A
editorHoverWidget.border#0e1323
editorIndentGuide.activeBackground#778585
editorIndentGuide.background#394040
editorInlayHint.background#02040A
editorInlayHint.foreground#E4FFFF
editorLineNumber.activeForeground#E4FFFF
editorLineNumber.foreground#728080
editorLink.activeForeground#00F5FF
editorSuggestWidget.background#02040A
editorSuggestWidget.border#0e1323
editorSuggestWidget.foreground#E4FFFF
editorSuggestWidget.highlightForeground#00F5FF
editorSuggestWidget.selectedBackground#005659
editorWarning.border#00000000
editorWarning.foreground#FFD600
editorWhitespace.foreground#e4ffff66
editorWidget.background#02040A
editorWidget.border#0e1323
errorForeground#FF2868
focusBorder#00F5FF
foreground#E4FFFF
gitDecoration.conflictingResourceForeground#FF5C8A
gitDecoration.deletedResourceForeground#FF2868
gitDecoration.ignoredResourceForeground#8FB8C2
gitDecoration.modifiedResourceForeground#FFD600
gitDecoration.submoduleResourceForeground#00FF9C
gitDecoration.untrackedResourceForeground#A06CFF
icon.foreground#E4FFFF
input.background#05070D
input.border#0e1323
input.foreground#E4FFFF
input.placeholderForeground#e4ffffb3
inputOption.activeBackground#e4ffff21
inputOption.activeBorder#00F5FF
inputOption.activeForeground#E4FFFF
inputOption.hoverBackground#e4ffff1a
inputValidation.errorBackground#ff286840
inputValidation.errorBorder#FF2868
inputValidation.infoBackground#00bfff40
inputValidation.infoBorder#00BFFF
inputValidation.warningBackground#ffd60040
inputValidation.warningBorder#FFD600
keybindingLabel.background#02040A
keybindingLabel.border#16202B
keybindingLabel.bottomBorder#243545
keybindingLabel.foreground#8FB8C2
list.activeSelectionBackground#e4ffff21
list.activeSelectionForeground#E4FFFF
list.activeSelectionIconForeground#E4FFFF
list.dropBackground#00f5ff33
list.errorForeground#FF2868
list.focusBackground#e4ffff21
list.focusForeground#E4FFFF
list.highlightForeground#00F5FF
list.hoverBackground#e4ffff1a
list.hoverForeground#E4FFFF
list.inactiveSelectionBackground#e4ffff21
list.inactiveSelectionForeground#E4FFFF
list.invalidItemForeground#FF2868
menu.separatorBackground#0e1323
minimap.background#05070D
minimapSlider.activeBackground#00f5ff8c
minimapSlider.background#00f5ff40
minimapSlider.hoverBackground#00f5ff66
notificationCenter.border#0e1323
notificationCenterHeader.background#05070D
notificationCenterHeader.foreground#E4FFFF
notifications.background#02040A
notifications.border#0e1323
notifications.foreground#E4FFFF
notificationToast.border#161f39
panel.background#02040A
panel.border#0e1323
panelTitle.activeBorder#00F5FF
panelTitle.activeForeground#E4FFFF
panelTitle.inactiveForeground#8FB8C2
peekView.border#161f39
peekViewEditor.background#02040A
peekViewEditor.matchHighlightBackground#035a62
peekViewResult.background#02040A
peekViewResult.fileForeground#E4FFFF
peekViewResult.lineForeground#8FB8C2
peekViewResult.matchHighlightBackground#035a62
peekViewResult.selectionBackground#e4ffff21
peekViewTitle.background#02040A
peekViewTitleDescription.foreground#8FB8C2
peekViewTitleLabel.foreground#E4FFFF
pickerGroup.border#161f39
pickerGroup.foreground#00F5FF
progressBar.background#00F5FF
quickInput.background#02040A
quickInput.foreground#E4FFFF
scrollbar.background#05070D
scrollbar.shadow#05070D
scrollbarSlider.activeBackground#e4ffff66
scrollbarSlider.background#e4ffff26
scrollbarSlider.hoverBackground#e4ffff40
selection.background#005659
settings.headerForeground#E4FFFF
settings.modifiedItemIndicator#FFD600
sideBar.background#02040A
sideBar.border#0e1323
sideBar.dropBackground#00f5ff33
sideBar.foreground#E4FFFF
sideBarSectionHeader.background#02040A
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#E4FFFF
sideBarTitle.foreground#E4FFFF
statusBar.background#02040A
statusBar.border#0e1323
statusBar.debuggingBackground#FFD600
statusBar.debuggingForeground#332b00
statusBar.foreground#E4FFFF
statusBarItem.activeBackground#e4ffff21
statusBarItem.hoverBackground#e4ffff1a
statusBarItem.remoteBackground#00F5FF
statusBarItem.remoteForeground#003133
statusBarItem.remoteHoverBackground#5CFAFF
tab.activeBackground#05070D
tab.activeBorderTop#00F5FF
tab.activeForeground#E4FFFF
tab.border#00000000
tab.inactiveBackground#02040A
tab.inactiveForeground#8FB8C2
terminal.ansiBlack#05070D
terminal.ansiBlue#00BFFF
terminal.ansiBrightBlack#3b5299
terminal.ansiBrightBlue#A06CFF
terminal.ansiBrightCyan#5CDAFF
terminal.ansiBrightGreen#5CFFA9
terminal.ansiBrightMagenta#5CFAFF
terminal.ansiBrightRed#FF5C8A
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#FFE866
terminal.ansiCyan#00FF9C
terminal.ansiGreen#00FF85
terminal.ansiMagenta#00F5FF
terminal.ansiRed#FF2868
terminal.ansiWhite#E4FFFF
terminal.ansiYellow#FFD600
terminal.background#05070D
terminal.foreground#E4FFFF
terminal.selectionBackground#005659
terminalCursor.background#00F5FF
terminalCursor.foreground#00F5FF
textLink.activeForeground#5CDAFF
textLink.foreground#00F5FF
textSeparator.foreground#8FB8C2
titleBar.activeBackground#02040A
titleBar.activeForeground#E4FFFF
titleBar.border#0e1323
titleBar.inactiveBackground#05070D
titleBar.inactiveForeground#8FB8C2
toolbar.activeBackground#e4ffff21
toolbar.hoverBackground#e4ffff1a
toolbar.hoverOutline#243545
tree.indentGuidesStroke#394040
welcomePage.progress.background#16202B
welcomePage.tileBackground#02040A
widget.border#0e1323
widget.shadow#05070D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.name.function.preprocessor	#E4FFFF	—
entity.other.attribute-name	#5CFAFF	—
constant, constant.language	#00F5FF	—
comment	#597175	—
entity.name.function	#A06CFF	—
keyword, storage.type, storage.modifier, storage.type.enum, storage.type.struct, storage.type.template	#5CFAFF	—
constant.numeric	#00F5FF	—
keyword.operator, entity.name.function.operator	#FF2868	—
variable.other.property, variable.other.constant.property, support.type.property-name	#00BFFF	—
entity.other.attribute-name.class.css	#5CFAFF	—
entity.other.attribute-name.id.css	#00F5FF	—
entity.other.attribute-name.pseudo-element	#00F5FF	—
string, constant.other.symbol	#00FF85	—
constant.character, constant.other	#00F5FF	—
string.regexp	#5CFFA9	—
entity.name.tag, meta.tag.sgml	#FF2868	—
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class, storage.type.built-in.primitive, support.type	#00FF9C	—
entity.name.scope-resolution	#5CFFBD	—
variable, variable.parameter.function-call	#E4FFFF	—
variable.language, variable.parameter.function.language.special.self.python	#FF2868	—
variable.parameter, meta.parameter	#E4FFFF	—
text.html.markdown markup.inline.raw	#8FB8C2	—
markup.bold	#5CFAFF	—
punctuation.definition.bold	#00F5FF	—
string.other.link.title, punctuation.definition.link.title, string.other.link.description, punctuation.definition.link.description	#00F5FF	—
markup.underline.link, punctuation.definition.metadata	#00BFFF	—
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	#abfdff	—
punctuation.definition.template-expression, punctuation.section.embedded, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js	#5CDAFF	—

VS Code preview

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

Herzha Theme — Herzha Punk

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#00F0FF
activityBar.background#030208
activityBar.border#130e23
activityBar.foreground#E8F9FF
activityBar.inactiveForeground#A4B6C5
activityBarBadge.background#00F0FF
activityBarBadge.foreground#003033
badge.background#00F0FF
badge.foreground#003033
button.background#00F0FF
button.border#00000000
button.foreground#003033
button.hoverBackground#5CFAFF
button.secondaryBackground#171525
button.secondaryForeground#c6c2dd
button.secondaryHoverBackground#292440
button.separator#E8F9FF
descriptionForeground#A4B6C5
diffEditor.insertedTextBackground#00f5a026
diffEditor.removedTextBackground#ff315f26
disabledForeground#e8f9ff66
dropdown.background#030208
dropdown.border#130e23
dropdown.foreground#E8F9FF
dropdown.listBackground#07050D
editor.background#07050D
editor.findMatchBackground#806800
editor.findMatchHighlightBackground#4b5900
editor.foreground#E8F9FF
editor.inactiveSelectionBackground#05404a
editor.lineHighlightBackground#2e3233
editor.lineHighlightBorder#00000000
editor.selectionBackground#005459
editor.selectionHighlightBackground#055762
editor.stackFrameHighlightBackground#403400
editor.wordHighlightBackground#00000000
editor.wordHighlightStrongBackground#00000000
editorBracketHighlight.foreground1#aef7ff
editorBracketHighlight.foreground2#aef7ff
editorBracketHighlight.foreground3#aef7ff
editorBracketHighlight.foreground4#aef7ff
editorBracketHighlight.foreground5#aef7ff
editorBracketHighlight.foreground6#aef7ff
editorBracketMatch.background#055762
editorBracketMatch.border#02aab6
editorCursor.foreground#00F0FF
editorError.border#00000000
editorError.foreground#FF315F
editorGroup.border#130e23
editorGroup.dropBackground#00f0ff33
editorGroupHeader.border#1f1639
editorGroupHeader.noTabsBackground#030208
editorGroupHeader.tabsBackground#030208
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#00F5A0
editorGutter.deletedBackground#FF315F
editorGutter.modifiedBackground#FFD000
editorHoverWidget.background#030208
editorHoverWidget.border#130e23
editorIndentGuide.activeBackground#798185
editorIndentGuide.background#3a3e40
editorInlayHint.background#030208
editorInlayHint.foreground#E8F9FF
editorLineNumber.activeForeground#E8F9FF
editorLineNumber.foreground#747d80
editorLink.activeForeground#00F0FF
editorSuggestWidget.background#030208
editorSuggestWidget.border#130e23
editorSuggestWidget.foreground#E8F9FF
editorSuggestWidget.highlightForeground#00F0FF
editorSuggestWidget.selectedBackground#005459
editorWarning.border#00000000
editorWarning.foreground#FFD000
editorWhitespace.foreground#e8f9ff66
editorWidget.background#030208
editorWidget.border#130e23
errorForeground#FF315F
focusBorder#00F0FF
foreground#E8F9FF
gitDecoration.conflictingResourceForeground#FF6688
gitDecoration.deletedResourceForeground#FF315F
gitDecoration.ignoredResourceForeground#A4B6C5
gitDecoration.modifiedResourceForeground#FFD000
gitDecoration.submoduleResourceForeground#D7FF00
gitDecoration.untrackedResourceForeground#FF68C2
icon.foreground#E8F9FF
input.background#07050D
input.border#130e23
input.foreground#E8F9FF
input.placeholderForeground#e8f9ffb3
inputOption.activeBackground#e8f9ff21
inputOption.activeBorder#00F0FF
inputOption.activeForeground#E8F9FF
inputOption.hoverBackground#e8f9ff1a
inputValidation.errorBackground#ff315f40
inputValidation.errorBorder#FF315F
inputValidation.infoBackground#00c8ff40
inputValidation.infoBorder#00C8FF
inputValidation.warningBackground#ffd00040
inputValidation.warningBorder#FFD000
keybindingLabel.background#030208
keybindingLabel.border#171525
keybindingLabel.bottomBorder#292440
keybindingLabel.foreground#A4B6C5
list.activeSelectionBackground#e8f9ff21
list.activeSelectionForeground#E8F9FF
list.activeSelectionIconForeground#E8F9FF
list.dropBackground#00f0ff33
list.errorForeground#FF315F
list.focusBackground#e8f9ff21
list.focusForeground#E8F9FF
list.highlightForeground#00F0FF
list.hoverBackground#e8f9ff1a
list.hoverForeground#E8F9FF
list.inactiveSelectionBackground#e8f9ff21
list.inactiveSelectionForeground#E8F9FF
list.invalidItemForeground#FF315F
menu.separatorBackground#130e23
minimap.background#07050D
minimapSlider.activeBackground#00f0ff8c
minimapSlider.background#00f0ff40
minimapSlider.hoverBackground#00f0ff66
notificationCenter.border#130e23
notificationCenterHeader.background#07050D
notificationCenterHeader.foreground#E8F9FF
notifications.background#030208
notifications.border#130e23
notifications.foreground#E8F9FF
notificationToast.border#1f1639
panel.background#030208
panel.border#130e23
panelTitle.activeBorder#00F0FF
panelTitle.activeForeground#E8F9FF
panelTitle.inactiveForeground#A4B6C5
peekView.border#1f1639
peekViewEditor.background#030208
peekViewEditor.matchHighlightBackground#055762
peekViewResult.background#030208
peekViewResult.fileForeground#E8F9FF
peekViewResult.lineForeground#A4B6C5
peekViewResult.matchHighlightBackground#055762
peekViewResult.selectionBackground#e8f9ff21
peekViewTitle.background#030208
peekViewTitleDescription.foreground#A4B6C5
peekViewTitleLabel.foreground#E8F9FF
pickerGroup.border#1f1639
pickerGroup.foreground#00F0FF
progressBar.background#00F0FF
quickInput.background#030208
quickInput.foreground#E8F9FF
scrollbar.background#07050D
scrollbar.shadow#07050D
scrollbarSlider.activeBackground#e8f9ff66
scrollbarSlider.background#e8f9ff26
scrollbarSlider.hoverBackground#e8f9ff40
selection.background#005459
settings.headerForeground#E8F9FF
settings.modifiedItemIndicator#FFD000
sideBar.background#030208
sideBar.border#130e23
sideBar.dropBackground#00f0ff33
sideBar.foreground#E8F9FF
sideBarSectionHeader.background#030208
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#E8F9FF
sideBarTitle.foreground#E8F9FF
statusBar.background#030208
statusBar.border#130e23
statusBar.debuggingBackground#FFD000
statusBar.debuggingForeground#1a1500
statusBar.foreground#E8F9FF
statusBarItem.activeBackground#e8f9ff21
statusBarItem.hoverBackground#e8f9ff1a
statusBarItem.remoteBackground#00F0FF
statusBarItem.remoteForeground#003033
statusBarItem.remoteHoverBackground#5CFAFF
tab.activeBackground#07050D
tab.activeBorderTop#00F0FF
tab.activeForeground#E8F9FF
tab.border#00000000
tab.inactiveBackground#030208
tab.inactiveForeground#A4B6C5
terminal.ansiBlack#07050D
terminal.ansiBlue#00C8FF
terminal.ansiBrightBlack#523b99
terminal.ansiBrightBlue#FF68C2
terminal.ansiBrightCyan#5CE0FF
terminal.ansiBrightGreen#5CFFC0
terminal.ansiBrightMagenta#5CFAFF
terminal.ansiBrightRed#FF6688
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#FFE866
terminal.ansiCyan#D7FF00
terminal.ansiGreen#00F5A0
terminal.ansiMagenta#00F0FF
terminal.ansiRed#FF315F
terminal.ansiWhite#E8F9FF
terminal.ansiYellow#FFD000
terminal.background#07050D
terminal.foreground#E8F9FF
terminal.selectionBackground#005459
terminalCursor.background#00F0FF
terminalCursor.foreground#00F0FF
textLink.activeForeground#5CE0FF
textLink.foreground#00F0FF
textSeparator.foreground#A4B6C5
titleBar.activeBackground#030208
titleBar.activeForeground#E8F9FF
titleBar.border#130e23
titleBar.inactiveBackground#07050D
titleBar.inactiveForeground#A4B6C5
toolbar.activeBackground#e8f9ff21
toolbar.hoverBackground#e8f9ff1a
toolbar.hoverOutline#292440
tree.indentGuidesStroke#3a3e40
welcomePage.progress.background#171525
welcomePage.tileBackground#030208
widget.border#130e23
widget.shadow#07050D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.name.function.preprocessor	#E8F9FF	—
entity.other.attribute-name	#5CFAFF	—
constant, constant.language	#00F0FF	—
comment	#5c6e75	—
entity.name.function	#FF68C2	—
keyword, storage.type, storage.modifier, storage.type.enum, storage.type.struct, storage.type.template	#5CFAFF	—
constant.numeric	#00F0FF	—
keyword.operator, entity.name.function.operator	#FF315F	—
variable.other.property, variable.other.constant.property, support.type.property-name	#00C8FF	—
entity.other.attribute-name.class.css	#5CFAFF	—
entity.other.attribute-name.id.css	#00F0FF	—
entity.other.attribute-name.pseudo-element	#00F0FF	—
string, constant.other.symbol	#00F5A0	—
constant.character, constant.other	#00F0FF	—
string.regexp	#5CFFC0	—
entity.name.tag, meta.tag.sgml	#FF315F	—
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class, storage.type.built-in.primitive, support.type	#D7FF00	—
entity.name.scope-resolution	#E8FF5C	—
variable, variable.parameter.function-call	#E8F9FF	—
variable.language, variable.parameter.function.language.special.self.python	#FF315F	—
variable.parameter, meta.parameter	#E8F9FF	—
text.html.markdown markup.inline.raw	#A4B6C5	—
markup.bold	#5CFAFF	—
punctuation.definition.bold	#00F0FF	—
string.other.link.title, punctuation.definition.link.title, string.other.link.description, punctuation.definition.link.description	#00F0FF	—
markup.underline.link, punctuation.definition.metadata	#00C8FF	—
markup.heading	#E8FF5C	—
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	#aef7ff	—
punctuation.definition.template-expression, punctuation.section.embedded, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js	#5CE0FF	—

VS Code preview

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

Herzha Theme — Herzha Sakura

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#FF79C6
activityBar.background#0A0810
activityBar.border#1c1623
activityBar.foreground#F4E9F8
activityBar.inactiveForeground#BFA9CC
activityBarBadge.background#FF79C6
activityBarBadge.foreground#000000
badge.background#FF79C6
badge.foreground#000000
button.background#FF79C6
button.border#00000000
button.foreground#000000
button.hoverBackground#FF9AD8
button.secondaryBackground#3A2F3F
button.secondaryForeground#ebe6ed
button.secondaryHoverBackground#534058
button.separator#F4E9F8
descriptionForeground#BFA9CC
diffEditor.insertedTextBackground#7af1c026
diffEditor.removedTextBackground#ff555526
disabledForeground#f4e9f866
dropdown.background#0A0810
dropdown.border#1c1623
dropdown.foreground#F4E9F8
dropdown.listBackground#0D0A10
editor.background#0D0A10
editor.findMatchBackground#79613f
editor.findMatchHighlightBackground#594026
editor.foreground#F4E9F8
editor.inactiveSelectionBackground#4a263e
editor.lineHighlightBackground#312f32
editor.lineHighlightBorder#00000000
editor.selectionBackground#592a45
editor.selectionHighlightBackground#623150
editor.stackFrameHighlightBackground#3c311f
editor.wordHighlightBackground#00000000
editor.wordHighlightStrongBackground#00000000
editorBracketHighlight.foreground1#f7cdec
editorBracketHighlight.foreground2#f7cdec
editorBracketHighlight.foreground3#f7cdec
editorBracketHighlight.foreground4#f7cdec
editorBracketHighlight.foreground5#f7cdec
editorBracketHighlight.foreground6#f7cdec
editorBracketMatch.background#623150
editorBracketMatch.border#b6588f
editorCursor.foreground#FF79C6
editorError.border#00000000
editorError.foreground#FF5555
editorGroup.border#1c1623
editorGroup.dropBackground#ff79c633
editorGroupHeader.border#2c2236
editorGroupHeader.noTabsBackground#0A0810
editorGroupHeader.tabsBackground#0A0810
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#7AF1C0
editorGutter.deletedBackground#FF5555
editorGutter.modifiedBackground#F1C27D
editorHoverWidget.background#0A0810
editorHoverWidget.border#1c1623
editorIndentGuide.activeBackground#7f7981
editorIndentGuide.background#3d3a3e
editorInlayHint.background#0A0810
editorInlayHint.foreground#F4E9F8
editorLineNumber.activeForeground#F4E9F8
editorLineNumber.foreground#7a757c
editorLink.activeForeground#FF79C6
editorSuggestWidget.background#0A0810
editorSuggestWidget.border#1c1623
editorSuggestWidget.foreground#F4E9F8
editorSuggestWidget.highlightForeground#FF79C6
editorSuggestWidget.selectedBackground#592a45
editorWarning.border#00000000
editorWarning.foreground#F1C27D
editorWhitespace.foreground#f4e9f866
editorWidget.background#0A0810
editorWidget.border#1c1623
errorForeground#FF5555
focusBorder#FF79C6
foreground#F4E9F8
gitDecoration.conflictingResourceForeground#FF7777
gitDecoration.deletedResourceForeground#FF5555
gitDecoration.ignoredResourceForeground#BFA9CC
gitDecoration.modifiedResourceForeground#F1C27D
gitDecoration.submoduleResourceForeground#FFB86C
gitDecoration.untrackedResourceForeground#D2B2FF
icon.foreground#F4E9F8
input.background#0D0A10
input.border#1c1623
input.foreground#F4E9F8
input.placeholderForeground#f4e9f8b3
inputOption.activeBackground#f4e9f821
inputOption.activeBorder#FF79C6
inputOption.activeForeground#F4E9F8
inputOption.hoverBackground#f4e9f81a
inputValidation.errorBackground#ff555540
inputValidation.errorBorder#FF5555
inputValidation.infoBackground#8be9fd40
inputValidation.infoBorder#8BE9FD
inputValidation.warningBackground#f1c27d40
inputValidation.warningBorder#F1C27D
keybindingLabel.background#0A0810
keybindingLabel.border#3A2F3F
keybindingLabel.bottomBorder#534058
keybindingLabel.foreground#BFA9CC
list.activeSelectionBackground#f4e9f821
list.activeSelectionForeground#F4E9F8
list.activeSelectionIconForeground#F4E9F8
list.dropBackground#ff79c633
list.errorForeground#FF5555
list.focusBackground#f4e9f821
list.focusForeground#F4E9F8
list.highlightForeground#FF79C6
list.hoverBackground#f4e9f81a
list.hoverForeground#F4E9F8
list.inactiveSelectionBackground#f4e9f821
list.inactiveSelectionForeground#F4E9F8
list.invalidItemForeground#FF5555
menu.separatorBackground#1c1623
minimap.background#0D0A10
minimapSlider.activeBackground#ff79c68c
minimapSlider.background#ff79c640
minimapSlider.hoverBackground#ff79c666
notificationCenter.border#1c1623
notificationCenterHeader.background#0D0A10
notificationCenterHeader.foreground#F4E9F8
notifications.background#0A0810
notifications.border#1c1623
notifications.foreground#F4E9F8
notificationToast.border#2c2236
panel.background#0A0810
panel.border#1c1623
panelTitle.activeBorder#FF79C6
panelTitle.activeForeground#F4E9F8
panelTitle.inactiveForeground#BFA9CC
peekView.border#2c2236
peekViewEditor.background#0A0810
peekViewEditor.matchHighlightBackground#623150
peekViewResult.background#0A0810
peekViewResult.fileForeground#F4E9F8
peekViewResult.lineForeground#BFA9CC
peekViewResult.matchHighlightBackground#623150
peekViewResult.selectionBackground#f4e9f821
peekViewTitle.background#0A0810
peekViewTitleDescription.foreground#BFA9CC
peekViewTitleLabel.foreground#F4E9F8
pickerGroup.border#2c2236
pickerGroup.foreground#FF79C6
progressBar.background#FF79C6
quickInput.background#0A0810
quickInput.foreground#F4E9F8
scrollbar.background#0D0A10
scrollbar.shadow#0D0A10
scrollbarSlider.activeBackground#f4e9f866
scrollbarSlider.background#f4e9f826
scrollbarSlider.hoverBackground#f4e9f840
selection.background#592a45
settings.headerForeground#F4E9F8
settings.modifiedItemIndicator#F1C27D
sideBar.background#0A0810
sideBar.border#1c1623
sideBar.dropBackground#ff79c633
sideBar.foreground#F4E9F8
sideBarSectionHeader.background#0A0810
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#F4E9F8
sideBarTitle.foreground#F4E9F8
statusBar.background#0A0810
statusBar.border#1c1623
statusBar.debuggingBackground#F1C27D
statusBar.debuggingForeground#1f1403
statusBar.foreground#F4E9F8
statusBarItem.activeBackground#f4e9f821
statusBarItem.hoverBackground#f4e9f81a
statusBarItem.remoteBackground#FF79C6
statusBarItem.remoteForeground#000000
statusBarItem.remoteHoverBackground#FF9AD8
tab.activeBackground#0D0A10
tab.activeBorderTop#FF79C6
tab.activeForeground#F4E9F8
tab.border#00000000
tab.inactiveBackground#0A0810
tab.inactiveForeground#BFA9CC
terminal.ansiBlack#0D0A10
terminal.ansiBlue#8BE9FD
terminal.ansiBrightBlack#6e5587
terminal.ansiBrightBlue#D2B2FF
terminal.ansiBrightCyan#A4F0FF
terminal.ansiBrightGreen#96FFD4
terminal.ansiBrightMagenta#FF9AD8
terminal.ansiBrightRed#FF7777
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#FFD59A
terminal.ansiCyan#FFB86C
terminal.ansiGreen#7AF1C0
terminal.ansiMagenta#FF79C6
terminal.ansiRed#FF5555
terminal.ansiWhite#F4E9F8
terminal.ansiYellow#F1C27D
terminal.background#0D0A10
terminal.foreground#F4E9F8
terminal.selectionBackground#592a45
terminalCursor.background#FF79C6
terminalCursor.foreground#FF79C6
textLink.activeForeground#A4F0FF
textLink.foreground#FF79C6
textSeparator.foreground#BFA9CC
titleBar.activeBackground#0A0810
titleBar.activeForeground#F4E9F8
titleBar.border#1c1623
titleBar.inactiveBackground#0D0A10
titleBar.inactiveForeground#BFA9CC
toolbar.activeBackground#f4e9f821
toolbar.hoverBackground#f4e9f81a
toolbar.hoverOutline#534058
tree.indentGuidesStroke#3d3a3e
welcomePage.progress.background#3A2F3F
welcomePage.tileBackground#0A0810
widget.border#1c1623
widget.shadow#0D0A10

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.name.function.preprocessor	#F4E9F8	—
entity.other.attribute-name	#FF9AD8	—
constant, constant.language	#FF79C6	—
comment	#716471	—
entity.name.function	#D2B2FF	—
keyword, storage.type, storage.modifier, storage.type.enum, storage.type.struct, storage.type.template	#FF9AD8	—
constant.numeric	#FF79C6	—
keyword.operator, entity.name.function.operator	#FF5555	—
variable.other.property, variable.other.constant.property, support.type.property-name	#8BE9FD	—
entity.other.attribute-name.class.css	#FF9AD8	—
entity.other.attribute-name.id.css	#FF79C6	—
entity.other.attribute-name.pseudo-element	#FF79C6	—
string, constant.other.symbol	#7AF1C0	—
constant.character, constant.other	#FF79C6	—
string.regexp	#96FFD4	—
entity.name.tag, meta.tag.sgml	#FF5555	—
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class, storage.type.built-in.primitive, support.type	#FFB86C	—
entity.name.scope-resolution	#FFD19A	—
variable, variable.parameter.function-call	#F4E9F8	—
variable.language, variable.parameter.function.language.special.self.python	#FF5555	—
variable.parameter, meta.parameter	#F4E9F8	—
text.html.markdown markup.inline.raw	#BFA9CC	—
markup.bold	#FF9AD8	—
punctuation.definition.bold	#FF79C6	—
string.other.link.title, punctuation.definition.link.title, string.other.link.description, punctuation.definition.link.description	#FF79C6	—
markup.underline.link, punctuation.definition.metadata	#8BE9FD	—
markup.heading	#FFD19A	—
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	#f7cdec	—
punctuation.definition.template-expression, punctuation.section.embedded, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js	#A4F0FF	—

VS Code preview

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

Herzha Theme — Herzha Static

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#5EEBFF
activityBar.background#05090C
activityBar.border#101c25
activityBar.foreground#C7F4FF
activityBar.inactiveForeground#89BFD0
activityBarBadge.background#5EEBFF
activityBarBadge.foreground#00262b
badge.background#5EEBFF
badge.foreground#00262b
button.background#5EEBFF
button.border#00000000
button.foreground#00262b
button.hoverBackground#85F2FF
button.secondaryBackground#2A3A44
button.secondaryForeground#f4f7f8
button.secondaryHoverBackground#3F515D
button.separator#C7F4FF
descriptionForeground#89BFD0
diffEditor.insertedTextBackground#6dedb726
diffEditor.removedTextBackground#ff5c7c26
disabledForeground#c7f4ff66
dropdown.background#05090C
dropdown.border#101c25
dropdown.foreground#C7F4FF
dropdown.listBackground#070C10
editor.background#070C10
editor.findMatchBackground#806933
editor.findMatchHighlightBackground#005949
editor.foreground#C7F4FF
editor.inactiveSelectionBackground#1d444c
editor.lineHighlightBackground#283133
editor.lineHighlightBorder#00000000
editor.selectionBackground#215259
editor.selectionHighlightBackground#255a64
editor.stackFrameHighlightBackground#40341a
editor.wordHighlightBackground#00000000
editor.wordHighlightStrongBackground#00000000
editorBracketHighlight.foreground1#adf2ff
editorBracketHighlight.foreground2#adf2ff
editorBracketHighlight.foreground3#adf2ff
editorBracketHighlight.foreground4#adf2ff
editorBracketHighlight.foreground5#adf2ff
editorBracketHighlight.foreground6#adf2ff
editorBracketMatch.background#255a64
editorBracketMatch.border#44a8b7
editorCursor.foreground#5EEBFF
editorError.border#00000000
editorError.foreground#FF5C7C
editorGroup.border#101c25
editorGroup.dropBackground#5eebff33
editorGroupHeader.border#1a2c3b
editorGroupHeader.noTabsBackground#05090C
editorGroupHeader.tabsBackground#05090C
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#6DEDB7
editorGutter.deletedBackground#FF5C7C
editorGutter.modifiedBackground#FFD166
editorHoverWidget.background#05090C
editorHoverWidget.border#101c25
editorIndentGuide.activeBackground#677f85
editorIndentGuide.background#323d40
editorInlayHint.background#05090C
editorInlayHint.foreground#C7F4FF
editorLineNumber.activeForeground#C7F4FF
editorLineNumber.foreground#647a80
editorLink.activeForeground#5EEBFF
editorSuggestWidget.background#05090C
editorSuggestWidget.border#101c25
editorSuggestWidget.foreground#C7F4FF
editorSuggestWidget.highlightForeground#5EEBFF
editorSuggestWidget.selectedBackground#215259
editorWarning.border#00000000
editorWarning.foreground#FFD166
editorWhitespace.foreground#c7f4ff66
editorWidget.background#05090C
editorWidget.border#101c25
errorForeground#FF5C7C
focusBorder#5EEBFF
foreground#C7F4FF
gitDecoration.conflictingResourceForeground#FF8098
gitDecoration.deletedResourceForeground#FF5C7C
gitDecoration.ignoredResourceForeground#89BFD0
gitDecoration.modifiedResourceForeground#FFD166
gitDecoration.submoduleResourceForeground#00FFD1
gitDecoration.untrackedResourceForeground#7DA2FA
icon.foreground#C7F4FF
input.background#070C10
input.border#101c25
input.foreground#C7F4FF
input.placeholderForeground#c7f4ffb3
inputOption.activeBackground#c7f4ff21
inputOption.activeBorder#5EEBFF
inputOption.activeForeground#C7F4FF
inputOption.hoverBackground#c7f4ff1a
inputValidation.errorBackground#ff5c7c40
inputValidation.errorBorder#FF5C7C
inputValidation.infoBackground#72d8ff40
inputValidation.infoBorder#72D8FF
inputValidation.warningBackground#ffd16640
inputValidation.warningBorder#FFD166
keybindingLabel.background#05090C
keybindingLabel.border#2A3A44
keybindingLabel.bottomBorder#3F515D
keybindingLabel.foreground#89BFD0
list.activeSelectionBackground#c7f4ff21
list.activeSelectionForeground#C7F4FF
list.activeSelectionIconForeground#C7F4FF
list.dropBackground#5eebff33
list.errorForeground#FF5C7C
list.focusBackground#c7f4ff21
list.focusForeground#C7F4FF
list.highlightForeground#5EEBFF
list.hoverBackground#c7f4ff1a
list.hoverForeground#C7F4FF
list.inactiveSelectionBackground#c7f4ff21
list.inactiveSelectionForeground#C7F4FF
list.invalidItemForeground#FF5C7C
menu.separatorBackground#101c25
minimap.background#070C10
minimapSlider.activeBackground#5eebff8c
minimapSlider.background#5eebff40
minimapSlider.hoverBackground#5eebff66
notificationCenter.border#101c25
notificationCenterHeader.background#070C10
notificationCenterHeader.foreground#C7F4FF
notifications.background#05090C
notifications.border#101c25
notifications.foreground#C7F4FF
notificationToast.border#1a2c3b
panel.background#05090C
panel.border#101c25
panelTitle.activeBorder#5EEBFF
panelTitle.activeForeground#C7F4FF
panelTitle.inactiveForeground#89BFD0
peekView.border#1a2c3b
peekViewEditor.background#05090C
peekViewEditor.matchHighlightBackground#255a64
peekViewResult.background#05090C
peekViewResult.fileForeground#C7F4FF
peekViewResult.lineForeground#89BFD0
peekViewResult.matchHighlightBackground#255a64
peekViewResult.selectionBackground#c7f4ff21
peekViewTitle.background#05090C
peekViewTitleDescription.foreground#89BFD0
peekViewTitleLabel.foreground#C7F4FF
pickerGroup.border#1a2c3b
pickerGroup.foreground#5EEBFF
progressBar.background#5EEBFF
quickInput.background#05090C
quickInput.foreground#C7F4FF
scrollbar.background#070C10
scrollbar.shadow#070C10
scrollbarSlider.activeBackground#c7f4ff66
scrollbarSlider.background#c7f4ff26
scrollbarSlider.hoverBackground#c7f4ff40
selection.background#215259
settings.headerForeground#C7F4FF
settings.modifiedItemIndicator#FFD166
sideBar.background#05090C
sideBar.border#101c25
sideBar.dropBackground#5eebff33
sideBar.foreground#C7F4FF
sideBarSectionHeader.background#05090C
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#C7F4FF
sideBarTitle.foreground#C7F4FF
statusBar.background#05090C
statusBar.border#101c25
statusBar.debuggingBackground#FFD166
statusBar.debuggingForeground#332400
statusBar.foreground#C7F4FF
statusBarItem.activeBackground#c7f4ff21
statusBarItem.hoverBackground#c7f4ff1a
statusBarItem.remoteBackground#5EEBFF
statusBarItem.remoteForeground#00262b
statusBarItem.remoteHoverBackground#85F2FF
tab.activeBackground#070C10
tab.activeBorderTop#5EEBFF
tab.activeForeground#C7F4FF
tab.border#00000000
tab.inactiveBackground#05090C
tab.inactiveForeground#89BFD0
terminal.ansiBlack#070C10
terminal.ansiBlue#72D8FF
terminal.ansiBrightBlack#427197
terminal.ansiBrightBlue#7DA2FA
terminal.ansiBrightCyan#8EE2FF
terminal.ansiBrightGreen#88F5CB
terminal.ansiBrightMagenta#85F2FF
terminal.ansiBrightRed#FF8098
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#FFE08A
terminal.ansiCyan#00FFD1
terminal.ansiGreen#6DEDB7
terminal.ansiMagenta#5EEBFF
terminal.ansiRed#FF5C7C
terminal.ansiWhite#C7F4FF
terminal.ansiYellow#FFD166
terminal.background#070C10
terminal.foreground#C7F4FF
terminal.selectionBackground#215259
terminalCursor.background#5EEBFF
terminalCursor.foreground#5EEBFF
textLink.activeForeground#8EE2FF
textLink.foreground#5EEBFF
textSeparator.foreground#89BFD0
titleBar.activeBackground#05090C
titleBar.activeForeground#C7F4FF
titleBar.border#101c25
titleBar.inactiveBackground#070C10
titleBar.inactiveForeground#89BFD0
toolbar.activeBackground#c7f4ff21
toolbar.hoverBackground#c7f4ff1a
toolbar.hoverOutline#3F515D
tree.indentGuidesStroke#323d40
welcomePage.progress.background#2A3A44
welcomePage.tileBackground#05090C
widget.border#101c25
widget.shadow#070C10

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.name.function.preprocessor	#C7F4FF	—
entity.other.attribute-name	#85F2FF	—
constant, constant.language	#5EEBFF	—
comment	#557077	—
entity.name.function	#7DA2FA	—
keyword, storage.type, storage.modifier, storage.type.enum, storage.type.struct, storage.type.template	#85F2FF	—
constant.numeric	#5EEBFF	—
keyword.operator, entity.name.function.operator	#FF5C7C	—
variable.other.property, variable.other.constant.property, support.type.property-name	#72D8FF	—
entity.other.attribute-name.class.css	#85F2FF	—
entity.other.attribute-name.id.css	#5EEBFF	—
entity.other.attribute-name.pseudo-element	#5EEBFF	—
string, constant.other.symbol	#6DEDB7	—
constant.character, constant.other	#5EEBFF	—
string.regexp	#88F5CB	—
entity.name.tag, meta.tag.sgml	#FF5C7C	—
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class, storage.type.built-in.primitive, support.type	#00FFD1	—
entity.name.scope-resolution	#3CFFE0	—
variable, variable.parameter.function-call	#C7F4FF	—
variable.language, variable.parameter.function.language.special.self.python	#FF5C7C	—
variable.parameter, meta.parameter	#C7F4FF	—
text.html.markdown markup.inline.raw	#89BFD0	—
markup.bold	#85F2FF	—
punctuation.definition.bold	#5EEBFF	—
string.other.link.title, punctuation.definition.link.title, string.other.link.description, punctuation.definition.link.description	#5EEBFF	—
markup.underline.link, punctuation.definition.metadata	#72D8FF	—
markup.heading	#3CFFE0	—
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	#adf2ff	—
punctuation.definition.template-expression, punctuation.section.embedded, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js	#8EE2FF	—