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 — Rails 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#B20000
activityBar.background#FFFFFF
activityBar.border#B20000
activityBar.foreground#000000
activityBar.inactiveForeground#595959
activityBarBadge.background#B20000
activityBarBadge.foreground#FFFFFF
badge.background#B20000
badge.foreground#FFFFFF
button.background#FFFFFF
button.border#B20000
button.foreground#000000
button.hoverBackground#B2000044
contrastActiveBorder#000000
contrastBorder#B20000
dropdown.background#FFFFFF
dropdown.border#B20000
dropdown.foreground#000000
editor.background#FFFFFF
editor.findMatchBackground#B2000055
editor.findMatchBorder#000000
editor.findMatchHighlightBackground#B2000022
editor.foreground#000000
editor.selectionBackground#B2000055
editor.selectionHighlightBackground#B2000022
editor.selectionHighlightBorder#B20000
editor.wordHighlightBackground#B2000022
editor.wordHighlightBorder#B20000
editorBracketMatch.background#B2000022
editorBracketMatch.border#B20000
editorCursor.foreground#B20000
editorGroup.border#C8C8C8
editorGroupHeader.tabsBackground#FFFFFF
editorGroupHeader.tabsBorder#B20000
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#B20000
editorIndentGuide.activeBackground1#B20000
editorIndentGuide.background1#C8C8C8
editorLineNumber.activeForeground#B20000
editorLineNumber.foreground#595959
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.border#B20000
editorSuggestWidget.highlightForeground#B20000
editorSuggestWidget.selectedBackground#B2000033
editorWhitespace.foreground#C8C8C8
editorWidget.background#FFFFFF
editorWidget.border#B20000
extensionButton.prominentBackground#FFFFFF
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#B2000044
focusBorder#000000
gitDecoration.modifiedResourceForeground#B20000
input.background#FFFFFF
input.border#B20000
input.foreground#000000
input.placeholderForeground#595959
inputOption.activeBorder#000000
list.activeSelectionBackground#B2000044
list.activeSelectionForeground#000000
list.focusOutline#000000
list.highlightForeground#B20000
list.hoverBackground#B2000022
list.inactiveSelectionBackground#B2000022
minimap.findMatchHighlight#B20000
panel.background#FFFFFF
panel.border#B20000
panelTitle.activeBorder#B20000
panelTitle.activeForeground#000000
panelTitle.inactiveForeground#595959
peekView.border#B20000
progressBar.background#B20000
scrollbarSlider.activeBackground#B20000AA
scrollbarSlider.background#59595944
scrollbarSlider.hoverBackground#B2000066
sideBar.background#FFFFFF
sideBar.border#B20000
sideBar.foreground#2B2B2B
sideBarSectionHeader.background#FFFFFF
sideBarSectionHeader.border#B20000
sideBarSectionHeader.foreground#000000
sideBarTitle.foreground#2B2B2B
statusBar.background#FFFFFF
statusBar.border#B20000
statusBar.debuggingBackground#B20000
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#000000
statusBar.noFolderBackground#FFFFFF
statusBarItem.hoverBackground#B2000033
statusBarItem.remoteBackground#8F0000
statusBarItem.remoteForeground#FFFFFF
tab.activeBackground#FFFFFF
tab.activeBorderTop#B20000
tab.activeForeground#000000
tab.border#B20000
tab.inactiveBackground#FFFFFF
tab.inactiveForeground#595959
terminal.background#FFFFFF
terminal.foreground#000000
terminalCursor.foreground#B20000
textLink.activeForeground#8F0000
textLink.foreground#B20000
titleBar.activeBackground#FFFFFF
titleBar.activeForeground#2B2B2B
titleBar.border#B20000
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	#066642	italic
string, punctuation.definition.string	#5A12FC	—
constant.numeric, constant.language, constant.character	#24606C	—
keyword, keyword.control, storage, storage.type	#B20000	bold
entity.name.function, support.function	#3C2A18	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#003C3C	—
variable, variable.parameter	#0600A2	—
entity.name.tag, meta.tag	#B20000	bold
entity.other.attribute-name	#0600A2	—
keyword.operator, punctuation	#24184E	—
meta.decorator, punctuation.decorator, storage.type.annotation, meta.annotation, support.type.attribute	#3C2A18	—

VS Code preview

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

