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 — FastAPI 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#2D9A90
activityBar.background#171C1E
activityBar.border#2A3134
activityBar.foreground#D5D0DB
activityBar.inactiveForeground#8A9095
activityBarBadge.background#2D9A90
activityBarBadge.foreground#000000
badge.background#2D9A90
badge.foreground#000000
button.background#2D9A90
button.foreground#000000
button.hoverBackground#35B6AA
dropdown.background#171C1E
dropdown.foreground#D5D0DB
editor.background#1D2325
editor.findMatchBackground#2D9A9055
editor.findMatchHighlightBackground#2D9A9022
editor.foreground#D5D0DB
editor.selectionBackground#2D9A9044
editor.selectionHighlightBackground#2D9A9022
editor.wordHighlightBackground#2D9A9022
editorBracketMatch.background#2D9A9022
editorBracketMatch.border#2D9A90
editorCursor.foreground#2D9A90
editorGroup.border#2A3134
editorGroupHeader.tabsBackground#171C1E
editorGroupHeader.tabsBorder#2A3134
editorHoverWidget.background#171C1E
editorHoverWidget.border#2A3134
editorIndentGuide.activeBackground1#2D9A90
editorIndentGuide.background1#2A3134
editorLineNumber.activeForeground#2D9A90
editorLineNumber.foreground#8A9095
editorSuggestWidget.background#171C1E
editorSuggestWidget.border#2A3134
editorSuggestWidget.highlightForeground#2D9A90
editorSuggestWidget.selectedBackground#2D9A9033
editorWhitespace.foreground#2A3134
editorWidget.background#171C1E
editorWidget.border#2A3134
extensionButton.prominentBackground#2D9A90
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#35B6AA
focusBorder#2D9A90
gitDecoration.modifiedResourceForeground#2D9A90
input.background#171C1E
input.foreground#D5D0DB
input.placeholderForeground#8A9095
inputOption.activeBorder#2D9A90
list.activeSelectionBackground#2D9A9044
list.activeSelectionForeground#D5D0DB
list.focusOutline#2D9A90
list.highlightForeground#2D9A90
list.hoverBackground#171C1E
list.inactiveSelectionBackground#2D9A9022
minimap.findMatchHighlight#2D9A90
panel.background#1D2325
panel.border#2A3134
panelTitle.activeBorder#2D9A90
panelTitle.activeForeground#D5D0DB
panelTitle.inactiveForeground#8A9095
peekView.border#2D9A90
progressBar.background#2D9A90
scrollbarSlider.activeBackground#2D9A90AA
scrollbarSlider.background#8A909544
scrollbarSlider.hoverBackground#2D9A9066
sideBar.background#1D2325
sideBar.border#2A3134
sideBar.foreground#B4B8BE
sideBarSectionHeader.background#171C1E
sideBarSectionHeader.border#2A3134
sideBarSectionHeader.foreground#D5D0DB
sideBarTitle.foreground#B4B8BE
statusBar.background#2D9A90
statusBar.border#2A3134
statusBar.debuggingBackground#34B2A6
statusBar.debuggingForeground#000000
statusBar.foreground#000000
statusBar.noFolderBackground#34B2A6
statusBarItem.hoverBackground#2D9A9033
statusBarItem.remoteBackground#34B2A6
statusBarItem.remoteForeground#000000
tab.activeBackground#1D2325
tab.activeBorderTop#2D9A90
tab.activeForeground#D5D0DB
tab.border#2A3134
tab.inactiveBackground#171C1E
tab.inactiveForeground#8A9095
terminal.background#1D2325
terminal.foreground#D5D0DB
terminalCursor.foreground#2D9A90
textLink.activeForeground#34B2A6
textLink.foreground#2D9A90
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	#84A84E	italic
string, punctuation.definition.string	#C0A2C0	—
constant.numeric, constant.language, constant.character	#78A884	—
keyword, keyword.control, storage, storage.type	#2D9A90	—
entity.name.function, support.function	#E4E47E	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#A8EAFC	—
variable, variable.parameter	#5A9CF6	—
entity.name.tag, meta.tag	#2D9A90	—
entity.other.attribute-name	#5A9CF6	—
keyword.operator, punctuation	#CCD2BA	—
meta.decorator, punctuation.decorator, storage.type.annotation, meta.annotation, support.type.attribute	#E4E47E	—

