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 — Spring Pastel 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#6CB13E
activityBar.background#171C1E
activityBar.border#2A3134
activityBar.foreground#D5D0DB
activityBar.inactiveForeground#8A9095
activityBarBadge.background#6CB13E
activityBarBadge.foreground#000000
badge.background#6CB13E
badge.foreground#000000
button.background#6CB13E
button.foreground#000000
button.hoverBackground#92CB6C
dropdown.background#171C1E
dropdown.foreground#D5D0DB
editor.background#1D2325
editor.findMatchBackground#6CB13E55
editor.findMatchHighlightBackground#6CB13E22
editor.foreground#D5D0DB
editor.selectionBackground#6CB13E44
editor.selectionHighlightBackground#6CB13E22
editor.wordHighlightBackground#6CB13E22
editorBracketMatch.background#6CB13E22
editorBracketMatch.border#6CB13E
editorCursor.foreground#6CB13E
editorGroup.border#2A3134
editorGroupHeader.tabsBackground#171C1E
editorGroupHeader.tabsBorder#2A3134
editorHoverWidget.background#171C1E
editorHoverWidget.border#2A3134
editorIndentGuide.activeBackground1#6CB13E
editorIndentGuide.background1#2A3134
editorLineNumber.activeForeground#6CB13E
editorLineNumber.foreground#8A9095
editorSuggestWidget.background#171C1E
editorSuggestWidget.border#2A3134
editorSuggestWidget.highlightForeground#6CB13E
editorSuggestWidget.selectedBackground#6CB13E33
editorWhitespace.foreground#2A3134
editorWidget.background#171C1E
editorWidget.border#2A3134
extensionButton.prominentBackground#6CB13E
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#92CB6C
focusBorder#6CB13E
gitDecoration.modifiedResourceForeground#6CB13E
input.background#171C1E
input.foreground#D5D0DB
input.placeholderForeground#8A9095
inputOption.activeBorder#6CB13E
list.activeSelectionBackground#6CB13E44
list.activeSelectionForeground#D5D0DB
list.focusOutline#6CB13E
list.highlightForeground#6CB13E
list.hoverBackground#171C1E
list.inactiveSelectionBackground#6CB13E22
minimap.findMatchHighlight#6CB13E
panel.background#1D2325
panel.border#2A3134
panelTitle.activeBorder#6CB13E
panelTitle.activeForeground#D5D0DB
panelTitle.inactiveForeground#8A9095
peekView.border#6CB13E
progressBar.background#6CB13E
scrollbarSlider.activeBackground#6CB13EAA
scrollbarSlider.background#8A909544
scrollbarSlider.hoverBackground#6CB13E66
sideBar.background#1D2325
sideBar.border#2A3134
sideBar.foreground#B4B8BE
sideBarSectionHeader.background#171C1E
sideBarSectionHeader.border#2A3134
sideBarSectionHeader.foreground#D5D0DB
sideBarTitle.foreground#B4B8BE
statusBar.background#6CB13E
statusBar.border#2A3134
statusBar.debuggingBackground#84C559
statusBar.debuggingForeground#000000
statusBar.foreground#000000
statusBar.noFolderBackground#84C559
statusBarItem.hoverBackground#6CB13E33
statusBarItem.remoteBackground#84C559
statusBarItem.remoteForeground#000000
tab.activeBackground#1D2325
tab.activeBorderTop#6CB13E
tab.activeForeground#D5D0DB
tab.border#2A3134
tab.inactiveBackground#171C1E
tab.inactiveForeground#8A9095
terminal.background#1D2325
terminal.foreground#D5D0DB
terminalCursor.foreground#6CB13E
textLink.activeForeground#84C559
textLink.foreground#6CB13E
titleBar.activeBackground#171C1E
titleBar.activeForeground#B4B8BE
titleBar.border#2A3134
titleBar.inactiveBackground#171C1E
titleBar.inactiveForeground#8A9095
tree.indentGuidesStroke#2A3134

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8A9C78	italic
string, punctuation.definition.string	#EAC0AE	—
constant.numeric, constant.language, constant.character	#7EEAE4	—
keyword, keyword.control, storage, storage.type	#6CB13E	—
entity.name.function, support.function	#EAE484	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#4EC0D8	—
variable, variable.parameter	#2A9CF0	—
entity.name.tag, meta.tag	#6CB13E	—
entity.other.attribute-name	#2A9CF0	—
keyword.operator, punctuation	#9C849C	—
meta.decorator, punctuation.decorator, storage.type.annotation, meta.annotation, support.type.attribute	#EAE484	—