Backend Themes — Rails 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#CC0000
activityBar.background#F3F3F3
activityBar.border#E0E0E0
activityBar.foreground#1E1E1E
activityBar.inactiveForeground#6B6B6B
activityBarBadge.background#CC0000
activityBarBadge.foreground#FFFFFF
badge.background#CC0000
badge.foreground#FFFFFF
button.background#CC0000
button.foreground#FFFFFF
button.hoverBackground#A30000
dropdown.background#F3F3F3
dropdown.foreground#1E1E1E
editor.background#FFFFFF
editor.findMatchBackground#CC000055
editor.findMatchHighlightBackground#CC000022
editor.foreground#1E1E1E
editor.selectionBackground#CC000044
editor.selectionHighlightBackground#CC000022
editor.wordHighlightBackground#CC000022
editorBracketMatch.background#CC000022
editorBracketMatch.border#CC0000
editorCursor.foreground#CC0000
editorGroup.border#E0E0E0
editorGroupHeader.tabsBackground#F3F3F3
editorGroupHeader.tabsBorder#E0E0E0
editorHoverWidget.background#F3F3F3
editorHoverWidget.border#E0E0E0
editorIndentGuide.activeBackground1#CC0000
editorIndentGuide.background1#E0E0E0
editorLineNumber.activeForeground#CC0000
editorLineNumber.foreground#6B6B6B
editorSuggestWidget.background#F3F3F3
editorSuggestWidget.border#E0E0E0
editorSuggestWidget.highlightForeground#CC0000
editorSuggestWidget.selectedBackground#CC000033
editorWhitespace.foreground#E0E0E0
editorWidget.background#F3F3F3
editorWidget.border#E0E0E0
extensionButton.prominentBackground#CC0000
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#A30000
focusBorder#CC0000
gitDecoration.modifiedResourceForeground#CC0000
input.background#F3F3F3
input.foreground#1E1E1E
input.placeholderForeground#6B6B6B
inputOption.activeBorder#CC0000
list.activeSelectionBackground#CC000044
list.activeSelectionForeground#1E1E1E
list.focusOutline#CC0000
list.highlightForeground#CC0000
list.hoverBackground#F3F3F3
list.inactiveSelectionBackground#CC000022
minimap.findMatchHighlight#CC0000
panel.background#FFFFFF
panel.border#E0E0E0
panelTitle.activeBorder#CC0000
panelTitle.activeForeground#1E1E1E
panelTitle.inactiveForeground#6B6B6B
peekView.border#CC0000
progressBar.background#CC0000
scrollbarSlider.activeBackground#CC0000AA
scrollbarSlider.background#6B6B6B44
scrollbarSlider.hoverBackground#CC000066
sideBar.background#FFFFFF
sideBar.border#E0E0E0
sideBar.foreground#3A3A3A
sideBarSectionHeader.background#F3F3F3
sideBarSectionHeader.border#E0E0E0
sideBarSectionHeader.foreground#1E1E1E
sideBarTitle.foreground#3A3A3A
statusBar.background#CC0000
statusBar.border#E0E0E0
statusBar.debuggingBackground#A80000
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#A80000
statusBarItem.hoverBackground#CC000033
statusBarItem.remoteBackground#A80000
statusBarItem.remoteForeground#FFFFFF
tab.activeBackground#FFFFFF
tab.activeBorderTop#CC0000
tab.activeForeground#1E1E1E
tab.border#E0E0E0
tab.inactiveBackground#F3F3F3
tab.inactiveForeground#6B6B6B
terminal.background#FFFFFF
terminal.foreground#1E1E1E
terminalCursor.foreground#CC0000
textLink.activeForeground#A80000
textLink.foreground#CC0000
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	#427E72	italic
string, punctuation.definition.string	#8448F6	—
constant.numeric, constant.language, constant.character	#1E6048	—
keyword, keyword.control, storage, storage.type	#CC0000	—
entity.name.function, support.function	#72784E	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#367896	—
variable, variable.parameter	#4842B4	—
entity.name.tag, meta.tag	#CC0000	—
entity.other.attribute-name	#4842B4	—
keyword.operator, punctuation	#484260	—
meta.decorator, punctuation.decorator, storage.type.annotation, meta.annotation, support.type.attribute	#72784E	—

VS Code preview

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

