Backend Themes

Name: Backend Themes
Author: StraightRight

Publisher: StraightRightThemes in package: 48

A curated collection of VSCode themes, based on colors of backend frameworks

Open in VS Code GitHub

Color themes

VS Code preview

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

Backend Themes — NestJS 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.activeBorder#E65173
activityBar.background#181818
activityBar.border#2E2E2E
activityBar.foreground#D4D4D4
activityBar.inactiveForeground#8A8A8A
activityBarBadge.background#E65173
activityBarBadge.foreground#000000
badge.background#E65173
badge.foreground#000000
button.background#E65173
button.foreground#000000
button.hoverBackground#EC7993
dropdown.background#181818
dropdown.foreground#D4D4D4
editor.background#1E1E1E
editor.findMatchBackground#E6517355
editor.findMatchHighlightBackground#E6517322
editor.foreground#D4D4D4
editor.selectionBackground#E6517344
editor.selectionHighlightBackground#E6517322
editor.wordHighlightBackground#E6517322
editorBracketMatch.background#E6517322
editorBracketMatch.border#E65173
editorCursor.foreground#E65173
editorGroup.border#2E2E2E
editorGroupHeader.tabsBackground#181818
editorGroupHeader.tabsBorder#2E2E2E
editorHoverWidget.background#181818
editorHoverWidget.border#2E2E2E
editorIndentGuide.activeBackground1#E65173
editorIndentGuide.background1#2E2E2E
editorLineNumber.activeForeground#E65173
editorLineNumber.foreground#8A8A8A
editorSuggestWidget.background#181818
editorSuggestWidget.border#2E2E2E
editorSuggestWidget.highlightForeground#E65173
editorSuggestWidget.selectedBackground#E6517333
editorWhitespace.foreground#2E2E2E
editorWidget.background#181818
editorWidget.border#2E2E2E
extensionButton.prominentBackground#E65173
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#EC7993
focusBorder#E65173
gitDecoration.modifiedResourceForeground#E65173
input.background#181818
input.foreground#D4D4D4
input.placeholderForeground#8A8A8A
inputOption.activeBorder#E65173
list.activeSelectionBackground#E6517344
list.activeSelectionForeground#D4D4D4
list.focusOutline#E65173
list.highlightForeground#E65173
list.hoverBackground#181818
list.inactiveSelectionBackground#E6517322
minimap.findMatchHighlight#E65173
panel.background#1E1E1E
panel.border#2E2E2E
panelTitle.activeBorder#E65173
panelTitle.activeForeground#D4D4D4
panelTitle.inactiveForeground#8A8A8A
peekView.border#E65173
progressBar.background#E65173
scrollbarSlider.activeBackground#E65173AA
scrollbarSlider.background#8A8A8A44
scrollbarSlider.hoverBackground#E6517366
sideBar.background#1E1E1E
sideBar.border#2E2E2E
sideBar.foreground#B0B0B0
sideBarSectionHeader.background#181818
sideBarSectionHeader.border#2E2E2E
sideBarSectionHeader.foreground#D4D4D4
sideBarTitle.foreground#B0B0B0
statusBar.background#E65173
statusBar.border#2E2E2E
statusBar.debuggingBackground#EC7993
statusBar.debuggingForeground#000000
statusBar.foreground#000000
statusBar.noFolderBackground#EC7993
statusBarItem.hoverBackground#E6517333
statusBarItem.remoteBackground#EC7993
statusBarItem.remoteForeground#000000
tab.activeBackground#1E1E1E
tab.activeBorderTop#E65173
tab.activeForeground#D4D4D4
tab.border#2E2E2E
tab.inactiveBackground#181818
tab.inactiveForeground#8A8A8A
terminal.background#1E1E1E
terminal.foreground#D4D4D4
terminalCursor.foreground#E65173
textLink.activeForeground#EC7993
textLink.foreground#E65173
titleBar.activeBackground#181818
titleBar.activeForeground#B0B0B0
titleBar.border#2E2E2E
titleBar.inactiveBackground#181818
titleBar.inactiveForeground#8A8A8A
tree.indentGuidesStroke#2E2E2E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#189C84	italic
string, punctuation.definition.string	#EA5418	—
constant.numeric, constant.language, constant.character	#BAF6C6	—
keyword, keyword.control, storage, storage.type	#E65173	—
entity.name.function, support.function	#EAF00C	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#5AFCF0	—
variable, variable.parameter	#3684F0	—
entity.name.tag, meta.tag	#E65173	—
entity.other.attribute-name	#3684F0	—
keyword.operator, punctuation	#48D2FC	—
meta.decorator, punctuation.decorator, storage.type.annotation, meta.annotation, support.type.attribute	#EAF00C	—