VS Code preview

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

Backend Themes — FastAPI 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#21736B
activityBar.background#EFF4F6
activityBar.border#DCE3E6
activityBar.foreground#3A3543
activityBar.inactiveForeground#6E7378
activityBarBadge.background#21736B
activityBarBadge.foreground#FFFFFF
badge.background#21736B
badge.foreground#FFFFFF
button.background#21736B
button.foreground#FFFFFF
button.hoverBackground#195751
dropdown.background#EFF4F6
dropdown.foreground#3A3543
editor.background#F9FCFD
editor.findMatchBackground#21736B55
editor.findMatchHighlightBackground#21736B22
editor.foreground#3A3543
editor.selectionBackground#21736B44
editor.selectionHighlightBackground#21736B22
editor.wordHighlightBackground#21736B22
editorBracketMatch.background#21736B22
editorBracketMatch.border#21736B
editorCursor.foreground#21736B
editorGroup.border#DCE3E6
editorGroupHeader.tabsBackground#EFF4F6
editorGroupHeader.tabsBorder#DCE3E6
editorHoverWidget.background#EFF4F6
editorHoverWidget.border#DCE3E6
editorIndentGuide.activeBackground1#21736B
editorIndentGuide.background1#DCE3E6
editorLineNumber.activeForeground#21736B
editorLineNumber.foreground#6E7378
editorSuggestWidget.background#EFF4F6
editorSuggestWidget.border#DCE3E6
editorSuggestWidget.highlightForeground#21736B
editorSuggestWidget.selectedBackground#21736B33
editorWhitespace.foreground#DCE3E6
editorWidget.background#EFF4F6
editorWidget.border#DCE3E6
extensionButton.prominentBackground#21736B
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#195751
focusBorder#21736B
gitDecoration.modifiedResourceForeground#21736B
input.background#EFF4F6
input.foreground#3A3543
input.placeholderForeground#6E7378
inputOption.activeBorder#21736B
list.activeSelectionBackground#21736B44
list.activeSelectionForeground#3A3543
list.focusOutline#21736B
list.highlightForeground#21736B
list.hoverBackground#EFF4F6
list.inactiveSelectionBackground#21736B22
minimap.findMatchHighlight#21736B
panel.background#F9FCFD
panel.border#DCE3E6
panelTitle.activeBorder#21736B
panelTitle.activeForeground#3A3543
panelTitle.inactiveForeground#6E7378
peekView.border#21736B
progressBar.background#21736B
scrollbarSlider.activeBackground#21736BAA
scrollbarSlider.background#6E737844
scrollbarSlider.hoverBackground#21736B66
sideBar.background#F9FCFD
sideBar.border#DCE3E6
sideBar.foreground#4A4F54
sideBarSectionHeader.background#EFF4F6
sideBarSectionHeader.border#DCE3E6
sideBarSectionHeader.foreground#3A3543
sideBarTitle.foreground#4A4F54
statusBar.background#21736B
statusBar.border#DCE3E6
statusBar.debuggingBackground#195751
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#195751
statusBarItem.hoverBackground#21736B33
statusBarItem.remoteBackground#195751
statusBarItem.remoteForeground#FFFFFF
tab.activeBackground#F9FCFD
tab.activeBorderTop#21736B
tab.activeForeground#3A3543
tab.border#DCE3E6
tab.inactiveBackground#EFF4F6
tab.inactiveForeground#6E7378
terminal.background#F9FCFD
terminal.foreground#3A3543
terminalCursor.foreground#21736B
textLink.activeForeground#195751
textLink.foreground#21736B
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	#008460	italic
string, punctuation.definition.string	#906C12	—
constant.numeric, constant.language, constant.character	#2A7E90	—
keyword, keyword.control, storage, storage.type	#21736B	—
entity.name.function, support.function	#726036	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#06608A	—
variable, variable.parameter	#2A72C6	—
entity.name.tag, meta.tag	#21736B	—
entity.other.attribute-name	#2A72C6	—
keyword.operator, punctuation	#5A4230	—
meta.decorator, punctuation.decorator, storage.type.annotation, meta.annotation, support.type.attribute	#726036	—

VS Code preview

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