Backend Themes — Rails 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#D36969
activityBar.background#171C1E
activityBar.border#2A3134
activityBar.foreground#D5D0DB
activityBar.inactiveForeground#8A9095
activityBarBadge.background#D36969
activityBarBadge.foreground#000000
badge.background#D36969
badge.foreground#000000
button.background#D36969
button.foreground#000000
button.hoverBackground#DE8C8C
dropdown.background#171C1E
dropdown.foreground#D5D0DB
editor.background#1D2325
editor.findMatchBackground#D3696955
editor.findMatchHighlightBackground#D3696922
editor.foreground#D5D0DB
editor.selectionBackground#D3696944
editor.selectionHighlightBackground#D3696922
editor.wordHighlightBackground#D3696922
editorBracketMatch.background#D3696922
editorBracketMatch.border#D36969
editorCursor.foreground#D36969
editorGroup.border#2A3134
editorGroupHeader.tabsBackground#171C1E
editorGroupHeader.tabsBorder#2A3134
editorHoverWidget.background#171C1E
editorHoverWidget.border#2A3134
editorIndentGuide.activeBackground1#D36969
editorIndentGuide.background1#2A3134
editorLineNumber.activeForeground#D36969
editorLineNumber.foreground#8A9095
editorSuggestWidget.background#171C1E
editorSuggestWidget.border#2A3134
editorSuggestWidget.highlightForeground#D36969
editorSuggestWidget.selectedBackground#D3696933
editorWhitespace.foreground#2A3134
editorWidget.background#171C1E
editorWidget.border#2A3134
extensionButton.prominentBackground#D36969
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#DE8C8C
focusBorder#D36969
gitDecoration.modifiedResourceForeground#D36969
input.background#171C1E
input.foreground#D5D0DB
input.placeholderForeground#8A9095
inputOption.activeBorder#D36969
list.activeSelectionBackground#D3696944
list.activeSelectionForeground#D5D0DB
list.focusOutline#D36969
list.highlightForeground#D36969
list.hoverBackground#171C1E
list.inactiveSelectionBackground#D3696922
minimap.findMatchHighlight#D36969
panel.background#1D2325
panel.border#2A3134
panelTitle.activeBorder#D36969
panelTitle.activeForeground#D5D0DB
panelTitle.inactiveForeground#8A9095
peekView.border#D36969
progressBar.background#D36969
scrollbarSlider.activeBackground#D36969AA
scrollbarSlider.background#8A909544
scrollbarSlider.hoverBackground#D3696966
sideBar.background#1D2325
sideBar.border#2A3134
sideBar.foreground#B4B8BE
sideBarSectionHeader.background#171C1E
sideBarSectionHeader.border#2A3134
sideBarSectionHeader.foreground#D5D0DB
sideBarTitle.foreground#B4B8BE
statusBar.background#D36969
statusBar.border#2A3134
statusBar.debuggingBackground#DE8C8C
statusBar.debuggingForeground#000000
statusBar.foreground#000000
statusBar.noFolderBackground#DE8C8C
statusBarItem.hoverBackground#D3696933
statusBarItem.remoteBackground#DE8C8C
statusBarItem.remoteForeground#000000
tab.activeBackground#1D2325
tab.activeBorderTop#D36969
tab.activeForeground#D5D0DB
tab.border#2A3134
tab.inactiveBackground#171C1E
tab.inactiveForeground#8A9095
terminal.background#1D2325
terminal.foreground#D5D0DB
terminalCursor.foreground#D36969
textLink.activeForeground#DE8C8C
textLink.foreground#D36969
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	#C6EADE	italic
string, punctuation.definition.string	#B48AAE	—
constant.numeric, constant.language, constant.character	#CCEA90	—
keyword, keyword.control, storage, storage.type	#D36969	—
entity.name.function, support.function	#CCA248	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#60A2F6	—
variable, variable.parameter	#C0D2FC	—
entity.name.tag, meta.tag	#D36969	—
entity.other.attribute-name	#C0D2FC	—
keyword.operator, punctuation	#96B4A2	—
meta.decorator, punctuation.decorator, storage.type.annotation, meta.annotation, support.type.attribute	#CCA248	—

VS Code preview

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