VS Code preview

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

Backend Themes — NestJS High Contrast 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.activeBorder#EB708C
activityBar.background#000000
activityBar.border#EB708C
activityBar.foreground#FFFFFF
activityBar.inactiveForeground#A6A6A6
activityBarBadge.background#EB708C
activityBarBadge.foreground#000000
badge.background#EB708C
badge.foreground#000000
button.background#000000
button.border#EB708C
button.foreground#FFFFFF
button.hoverBackground#EB708C44
contrastActiveBorder#FFFFFF
contrastBorder#EB708C
dropdown.background#000000
dropdown.border#EB708C
dropdown.foreground#FFFFFF
editor.background#000000
editor.findMatchBackground#EB708C55
editor.findMatchBorder#FFFFFF
editor.findMatchHighlightBackground#EB708C22
editor.foreground#FFFFFF
editor.selectionBackground#EB708C55
editor.selectionHighlightBackground#EB708C22
editor.selectionHighlightBorder#EB708C
editor.wordHighlightBackground#EB708C22
editor.wordHighlightBorder#EB708C
editorBracketMatch.background#EB708C22
editorBracketMatch.border#EB708C
editorCursor.foreground#EB708C
editorGroup.border#3A3A3A
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#EB708C
editorHoverWidget.background#000000
editorHoverWidget.border#EB708C
editorIndentGuide.activeBackground1#EB708C
editorIndentGuide.background1#3A3A3A
editorLineNumber.activeForeground#EB708C
editorLineNumber.foreground#A6A6A6
editorSuggestWidget.background#000000
editorSuggestWidget.border#EB708C
editorSuggestWidget.highlightForeground#EB708C
editorSuggestWidget.selectedBackground#EB708C33
editorWhitespace.foreground#3A3A3A
editorWidget.background#000000
editorWidget.border#EB708C
extensionButton.prominentBackground#000000
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#EB708C44
focusBorder#FFFFFF
gitDecoration.modifiedResourceForeground#EB708C
input.background#000000
input.border#EB708C
input.foreground#FFFFFF
input.placeholderForeground#A6A6A6
inputOption.activeBorder#FFFFFF
list.activeSelectionBackground#EB708C44
list.activeSelectionForeground#FFFFFF
list.focusOutline#FFFFFF
list.highlightForeground#EB708C
list.hoverBackground#EB708C22
list.inactiveSelectionBackground#EB708C22
minimap.findMatchHighlight#EB708C
panel.background#000000
panel.border#EB708C
panelTitle.activeBorder#EB708C
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#A6A6A6
peekView.border#EB708C
progressBar.background#EB708C
scrollbarSlider.activeBackground#EB708CAA
scrollbarSlider.background#A6A6A644
scrollbarSlider.hoverBackground#EB708C66
sideBar.background#000000
sideBar.border#EB708C
sideBar.foreground#D0D0D0
sideBarSectionHeader.background#000000
sideBarSectionHeader.border#EB708C
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#D0D0D0
statusBar.background#000000
statusBar.border#EB708C
statusBar.debuggingBackground#EB708C
statusBar.debuggingForeground#000000
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#000000
statusBarItem.hoverBackground#EB708C33
statusBarItem.remoteBackground#F094A9
statusBarItem.remoteForeground#000000
tab.activeBackground#000000
tab.activeBorderTop#EB708C
tab.activeForeground#FFFFFF
tab.border#EB708C
tab.inactiveBackground#000000
tab.inactiveForeground#A6A6A6
terminal.background#000000
terminal.foreground#FFFFFF
terminalCursor.foreground#EB708C
textLink.activeForeground#F094A9
textLink.foreground#EB708C
titleBar.activeBackground#000000
titleBar.activeForeground#D0D0D0
titleBar.border#EB708C
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#A6A6A6
tree.indentGuidesStroke#3A3A3A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6CA800	italic
string, punctuation.definition.string	#FCCC96	—
constant.numeric, constant.language, constant.character	#5AC6BA	—
keyword, keyword.control, storage, storage.type	#EB708C	bold
entity.name.function, support.function	#FCF018	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#CCFCEA	—
variable, variable.parameter	#3C9CFC	—
entity.name.tag, meta.tag	#EB708C	bold
entity.other.attribute-name	#3C9CFC	—
keyword.operator, punctuation	#5AD2F6	—
meta.decorator, punctuation.decorator, storage.type.annotation, meta.annotation, support.type.attribute	#FCF018	—

VS Code preview

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

