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 — ASP.NET Core 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#917DD9
activityBar.background#171C1E
activityBar.border#2A3134
activityBar.foreground#D5D0DB
activityBar.inactiveForeground#8A9095
activityBarBadge.background#917DD9
activityBarBadge.foreground#000000
badge.background#917DD9
badge.foreground#000000
button.background#917DD9
button.foreground#000000
button.hoverBackground#A998E1
dropdown.background#171C1E
dropdown.foreground#D5D0DB
editor.background#1D2325
editor.findMatchBackground#917DD955
editor.findMatchHighlightBackground#917DD922
editor.foreground#D5D0DB
editor.selectionBackground#917DD944
editor.selectionHighlightBackground#917DD922
editor.wordHighlightBackground#917DD922
editorBracketMatch.background#917DD922
editorBracketMatch.border#917DD9
editorCursor.foreground#917DD9
editorGroup.border#2A3134
editorGroupHeader.tabsBackground#171C1E
editorGroupHeader.tabsBorder#2A3134
editorHoverWidget.background#171C1E
editorHoverWidget.border#2A3134
editorIndentGuide.activeBackground1#917DD9
editorIndentGuide.background1#2A3134
editorLineNumber.activeForeground#917DD9
editorLineNumber.foreground#8A9095
editorSuggestWidget.background#171C1E
editorSuggestWidget.border#2A3134
editorSuggestWidget.highlightForeground#917DD9
editorSuggestWidget.selectedBackground#917DD933
editorWhitespace.foreground#2A3134
editorWidget.background#171C1E
editorWidget.border#2A3134
extensionButton.prominentBackground#917DD9
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#A998E1
focusBorder#917DD9
gitDecoration.modifiedResourceForeground#917DD9
input.background#171C1E
input.foreground#D5D0DB
input.placeholderForeground#8A9095
inputOption.activeBorder#917DD9
list.activeSelectionBackground#917DD944
list.activeSelectionForeground#D5D0DB
list.focusOutline#917DD9
list.highlightForeground#917DD9
list.hoverBackground#171C1E
list.inactiveSelectionBackground#917DD922
minimap.findMatchHighlight#917DD9
panel.background#1D2325
panel.border#2A3134
panelTitle.activeBorder#917DD9
panelTitle.activeForeground#D5D0DB
panelTitle.inactiveForeground#8A9095
peekView.border#917DD9
progressBar.background#917DD9
scrollbarSlider.activeBackground#917DD9AA
scrollbarSlider.background#8A909544
scrollbarSlider.hoverBackground#917DD966
sideBar.background#1D2325
sideBar.border#2A3134
sideBar.foreground#B4B8BE
sideBarSectionHeader.background#171C1E
sideBarSectionHeader.border#2A3134
sideBarSectionHeader.foreground#D5D0DB
sideBarTitle.foreground#B4B8BE
statusBar.background#917DD9
statusBar.border#2A3134
statusBar.debuggingBackground#A998E1
statusBar.debuggingForeground#000000
statusBar.foreground#000000
statusBar.noFolderBackground#A998E1
statusBarItem.hoverBackground#917DD933
statusBarItem.remoteBackground#A998E1
statusBarItem.remoteForeground#000000
tab.activeBackground#1D2325
tab.activeBorderTop#917DD9
tab.activeForeground#D5D0DB
tab.border#2A3134
tab.inactiveBackground#171C1E
tab.inactiveForeground#8A9095
terminal.background#1D2325
terminal.foreground#D5D0DB
terminalCursor.foreground#917DD9
textLink.activeForeground#A998E1
textLink.foreground#917DD9
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	#9CF0C6	italic
string, punctuation.definition.string	#C68A42	—
constant.numeric, constant.language, constant.character	#B4E4F0	—
keyword, keyword.control, storage, storage.type	#917DD9	—
entity.name.function, support.function	#EAE47E	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#7E9CA8	—
variable, variable.parameter	#8AC0FC	—
entity.name.tag, meta.tag	#917DD9	—
entity.other.attribute-name	#8AC0FC	—
keyword.operator, punctuation	#849078	—
meta.decorator, punctuation.decorator, storage.type.annotation, meta.annotation, support.type.attribute	#EAE47E	—

VS Code preview

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