VS Code preview

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

Backend Themes — Spring Pastel 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#4E802D
activityBar.background#EFF4F6
activityBar.border#DCE3E6
activityBar.foreground#3A3543
activityBar.inactiveForeground#6E7378
activityBarBadge.background#4E802D
activityBarBadge.foreground#FFFFFF
badge.background#4E802D
badge.foreground#FFFFFF
button.background#4E802D
button.foreground#FFFFFF
button.hoverBackground#3E6624
dropdown.background#EFF4F6
dropdown.foreground#3A3543
editor.background#F9FCFD
editor.findMatchBackground#4E802D55
editor.findMatchHighlightBackground#4E802D22
editor.foreground#3A3543
editor.selectionBackground#4E802D44
editor.selectionHighlightBackground#4E802D22
editor.wordHighlightBackground#4E802D22
editorBracketMatch.background#4E802D22
editorBracketMatch.border#4E802D
editorCursor.foreground#4E802D
editorGroup.border#DCE3E6
editorGroupHeader.tabsBackground#EFF4F6
editorGroupHeader.tabsBorder#DCE3E6
editorHoverWidget.background#EFF4F6
editorHoverWidget.border#DCE3E6
editorIndentGuide.activeBackground1#4E802D
editorIndentGuide.background1#DCE3E6
editorLineNumber.activeForeground#4E802D
editorLineNumber.foreground#6E7378
editorSuggestWidget.background#EFF4F6
editorSuggestWidget.border#DCE3E6
editorSuggestWidget.highlightForeground#4E802D
editorSuggestWidget.selectedBackground#4E802D33
editorWhitespace.foreground#DCE3E6
editorWidget.background#EFF4F6
editorWidget.border#DCE3E6
extensionButton.prominentBackground#4E802D
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#3E6624
focusBorder#4E802D
gitDecoration.modifiedResourceForeground#4E802D
input.background#EFF4F6
input.foreground#3A3543
input.placeholderForeground#6E7378
inputOption.activeBorder#4E802D
list.activeSelectionBackground#4E802D44
list.activeSelectionForeground#3A3543
list.focusOutline#4E802D
list.highlightForeground#4E802D
list.hoverBackground#EFF4F6
list.inactiveSelectionBackground#4E802D22
minimap.findMatchHighlight#4E802D
panel.background#F9FCFD
panel.border#DCE3E6
panelTitle.activeBorder#4E802D
panelTitle.activeForeground#3A3543
panelTitle.inactiveForeground#6E7378
peekView.border#4E802D
progressBar.background#4E802D
scrollbarSlider.activeBackground#4E802DAA
scrollbarSlider.background#6E737844
scrollbarSlider.hoverBackground#4E802D66
sideBar.background#F9FCFD
sideBar.border#DCE3E6
sideBar.foreground#4A4F54
sideBarSectionHeader.background#EFF4F6
sideBarSectionHeader.border#DCE3E6
sideBarSectionHeader.foreground#3A3543
sideBarTitle.foreground#4A4F54
statusBar.background#4E802D
statusBar.border#DCE3E6
statusBar.debuggingBackground#406A25
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#406A25
statusBarItem.hoverBackground#4E802D33
statusBarItem.remoteBackground#406A25
statusBarItem.remoteForeground#FFFFFF
tab.activeBackground#F9FCFD
tab.activeBorderTop#4E802D
tab.activeForeground#3A3543
tab.border#DCE3E6
tab.inactiveBackground#EFF4F6
tab.inactiveForeground#6E7378
terminal.background#F9FCFD
terminal.foreground#3A3543
terminalCursor.foreground#4E802D
textLink.activeForeground#406A25
textLink.foreground#4E802D
titleBar.activeBackground#EFF4F6
titleBar.activeForeground#4A4F54
titleBar.border#DCE3E6
titleBar.inactiveBackground#EFF4F6
titleBar.inactiveForeground#6E7378
tree.indentGuidesStroke#DCE3E6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#487E60	italic
string, punctuation.definition.string	#786C9C	—
constant.numeric, constant.language, constant.character	#486054	—
keyword, keyword.control, storage, storage.type	#4E802D	—
entity.name.function, support.function	#665A36	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#487878	—
variable, variable.parameter	#4254A8	—
entity.name.tag, meta.tag	#4E802D	—
entity.other.attribute-name	#4254A8	—
keyword.operator, punctuation	#1E4E66	—
meta.decorator, punctuation.decorator, storage.type.annotation, meta.annotation, support.type.attribute	#665A36	—