Backend Themes — NestJS High Contrast 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.activeBorder#AA1839
activityBar.background#FFFFFF
activityBar.border#AA1839
activityBar.foreground#000000
activityBar.inactiveForeground#595959
activityBarBadge.background#AA1839
activityBarBadge.foreground#FFFFFF
badge.background#AA1839
badge.foreground#FFFFFF
button.background#FFFFFF
button.border#AA1839
button.foreground#000000
button.hoverBackground#AA183944
contrastActiveBorder#000000
contrastBorder#AA1839
dropdown.background#FFFFFF
dropdown.border#AA1839
dropdown.foreground#000000
editor.background#FFFFFF
editor.findMatchBackground#AA183955
editor.findMatchBorder#000000
editor.findMatchHighlightBackground#AA183922
editor.foreground#000000
editor.selectionBackground#AA183955
editor.selectionHighlightBackground#AA183922
editor.selectionHighlightBorder#AA1839
editor.wordHighlightBackground#AA183922
editor.wordHighlightBorder#AA1839
editorBracketMatch.background#AA183922
editorBracketMatch.border#AA1839
editorCursor.foreground#AA1839
editorGroup.border#C8C8C8
editorGroupHeader.tabsBackground#FFFFFF
editorGroupHeader.tabsBorder#AA1839
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#AA1839
editorIndentGuide.activeBackground1#AA1839
editorIndentGuide.background1#C8C8C8
editorLineNumber.activeForeground#AA1839
editorLineNumber.foreground#595959
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.border#AA1839
editorSuggestWidget.highlightForeground#AA1839
editorSuggestWidget.selectedBackground#AA183933
editorWhitespace.foreground#C8C8C8
editorWidget.background#FFFFFF
editorWidget.border#AA1839
extensionButton.prominentBackground#FFFFFF
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#AA183944
focusBorder#000000
gitDecoration.modifiedResourceForeground#AA1839
input.background#FFFFFF
input.border#AA1839
input.foreground#000000
input.placeholderForeground#595959
inputOption.activeBorder#000000
list.activeSelectionBackground#AA183944
list.activeSelectionForeground#000000
list.focusOutline#000000
list.highlightForeground#AA1839
list.hoverBackground#AA183922
list.inactiveSelectionBackground#AA183922
minimap.findMatchHighlight#AA1839
panel.background#FFFFFF
panel.border#AA1839
panelTitle.activeBorder#AA1839
panelTitle.activeForeground#000000
panelTitle.inactiveForeground#595959
peekView.border#AA1839
progressBar.background#AA1839
scrollbarSlider.activeBackground#AA1839AA
scrollbarSlider.background#59595944
scrollbarSlider.hoverBackground#AA183966
sideBar.background#FFFFFF
sideBar.border#AA1839
sideBar.foreground#2B2B2B
sideBarSectionHeader.background#FFFFFF
sideBarSectionHeader.border#AA1839
sideBarSectionHeader.foreground#000000
sideBarTitle.foreground#2B2B2B
statusBar.background#FFFFFF
statusBar.border#AA1839
statusBar.debuggingBackground#AA1839
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#000000
statusBar.noFolderBackground#FFFFFF
statusBarItem.hoverBackground#AA183933
statusBarItem.remoteBackground#86132D
statusBarItem.remoteForeground#FFFFFF
tab.activeBackground#FFFFFF
tab.activeBorderTop#AA1839
tab.activeForeground#000000
tab.border#AA1839
tab.inactiveBackground#FFFFFF
tab.inactiveForeground#595959
terminal.background#FFFFFF
terminal.foreground#000000
terminalCursor.foreground#AA1839
textLink.activeForeground#86132D
textLink.foreground#AA1839
titleBar.activeBackground#FFFFFF
titleBar.activeForeground#2B2B2B
titleBar.border#AA1839
titleBar.inactiveBackground#FFFFFF
titleBar.inactiveForeground#595959
tree.indentGuidesStroke#C8C8C8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#006648	italic
string, punctuation.definition.string	#5418F6	—
constant.numeric, constant.language, constant.character	#1E6078	—
keyword, keyword.control, storage, storage.type	#AA1839	bold
entity.name.function, support.function	#3C3600	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#0C3060	—
variable, variable.parameter	#0C00C0	—
entity.name.tag, meta.tag	#AA1839	bold
entity.other.attribute-name	#0C00C0	—
keyword.operator, punctuation	#42062A	—
meta.decorator, punctuation.decorator, storage.type.annotation, meta.annotation, support.type.attribute	#3C3600	—

VS Code preview

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