Backend Themes — Rails 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#9E2E2E
activityBar.background#EFF4F6
activityBar.border#DCE3E6
activityBar.foreground#3A3543
activityBar.inactiveForeground#6E7378
activityBarBadge.background#9E2E2E
activityBarBadge.foreground#FFFFFF
badge.background#9E2E2E
badge.foreground#FFFFFF
button.background#9E2E2E
button.foreground#FFFFFF
button.hoverBackground#762323
dropdown.background#EFF4F6
dropdown.foreground#3A3543
editor.background#F9FCFD
editor.findMatchBackground#9E2E2E55
editor.findMatchHighlightBackground#9E2E2E22
editor.foreground#3A3543
editor.selectionBackground#9E2E2E44
editor.selectionHighlightBackground#9E2E2E22
editor.wordHighlightBackground#9E2E2E22
editorBracketMatch.background#9E2E2E22
editorBracketMatch.border#9E2E2E
editorCursor.foreground#9E2E2E
editorGroup.border#DCE3E6
editorGroupHeader.tabsBackground#EFF4F6
editorGroupHeader.tabsBorder#DCE3E6
editorHoverWidget.background#EFF4F6
editorHoverWidget.border#DCE3E6
editorIndentGuide.activeBackground1#9E2E2E
editorIndentGuide.background1#DCE3E6
editorLineNumber.activeForeground#9E2E2E
editorLineNumber.foreground#6E7378
editorSuggestWidget.background#EFF4F6
editorSuggestWidget.border#DCE3E6
editorSuggestWidget.highlightForeground#9E2E2E
editorSuggestWidget.selectedBackground#9E2E2E33
editorWhitespace.foreground#DCE3E6
editorWidget.background#EFF4F6
editorWidget.border#DCE3E6
extensionButton.prominentBackground#9E2E2E
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#762323
focusBorder#9E2E2E
gitDecoration.modifiedResourceForeground#9E2E2E
input.background#EFF4F6
input.foreground#3A3543
input.placeholderForeground#6E7378
inputOption.activeBorder#9E2E2E
list.activeSelectionBackground#9E2E2E44
list.activeSelectionForeground#3A3543
list.focusOutline#9E2E2E
list.highlightForeground#9E2E2E
list.hoverBackground#EFF4F6
list.inactiveSelectionBackground#9E2E2E22
minimap.findMatchHighlight#9E2E2E
panel.background#F9FCFD
panel.border#DCE3E6
panelTitle.activeBorder#9E2E2E
panelTitle.activeForeground#3A3543
panelTitle.inactiveForeground#6E7378
peekView.border#9E2E2E
progressBar.background#9E2E2E
scrollbarSlider.activeBackground#9E2E2EAA
scrollbarSlider.background#6E737844
scrollbarSlider.hoverBackground#9E2E2E66
sideBar.background#F9FCFD
sideBar.border#DCE3E6
sideBar.foreground#4A4F54
sideBarSectionHeader.background#EFF4F6
sideBarSectionHeader.border#DCE3E6
sideBarSectionHeader.foreground#3A3543
sideBarTitle.foreground#4A4F54
statusBar.background#9E2E2E
statusBar.border#DCE3E6
statusBar.debuggingBackground#922A2A
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#922A2A
statusBarItem.hoverBackground#9E2E2E33
statusBarItem.remoteBackground#922A2A
statusBarItem.remoteForeground#FFFFFF
tab.activeBackground#F9FCFD
tab.activeBorderTop#9E2E2E
tab.activeForeground#3A3543
tab.border#DCE3E6
tab.inactiveBackground#EFF4F6
tab.inactiveForeground#6E7378
terminal.background#F9FCFD
terminal.foreground#3A3543
terminalCursor.foreground#9E2E2E
textLink.activeForeground#922A2A
textLink.foreground#9E2E2E
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	#6C4E8A	—
constant.numeric, constant.language, constant.character	#426054	—
keyword, keyword.control, storage, storage.type	#9E2E2E	—
entity.name.function, support.function	#8A7212	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#2A7E7E	—
variable, variable.parameter	#2A72C6	—
entity.name.tag, meta.tag	#9E2E2E	—
entity.other.attribute-name	#2A72C6	—
keyword.operator, punctuation	#184E5A	—
meta.decorator, punctuation.decorator, storage.type.annotation, meta.annotation, support.type.attribute	#8A7212	—