Backend Themes — ASP.NET Core 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#5939C6
activityBar.background#EFF4F6
activityBar.border#DCE3E6
activityBar.foreground#3A3543
activityBar.inactiveForeground#6E7378
activityBarBadge.background#5939C6
activityBarBadge.foreground#FFFFFF
badge.background#5939C6
badge.foreground#FFFFFF
button.background#5939C6
button.foreground#FFFFFF
button.hoverBackground#442B96
dropdown.background#EFF4F6
dropdown.foreground#3A3543
editor.background#F9FCFD
editor.findMatchBackground#5939C655
editor.findMatchHighlightBackground#5939C622
editor.foreground#3A3543
editor.selectionBackground#5939C644
editor.selectionHighlightBackground#5939C622
editor.wordHighlightBackground#5939C622
editorBracketMatch.background#5939C622
editorBracketMatch.border#5939C6
editorCursor.foreground#5939C6
editorGroup.border#DCE3E6
editorGroupHeader.tabsBackground#EFF4F6
editorGroupHeader.tabsBorder#DCE3E6
editorHoverWidget.background#EFF4F6
editorHoverWidget.border#DCE3E6
editorIndentGuide.activeBackground1#5939C6
editorIndentGuide.background1#DCE3E6
editorLineNumber.activeForeground#5939C6
editorLineNumber.foreground#6E7378
editorSuggestWidget.background#EFF4F6
editorSuggestWidget.border#DCE3E6
editorSuggestWidget.highlightForeground#5939C6
editorSuggestWidget.selectedBackground#5939C633
editorWhitespace.foreground#DCE3E6
editorWidget.background#EFF4F6
editorWidget.border#DCE3E6
extensionButton.prominentBackground#5939C6
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#442B96
focusBorder#5939C6
gitDecoration.modifiedResourceForeground#5939C6
input.background#EFF4F6
input.foreground#3A3543
input.placeholderForeground#6E7378
inputOption.activeBorder#5939C6
list.activeSelectionBackground#5939C644
list.activeSelectionForeground#3A3543
list.focusOutline#5939C6
list.highlightForeground#5939C6
list.hoverBackground#EFF4F6
list.inactiveSelectionBackground#5939C622
minimap.findMatchHighlight#5939C6
panel.background#F9FCFD
panel.border#DCE3E6
panelTitle.activeBorder#5939C6
panelTitle.activeForeground#3A3543
panelTitle.inactiveForeground#6E7378
peekView.border#5939C6
progressBar.background#5939C6
scrollbarSlider.activeBackground#5939C6AA
scrollbarSlider.background#6E737844
scrollbarSlider.hoverBackground#5939C666
sideBar.background#F9FCFD
sideBar.border#DCE3E6
sideBar.foreground#4A4F54
sideBarSectionHeader.background#EFF4F6
sideBarSectionHeader.border#DCE3E6
sideBarSectionHeader.foreground#3A3543
sideBarTitle.foreground#4A4F54
statusBar.background#5939C6
statusBar.border#DCE3E6
statusBar.debuggingBackground#5436BA
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#5436BA
statusBarItem.hoverBackground#5939C633
statusBarItem.remoteBackground#5436BA
statusBarItem.remoteForeground#FFFFFF
tab.activeBackground#F9FCFD
tab.activeBorderTop#5939C6
tab.activeForeground#3A3543
tab.border#DCE3E6
tab.inactiveBackground#EFF4F6
tab.inactiveForeground#6E7378
terminal.background#F9FCFD
terminal.foreground#3A3543
terminalCursor.foreground#5939C6
textLink.activeForeground#5436BA
textLink.foreground#5939C6
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	#6C7860	italic
string, punctuation.definition.string	#906C12	—
constant.numeric, constant.language, constant.character	#306078	—
keyword, keyword.control, storage, storage.type	#5939C6	—
entity.name.function, support.function	#725A30	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#067E78	—
variable, variable.parameter	#3C78A8	—
entity.name.tag, meta.tag	#5939C6	—
entity.other.attribute-name	#3C78A8	—
keyword.operator, punctuation	#484836	—
meta.decorator, punctuation.decorator, storage.type.annotation, meta.annotation, support.type.attribute	#725A30	—

VS Code preview

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