Backend Themes — Laravel 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#FF3024
activityBar.background#181818
activityBar.border#2E2E2E
activityBar.foreground#D4D4D4
activityBar.inactiveForeground#8A8A8A
activityBarBadge.background#FF3024
activityBarBadge.foreground#000000
badge.background#FF3024
badge.foreground#000000
button.background#FF3024
button.foreground#000000
button.hoverBackground#FF6F66
dropdown.background#181818
dropdown.foreground#D4D4D4
editor.background#1E1E1E
editor.findMatchBackground#FF302455
editor.findMatchHighlightBackground#FF302422
editor.foreground#D4D4D4
editor.selectionBackground#FF302444
editor.selectionHighlightBackground#FF302422
editor.wordHighlightBackground#FF302422
editorBracketMatch.background#FF302422
editorBracketMatch.border#FF3024
editorCursor.foreground#FF3024
editorGroup.border#2E2E2E
editorGroupHeader.tabsBackground#181818
editorGroupHeader.tabsBorder#2E2E2E
editorHoverWidget.background#181818
editorHoverWidget.border#2E2E2E
editorIndentGuide.activeBackground1#FF3024
editorIndentGuide.background1#2E2E2E
editorLineNumber.activeForeground#FF3024
editorLineNumber.foreground#8A8A8A
editorSuggestWidget.background#181818
editorSuggestWidget.border#2E2E2E
editorSuggestWidget.highlightForeground#FF3024
editorSuggestWidget.selectedBackground#FF302433
editorWhitespace.foreground#2E2E2E
editorWidget.background#181818
editorWidget.border#2E2E2E
extensionButton.prominentBackground#FF3024
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#FF6F66
focusBorder#FF3024
gitDecoration.modifiedResourceForeground#FF3024
input.background#181818
input.foreground#D4D4D4
input.placeholderForeground#8A8A8A
inputOption.activeBorder#FF3024
list.activeSelectionBackground#FF302444
list.activeSelectionForeground#D4D4D4
list.focusOutline#FF3024
list.highlightForeground#FF3024
list.hoverBackground#181818
list.inactiveSelectionBackground#FF302422
minimap.findMatchHighlight#FF3024
panel.background#1E1E1E
panel.border#2E2E2E
panelTitle.activeBorder#FF3024
panelTitle.activeForeground#D4D4D4
panelTitle.inactiveForeground#8A8A8A
peekView.border#FF3024
progressBar.background#FF3024
scrollbarSlider.activeBackground#FF3024AA
scrollbarSlider.background#8A8A8A44
scrollbarSlider.hoverBackground#FF302466
sideBar.background#1E1E1E
sideBar.border#2E2E2E
sideBar.foreground#B0B0B0
sideBarSectionHeader.background#181818
sideBarSectionHeader.border#2E2E2E
sideBarSectionHeader.foreground#D4D4D4
sideBarTitle.foreground#B0B0B0
statusBar.background#FF3024
statusBar.border#2E2E2E
statusBar.debuggingBackground#FF6F66
statusBar.debuggingForeground#000000
statusBar.foreground#000000
statusBar.noFolderBackground#FF6F66
statusBarItem.hoverBackground#FF302433
statusBarItem.remoteBackground#FF6F66
statusBarItem.remoteForeground#000000
tab.activeBackground#1E1E1E
tab.activeBorderTop#FF3024
tab.activeForeground#D4D4D4
tab.border#2E2E2E
tab.inactiveBackground#181818
tab.inactiveForeground#8A8A8A
terminal.background#1E1E1E
terminal.foreground#D4D4D4
terminalCursor.foreground#FF3024
textLink.activeForeground#FF6F66
textLink.foreground#FF3024
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	#069C60	italic
string, punctuation.definition.string	#AE66EA	—
constant.numeric, constant.language, constant.character	#C6DEA8	—
keyword, keyword.control, storage, storage.type	#FF3024	—
entity.name.function, support.function	#FCEA36	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#96F6EA	—
variable, variable.parameter	#84CCFC	—
entity.name.tag, meta.tag	#FF3024	—
entity.other.attribute-name	#84CCFC	—
keyword.operator, punctuation	#5A908A	—
meta.decorator, punctuation.decorator, storage.type.annotation, meta.annotation, support.type.attribute	#FCEA36	—

VS Code preview

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