VS Code preview

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

Backend Themes — Symfony 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#79879B
activityBar.background#181818
activityBar.border#2E2E2E
activityBar.foreground#D4D4D4
activityBar.inactiveForeground#8A8A8A
activityBarBadge.background#79879B
activityBarBadge.foreground#000000
badge.background#79879B
badge.foreground#000000
button.background#79879B
button.foreground#000000
button.hoverBackground#96A1B1
dropdown.background#181818
dropdown.foreground#D4D4D4
editor.background#1E1E1E
editor.findMatchBackground#79879B55
editor.findMatchHighlightBackground#79879B22
editor.foreground#D4D4D4
editor.selectionBackground#79879B44
editor.selectionHighlightBackground#79879B22
editor.wordHighlightBackground#79879B22
editorBracketMatch.background#79879B22
editorBracketMatch.border#79879B
editorCursor.foreground#79879B
editorGroup.border#2E2E2E
editorGroupHeader.tabsBackground#181818
editorGroupHeader.tabsBorder#2E2E2E
editorHoverWidget.background#181818
editorHoverWidget.border#2E2E2E
editorIndentGuide.activeBackground1#79879B
editorIndentGuide.background1#2E2E2E
editorLineNumber.activeForeground#79879B
editorLineNumber.foreground#8A8A8A
editorSuggestWidget.background#181818
editorSuggestWidget.border#2E2E2E
editorSuggestWidget.highlightForeground#79879B
editorSuggestWidget.selectedBackground#79879B33
editorWhitespace.foreground#2E2E2E
editorWidget.background#181818
editorWidget.border#2E2E2E
extensionButton.prominentBackground#79879B
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#96A1B1
focusBorder#79879B
gitDecoration.modifiedResourceForeground#79879B
input.background#181818
input.foreground#D4D4D4
input.placeholderForeground#8A8A8A
inputOption.activeBorder#79879B
list.activeSelectionBackground#79879B44
list.activeSelectionForeground#D4D4D4
list.focusOutline#79879B
list.highlightForeground#79879B
list.hoverBackground#181818
list.inactiveSelectionBackground#79879B22
minimap.findMatchHighlight#79879B
panel.background#1E1E1E
panel.border#2E2E2E
panelTitle.activeBorder#79879B
panelTitle.activeForeground#D4D4D4
panelTitle.inactiveForeground#8A8A8A
peekView.border#79879B
progressBar.background#79879B
scrollbarSlider.activeBackground#79879BAA
scrollbarSlider.background#8A8A8A44
scrollbarSlider.hoverBackground#79879B66
sideBar.background#1E1E1E
sideBar.border#2E2E2E
sideBar.foreground#B0B0B0
sideBarSectionHeader.background#181818
sideBarSectionHeader.border#2E2E2E
sideBarSectionHeader.foreground#D4D4D4
sideBarTitle.foreground#B0B0B0
statusBar.background#79879B
statusBar.border#2E2E2E
statusBar.debuggingBackground#939EAE
statusBar.debuggingForeground#000000
statusBar.foreground#000000
statusBar.noFolderBackground#939EAE
statusBarItem.hoverBackground#79879B33
statusBarItem.remoteBackground#939EAE
statusBarItem.remoteForeground#000000
tab.activeBackground#1E1E1E
tab.activeBorderTop#79879B
tab.activeForeground#D4D4D4
tab.border#2E2E2E
tab.inactiveBackground#181818
tab.inactiveForeground#8A8A8A
terminal.background#1E1E1E
terminal.foreground#D4D4D4
terminalCursor.foreground#79879B
textLink.activeForeground#939EAE
textLink.foreground#79879B
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	#5A9078	italic
string, punctuation.definition.string	#F0B424	—
constant.numeric, constant.language, constant.character	#42F6A2	—
keyword, keyword.control, storage, storage.type	#79879B	—
entity.name.function, support.function	#9C8406	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#A2F0E4	—
variable, variable.parameter	#A266F6	—
entity.name.tag, meta.tag	#79879B	—
entity.other.attribute-name	#A266F6	—
keyword.operator, punctuation	#66CCFC	—
meta.decorator, punctuation.decorator, storage.type.annotation, meta.annotation, support.type.attribute	#9C8406	—