Backend Themes — Django 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#44B68A
activityBar.background#181818
activityBar.border#2E2E2E
activityBar.foreground#D4D4D4
activityBar.inactiveForeground#8A8A8A
activityBarBadge.background#44B68A
activityBarBadge.foreground#000000
badge.background#44B68A
badge.foreground#000000
button.background#44B68A
button.foreground#000000
button.hoverBackground#79CDAD
dropdown.background#181818
dropdown.foreground#D4D4D4
editor.background#1E1E1E
editor.findMatchBackground#44B68A55
editor.findMatchHighlightBackground#44B68A22
editor.foreground#D4D4D4
editor.selectionBackground#44B68A44
editor.selectionHighlightBackground#44B68A22
editor.wordHighlightBackground#44B68A22
editorBracketMatch.background#44B68A22
editorBracketMatch.border#44B68A
editorCursor.foreground#44B68A
editorGroup.border#2E2E2E
editorGroupHeader.tabsBackground#181818
editorGroupHeader.tabsBorder#2E2E2E
editorHoverWidget.background#181818
editorHoverWidget.border#2E2E2E
editorIndentGuide.activeBackground1#44B68A
editorIndentGuide.background1#2E2E2E
editorLineNumber.activeForeground#44B68A
editorLineNumber.foreground#8A8A8A
editorSuggestWidget.background#181818
editorSuggestWidget.border#2E2E2E
editorSuggestWidget.highlightForeground#44B68A
editorSuggestWidget.selectedBackground#44B68A33
editorWhitespace.foreground#2E2E2E
editorWidget.background#181818
editorWidget.border#2E2E2E
extensionButton.prominentBackground#44B68A
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#79CDAD
focusBorder#44B68A
gitDecoration.modifiedResourceForeground#44B68A
input.background#181818
input.foreground#D4D4D4
input.placeholderForeground#8A8A8A
inputOption.activeBorder#44B68A
list.activeSelectionBackground#44B68A44
list.activeSelectionForeground#D4D4D4
list.focusOutline#44B68A
list.highlightForeground#44B68A
list.hoverBackground#181818
list.inactiveSelectionBackground#44B68A22
minimap.findMatchHighlight#44B68A
panel.background#1E1E1E
panel.border#2E2E2E
panelTitle.activeBorder#44B68A
panelTitle.activeForeground#D4D4D4
panelTitle.inactiveForeground#8A8A8A
peekView.border#44B68A
progressBar.background#44B68A
scrollbarSlider.activeBackground#44B68AAA
scrollbarSlider.background#8A8A8A44
scrollbarSlider.hoverBackground#44B68A66
sideBar.background#1E1E1E
sideBar.border#2E2E2E
sideBar.foreground#B0B0B0
sideBarSectionHeader.background#181818
sideBarSectionHeader.border#2E2E2E
sideBarSectionHeader.foreground#D4D4D4
sideBarTitle.foreground#B0B0B0
statusBar.background#44B68A
statusBar.border#2E2E2E
statusBar.debuggingBackground#5FC49D
statusBar.debuggingForeground#000000
statusBar.foreground#000000
statusBar.noFolderBackground#5FC49D
statusBarItem.hoverBackground#44B68A33
statusBarItem.remoteBackground#5FC49D
statusBarItem.remoteForeground#000000
tab.activeBackground#1E1E1E
tab.activeBorderTop#44B68A
tab.activeForeground#D4D4D4
tab.border#2E2E2E
tab.inactiveBackground#181818
tab.inactiveForeground#8A8A8A
terminal.background#1E1E1E
terminal.foreground#D4D4D4
terminalCursor.foreground#44B68A
textLink.activeForeground#5FC49D
textLink.foreground#44B68A
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	#4E9618	italic
string, punctuation.definition.string	#C6AEF6	—
constant.numeric, constant.language, constant.character	#B4F0A8	—
keyword, keyword.control, storage, storage.type	#44B68A	—
entity.name.function, support.function	#D2C02A	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#84F0E4	—
variable, variable.parameter	#A266F6	—
entity.name.tag, meta.tag	#44B68A	—
entity.other.attribute-name	#A266F6	—
keyword.operator, punctuation	#54908A	—
meta.decorator, punctuation.decorator, storage.type.annotation, meta.annotation, support.type.attribute	#D2C02A	—

VS Code preview

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