Backend Themes — NestJS 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.activeBorder#E0244F
activityBar.background#F3F3F3
activityBar.border#E0E0E0
activityBar.foreground#1E1E1E
activityBar.inactiveForeground#6B6B6B
activityBarBadge.background#E0244F
activityBarBadge.foreground#FFFFFF
badge.background#E0244F
badge.foreground#FFFFFF
button.background#E0244F
button.foreground#FFFFFF
button.hoverBackground#BC1A3F
dropdown.background#F3F3F3
dropdown.foreground#1E1E1E
editor.background#FFFFFF
editor.findMatchBackground#E0244F55
editor.findMatchHighlightBackground#E0244F22
editor.foreground#1E1E1E
editor.selectionBackground#E0244F44
editor.selectionHighlightBackground#E0244F22
editor.wordHighlightBackground#E0244F22
editorBracketMatch.background#E0244F22
editorBracketMatch.border#E0244F
editorCursor.foreground#E0244F
editorGroup.border#E0E0E0
editorGroupHeader.tabsBackground#F3F3F3
editorGroupHeader.tabsBorder#E0E0E0
editorHoverWidget.background#F3F3F3
editorHoverWidget.border#E0E0E0
editorIndentGuide.activeBackground1#E0244F
editorIndentGuide.background1#E0E0E0
editorLineNumber.activeForeground#E0244F
editorLineNumber.foreground#6B6B6B
editorSuggestWidget.background#F3F3F3
editorSuggestWidget.border#E0E0E0
editorSuggestWidget.highlightForeground#E0244F
editorSuggestWidget.selectedBackground#E0244F33
editorWhitespace.foreground#E0E0E0
editorWidget.background#F3F3F3
editorWidget.border#E0E0E0
extensionButton.prominentBackground#E0244F
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#BC1A3F
focusBorder#E0244F
gitDecoration.modifiedResourceForeground#E0244F
input.background#F3F3F3
input.foreground#1E1E1E
input.placeholderForeground#6B6B6B
inputOption.activeBorder#E0244F
list.activeSelectionBackground#E0244F44
list.activeSelectionForeground#1E1E1E
list.focusOutline#E0244F
list.highlightForeground#E0244F
list.hoverBackground#F3F3F3
list.inactiveSelectionBackground#E0244F22
minimap.findMatchHighlight#E0244F
panel.background#FFFFFF
panel.border#E0E0E0
panelTitle.activeBorder#E0244F
panelTitle.activeForeground#1E1E1E
panelTitle.inactiveForeground#6B6B6B
peekView.border#E0244F
progressBar.background#E0244F
scrollbarSlider.activeBackground#E0244FAA
scrollbarSlider.background#6B6B6B44
scrollbarSlider.hoverBackground#E0244F66
sideBar.background#FFFFFF
sideBar.border#E0E0E0
sideBar.foreground#3A3A3A
sideBarSectionHeader.background#F3F3F3
sideBarSectionHeader.border#E0E0E0
sideBarSectionHeader.foreground#1E1E1E
sideBarTitle.foreground#3A3A3A
statusBar.background#E0244F
statusBar.border#E0E0E0
statusBar.debuggingBackground#BC1A3F
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#BC1A3F
statusBarItem.hoverBackground#E0244F33
statusBarItem.remoteBackground#BC1A3F
statusBarItem.remoteForeground#FFFFFF
tab.activeBackground#FFFFFF
tab.activeBorderTop#E0244F
tab.activeForeground#1E1E1E
tab.border#E0E0E0
tab.inactiveBackground#F3F3F3
tab.inactiveForeground#6B6B6B
terminal.background#FFFFFF
terminal.foreground#1E1E1E
terminalCursor.foreground#E0244F
textLink.activeForeground#BC1A3F
textLink.foreground#E0244F
titleBar.activeBackground#F3F3F3
titleBar.activeForeground#3A3A3A
titleBar.border#E0E0E0
titleBar.inactiveBackground#F3F3F3
titleBar.inactiveForeground#6B6B6B
tree.indentGuidesStroke#E0E0E0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#3C8460	italic
string, punctuation.definition.string	#4E18F0	—
constant.numeric, constant.language, constant.character	#367E84	—
keyword, keyword.control, storage, storage.type	#E0244F	—
entity.name.function, support.function	#784800	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#065A8A	—
variable, variable.parameter	#4E6CE4	—
entity.name.tag, meta.tag	#E0244F	—
entity.other.attribute-name	#4E6CE4	—
keyword.operator, punctuation	#24484E	—
meta.decorator, punctuation.decorator, storage.type.annotation, meta.annotation, support.type.attribute	#784800	—