VS Code preview

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

Backend Themes — Symfony 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#8A97A8
activityBar.background#000000
activityBar.border#8A97A8
activityBar.foreground#FFFFFF
activityBar.inactiveForeground#A6A6A6
activityBarBadge.background#8A97A8
activityBarBadge.foreground#000000
badge.background#8A97A8
badge.foreground#000000
button.background#000000
button.border#8A97A8
button.foreground#FFFFFF
button.hoverBackground#8A97A844
contrastActiveBorder#FFFFFF
contrastBorder#8A97A8
dropdown.background#000000
dropdown.border#8A97A8
dropdown.foreground#FFFFFF
editor.background#000000
editor.findMatchBackground#8A97A855
editor.findMatchBorder#FFFFFF
editor.findMatchHighlightBackground#8A97A822
editor.foreground#FFFFFF
editor.selectionBackground#8A97A855
editor.selectionHighlightBackground#8A97A822
editor.selectionHighlightBorder#8A97A8
editor.wordHighlightBackground#8A97A822
editor.wordHighlightBorder#8A97A8
editorBracketMatch.background#8A97A822
editorBracketMatch.border#8A97A8
editorCursor.foreground#8A97A8
editorGroup.border#3A3A3A
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#8A97A8
editorHoverWidget.background#000000
editorHoverWidget.border#8A97A8
editorIndentGuide.activeBackground1#8A97A8
editorIndentGuide.background1#3A3A3A
editorLineNumber.activeForeground#8A97A8
editorLineNumber.foreground#A6A6A6
editorSuggestWidget.background#000000
editorSuggestWidget.border#8A97A8
editorSuggestWidget.highlightForeground#8A97A8
editorSuggestWidget.selectedBackground#8A97A833
editorWhitespace.foreground#3A3A3A
editorWidget.background#000000
editorWidget.border#8A97A8
extensionButton.prominentBackground#000000
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#8A97A844
focusBorder#FFFFFF
gitDecoration.modifiedResourceForeground#8A97A8
input.background#000000
input.border#8A97A8
input.foreground#FFFFFF
input.placeholderForeground#A6A6A6
inputOption.activeBorder#FFFFFF
list.activeSelectionBackground#8A97A844
list.activeSelectionForeground#FFFFFF
list.focusOutline#FFFFFF
list.highlightForeground#8A97A8
list.hoverBackground#8A97A822
list.inactiveSelectionBackground#8A97A822
minimap.findMatchHighlight#8A97A8
panel.background#000000
panel.border#8A97A8
panelTitle.activeBorder#8A97A8
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#A6A6A6
peekView.border#8A97A8
progressBar.background#8A97A8
scrollbarSlider.activeBackground#8A97A8AA
scrollbarSlider.background#A6A6A644
scrollbarSlider.hoverBackground#8A97A866
sideBar.background#000000
sideBar.border#8A97A8
sideBar.foreground#D0D0D0
sideBarSectionHeader.background#000000
sideBarSectionHeader.border#8A97A8
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#D0D0D0
statusBar.background#000000
statusBar.border#8A97A8
statusBar.debuggingBackground#8A97A8
statusBar.debuggingForeground#000000
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#000000
statusBarItem.hoverBackground#8A97A833
statusBarItem.remoteBackground#A7B1BE
statusBarItem.remoteForeground#000000
tab.activeBackground#000000
tab.activeBorderTop#8A97A8
tab.activeForeground#FFFFFF
tab.border#8A97A8
tab.inactiveBackground#000000
tab.inactiveForeground#A6A6A6
terminal.background#000000
terminal.foreground#FFFFFF
terminalCursor.foreground#8A97A8
textLink.activeForeground#A7B1BE
textLink.foreground#8A97A8
titleBar.activeBackground#000000
titleBar.activeForeground#D0D0D0
titleBar.border#8A97A8
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	#72AE00	italic
string, punctuation.definition.string	#BA967E	—
constant.numeric, constant.language, constant.character	#D2F6AE	—
keyword, keyword.control, storage, storage.type	#8A97A8	bold
entity.name.function, support.function	#F6FC06	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#96E4FC	—
variable, variable.parameter	#1E9CF6	—
entity.name.tag, meta.tag	#8A97A8	bold
entity.other.attribute-name	#1E9CF6	—
keyword.operator, punctuation	#DEEADE	—
meta.decorator, punctuation.decorator, storage.type.annotation, meta.annotation, support.type.attribute	#F6FC06	—