Backend Themes — Laravel 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#FF6157
activityBar.background#000000
activityBar.border#FF6157
activityBar.foreground#FFFFFF
activityBar.inactiveForeground#A6A6A6
activityBarBadge.background#FF6157
activityBarBadge.foreground#000000
badge.background#FF6157
badge.foreground#000000
button.background#000000
button.border#FF6157
button.foreground#FFFFFF
button.hoverBackground#FF615744
contrastActiveBorder#FFFFFF
contrastBorder#FF6157
dropdown.background#000000
dropdown.border#FF6157
dropdown.foreground#FFFFFF
editor.background#000000
editor.findMatchBackground#FF615755
editor.findMatchBorder#FFFFFF
editor.findMatchHighlightBackground#FF615722
editor.foreground#FFFFFF
editor.selectionBackground#FF615755
editor.selectionHighlightBackground#FF615722
editor.selectionHighlightBorder#FF6157
editor.wordHighlightBackground#FF615722
editor.wordHighlightBorder#FF6157
editorBracketMatch.background#FF615722
editorBracketMatch.border#FF6157
editorCursor.foreground#FF6157
editorGroup.border#3A3A3A
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#FF6157
editorHoverWidget.background#000000
editorHoverWidget.border#FF6157
editorIndentGuide.activeBackground1#FF6157
editorIndentGuide.background1#3A3A3A
editorLineNumber.activeForeground#FF6157
editorLineNumber.foreground#A6A6A6
editorSuggestWidget.background#000000
editorSuggestWidget.border#FF6157
editorSuggestWidget.highlightForeground#FF6157
editorSuggestWidget.selectedBackground#FF615733
editorWhitespace.foreground#3A3A3A
editorWidget.background#000000
editorWidget.border#FF6157
extensionButton.prominentBackground#000000
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#FF615744
focusBorder#FFFFFF
gitDecoration.modifiedResourceForeground#FF6157
input.background#000000
input.border#FF6157
input.foreground#FFFFFF
input.placeholderForeground#A6A6A6
inputOption.activeBorder#FFFFFF
list.activeSelectionBackground#FF615744
list.activeSelectionForeground#FFFFFF
list.focusOutline#FFFFFF
list.highlightForeground#FF6157
list.hoverBackground#FF615722
list.inactiveSelectionBackground#FF615722
minimap.findMatchHighlight#FF6157
panel.background#000000
panel.border#FF6157
panelTitle.activeBorder#FF6157
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#A6A6A6
peekView.border#FF6157
progressBar.background#FF6157
scrollbarSlider.activeBackground#FF6157AA
scrollbarSlider.background#A6A6A644
scrollbarSlider.hoverBackground#FF615766
sideBar.background#000000
sideBar.border#FF6157
sideBar.foreground#D0D0D0
sideBarSectionHeader.background#000000
sideBarSectionHeader.border#FF6157
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#D0D0D0
statusBar.background#000000
statusBar.border#FF6157
statusBar.debuggingBackground#FF6157
statusBar.debuggingForeground#000000
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#000000
statusBarItem.hoverBackground#FF615733
statusBarItem.remoteBackground#FF918A
statusBarItem.remoteForeground#000000
tab.activeBackground#000000
tab.activeBorderTop#FF6157
tab.activeForeground#FFFFFF
tab.border#FF6157
tab.inactiveBackground#000000
tab.inactiveForeground#A6A6A6
terminal.background#000000
terminal.foreground#FFFFFF
terminalCursor.foreground#FF6157
textLink.activeForeground#FF918A
textLink.foreground#FF6157
titleBar.activeBackground#000000
titleBar.activeForeground#D0D0D0
titleBar.border#FF6157
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	#84A896	italic
string, punctuation.definition.string	#FCEACC	—
constant.numeric, constant.language, constant.character	#12AEB4	—
keyword, keyword.control, storage, storage.type	#FF6157	bold
entity.name.function, support.function	#F0FC0C	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#96D2FC	—
variable, variable.parameter	#0C9CFC	—
entity.name.tag, meta.tag	#FF6157	bold
entity.other.attribute-name	#0C9CFC	—
keyword.operator, punctuation	#D8FCFC	—
meta.decorator, punctuation.decorator, storage.type.annotation, meta.annotation, support.type.attribute	#F0FC0C	—