Backend Themes — Django 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#44B68A
activityBar.background#000000
activityBar.border#44B68A
activityBar.foreground#FFFFFF
activityBar.inactiveForeground#A6A6A6
activityBarBadge.background#44B68A
activityBarBadge.foreground#000000
badge.background#44B68A
badge.foreground#000000
button.background#000000
button.border#44B68A
button.foreground#FFFFFF
button.hoverBackground#44B68A44
contrastActiveBorder#FFFFFF
contrastBorder#44B68A
dropdown.background#000000
dropdown.border#44B68A
dropdown.foreground#FFFFFF
editor.background#000000
editor.findMatchBackground#44B68A55
editor.findMatchBorder#FFFFFF
editor.findMatchHighlightBackground#44B68A22
editor.foreground#FFFFFF
editor.selectionBackground#44B68A55
editor.selectionHighlightBackground#44B68A22
editor.selectionHighlightBorder#44B68A
editor.wordHighlightBackground#44B68A22
editor.wordHighlightBorder#44B68A
editorBracketMatch.background#44B68A22
editorBracketMatch.border#44B68A
editorCursor.foreground#44B68A
editorGroup.border#3A3A3A
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#44B68A
editorHoverWidget.background#000000
editorHoverWidget.border#44B68A
editorIndentGuide.activeBackground1#44B68A
editorIndentGuide.background1#3A3A3A
editorLineNumber.activeForeground#44B68A
editorLineNumber.foreground#A6A6A6
editorSuggestWidget.background#000000
editorSuggestWidget.border#44B68A
editorSuggestWidget.highlightForeground#44B68A
editorSuggestWidget.selectedBackground#44B68A33
editorWhitespace.foreground#3A3A3A
editorWidget.background#000000
editorWidget.border#44B68A
extensionButton.prominentBackground#000000
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#44B68A44
focusBorder#FFFFFF
gitDecoration.modifiedResourceForeground#44B68A
input.background#000000
input.border#44B68A
input.foreground#FFFFFF
input.placeholderForeground#A6A6A6
inputOption.activeBorder#FFFFFF
list.activeSelectionBackground#44B68A44
list.activeSelectionForeground#FFFFFF
list.focusOutline#FFFFFF
list.highlightForeground#44B68A
list.hoverBackground#44B68A22
list.inactiveSelectionBackground#44B68A22
minimap.findMatchHighlight#44B68A
panel.background#000000
panel.border#44B68A
panelTitle.activeBorder#44B68A
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#A6A6A6
peekView.border#44B68A
progressBar.background#44B68A
scrollbarSlider.activeBackground#44B68AAA
scrollbarSlider.background#A6A6A644
scrollbarSlider.hoverBackground#44B68A66
sideBar.background#000000
sideBar.border#44B68A
sideBar.foreground#D0D0D0
sideBarSectionHeader.background#000000
sideBarSectionHeader.border#44B68A
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#D0D0D0
statusBar.background#000000
statusBar.border#44B68A
statusBar.debuggingBackground#44B68A
statusBar.debuggingForeground#000000
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#000000
statusBarItem.hoverBackground#44B68A33
statusBarItem.remoteBackground#88D3B6
statusBarItem.remoteForeground#000000
tab.activeBackground#000000
tab.activeBorderTop#44B68A
tab.activeForeground#FFFFFF
tab.border#44B68A
tab.inactiveBackground#000000
tab.inactiveForeground#A6A6A6
terminal.background#000000
terminal.foreground#FFFFFF
terminalCursor.foreground#44B68A
textLink.activeForeground#88D3B6
textLink.foreground#44B68A
titleBar.activeBackground#000000
titleBar.activeForeground#D0D0D0
titleBar.border#44B68A
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	#7EA22A	italic
string, punctuation.definition.string	#A290AE	—
constant.numeric, constant.language, constant.character	#A2FCB4	—
keyword, keyword.control, storage, storage.type	#44B68A	bold
entity.name.function, support.function	#F0FC06	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#CCF6EA	—
variable, variable.parameter	#6096FC	—
entity.name.tag, meta.tag	#44B68A	bold
entity.other.attribute-name	#6096FC	—
keyword.operator, punctuation	#96D8FC	—
meta.decorator, punctuation.decorator, storage.type.annotation, meta.annotation, support.type.attribute	#F0FC06	—