Frontend Themes

Name: Frontend Themes
Author: StraightRight

Publisher: StraightRightThemes in package: 26

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

Open in VS Code GitHub

Color themes

VS Code preview

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

Frontend Themes — Svelte 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#992600
activityBar.background#FFFFFF
activityBar.border#992600
activityBar.foreground#000000
activityBar.inactiveForeground#2B2B2B
activityBarBadge.background#992600
activityBarBadge.foreground#FFFFFF
badge.background#992600
badge.foreground#FFFFFF
button.background#FFFFFF
button.border#992600
button.foreground#000000
button.hoverBackground#99260044
button.secondaryBackground#FFFFFF
button.secondaryForeground#000000
button.secondaryHoverBackground#6B1B0044
checkbox.background#FFFFFF
checkbox.border#992600
checkbox.foreground#000000
contrastActiveBorder#000000
contrastBorder#992600
dropdown.background#FFFFFF
dropdown.border#992600
dropdown.foreground#000000
dropdown.listBackground#FFFFFF
editor.background#FFFFFF
editor.findMatchBackground#99260066
editor.findMatchBorder#000000
editor.findMatchHighlightBackground#99260033
editor.findMatchHighlightBorder#992600
editor.foreground#000000
editor.lineHighlightBorder#99260088
editor.selectionBackground#99260055
editor.selectionForeground#000000
editor.selectionHighlightBackground#99260033
editor.selectionHighlightBorder#992600
editor.wordHighlightBackground#99260033
editor.wordHighlightBorder#992600
editor.wordHighlightStrongBorder#6B1B00
editorBracketMatch.background#FFFFFF
editorBracketMatch.border#992600
editorCursor.foreground#992600
editorGroup.border#992600
editorGroupHeader.tabsBackground#FFFFFF
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#992600
editorIndentGuide.activeBackground1#992600
editorIndentGuide.background1#59595966
editorLineNumber.activeForeground#992600
editorLineNumber.foreground#595959
editorOverviewRuler.border#992600
editorRuler.foreground#595959
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.border#992600
editorSuggestWidget.foreground#000000
editorSuggestWidget.highlightForeground#992600
editorSuggestWidget.selectedBackground#99260044
editorWhitespace.foreground#595959
editorWidget.background#FFFFFF
editorWidget.border#992600
editorWidget.foreground#000000
extensionButton.prominentBackground#FFFFFF
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#99260044
focusBorder#000000
gitDecoration.deletedResourceForeground#6B1B00
gitDecoration.ignoredResourceForeground#595959
gitDecoration.modifiedResourceForeground#992600
gitDecoration.untrackedResourceForeground#204030
input.background#FFFFFF
input.border#992600
input.foreground#000000
input.placeholderForeground#595959
inputOption.activeBorder#000000
inputOption.activeForeground#000000
inputValidation.errorBorder#992600
list.activeSelectionBackground#99260044
list.activeSelectionForeground#000000
list.focusBackground#99260044
list.focusForeground#000000
list.focusOutline#000000
list.highlightForeground#992600
list.hoverBackground#99260022
list.hoverForeground#000000
list.inactiveSelectionBackground#99260022
list.inactiveSelectionForeground#000000
menu.background#FFFFFF
menu.border#992600
menu.foreground#000000
menu.selectionBackground#99260044
menu.selectionForeground#000000
menubar.selectionBackground#99260044
menubar.selectionForeground#000000
minimap.findMatchHighlight#992600
minimapSlider.background#59595944
notificationCenterHeader.background#FFFFFF
notifications.background#FFFFFF
notifications.border#992600
notifications.foreground#000000
panel.background#FFFFFF
panel.border#992600
panelTitle.activeBorder#992600
panelTitle.activeForeground#000000
panelTitle.inactiveForeground#2B2B2B
peekView.border#992600
peekViewEditor.background#FFFFFF
peekViewResult.background#FFFFFF
peekViewTitle.background#FFFFFF
progressBar.background#992600
quickInput.background#FFFFFF
quickInput.foreground#000000
quickInputTitle.background#FFFFFF
scrollbar.shadow#FFFFFF
scrollbarSlider.activeBackground#992600
scrollbarSlider.background#59595988
scrollbarSlider.hoverBackground#992600AA
selection.background#99260066
sideBar.background#FFFFFF
sideBar.border#992600
sideBar.foreground#000000
sideBarSectionHeader.background#FFFFFF
sideBarSectionHeader.border#992600
sideBarSectionHeader.foreground#000000
sideBarTitle.foreground#000000
statusBar.background#FFFFFF
statusBar.border#992600
statusBar.debuggingBackground#992600
statusBar.debuggingBorder#000000
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#000000
statusBar.noFolderBackground#FFFFFF
statusBar.noFolderBorder#992600
statusBar.noFolderForeground#000000
statusBarItem.hoverBackground#99260044
statusBarItem.remoteBackground#992600
statusBarItem.remoteForeground#FFFFFF
tab.activeBackground#FFFFFF
tab.activeBorder#992600
tab.activeBorderTop#992600
tab.activeForeground#000000
tab.border#992600
tab.inactiveBackground#FFFFFF
tab.inactiveForeground#2B2B2B
tab.unfocusedActiveForeground#000000
tab.unfocusedInactiveForeground#2B2B2B
terminal.ansiBlack#000000
terminal.ansiBlue#001080
terminal.ansiBrightBlack#4D4D4D
terminal.ansiBrightBlue#002DA8
terminal.ansiBrightCyan#17607A
terminal.ansiBrightGreen#006100
terminal.ansiBrightMagenta#5B2D8E
terminal.ansiBrightRed#992600
terminal.ansiBrightWhite#000000
terminal.ansiBrightYellow#6B5220
terminal.ansiCyan#0E5A73
terminal.ansiGreen#005A00
terminal.ansiMagenta#4A2475
terminal.ansiRed#6B1B00
terminal.ansiWhite#4D4D4D
terminal.ansiYellow#634C1C
terminal.background#FFFFFF
terminal.border#992600
terminal.foreground#000000
terminal.selectionBackground#99260055
terminalCursor.foreground#992600
textLink.activeForeground#6B1B00
textLink.foreground#992600
textPreformat.foreground#992600
titleBar.activeBackground#FFFFFF
titleBar.activeForeground#000000
titleBar.border#992600
titleBar.inactiveBackground#FFFFFF
titleBar.inactiveForeground#2B2B2B
tree.indentGuidesStroke#595959
widget.border#992600
widget.shadow#FFFFFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#36604E	italic
string, punctuation.definition.string	#6642A2	—
constant.numeric, constant.language, constant.character	#18606C	—
keyword, keyword.control, storage, storage.type	#992600	bold
entity.name.function, support.function	#483624	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#003C66	—
variable, variable.parameter	#4818FC	—
entity.name.tag, meta.tag	#992600	bold
entity.other.attribute-name	#4818FC	—
keyword.operator, punctuation	#422430	—
meta.decorator, punctuation.decorator	#483624	—

VS Code preview

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

Frontend Themes — Svelte 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#FF3E00
activityBar.background#f3f3f3
activityBar.foreground#1e1e1e
activityBarBadge.background#FF3E00
activityBarBadge.foreground#000000
badge.background#FF3E00
badge.foreground#000000
button.background#FF3E00
button.foreground#000000
button.hoverBackground#FF7042
editor.background#ffffff
editor.findMatchBackground#B32B0055
editor.findMatchHighlightBackground#B32B0022
editor.foreground#1e1e1e
editor.selectionBackground#B32B0033
editor.selectionHighlightBackground#B32B0022
editor.wordHighlightBackground#B32B0022
editorCursor.foreground#FF3E00
editorIndentGuide.activeBackground1#B32B0066
editorLineNumber.activeForeground#FF3E00
editorLineNumber.foreground#a0a0a0
extensionButton.prominentBackground#FF3E00
extensionButton.prominentHoverBackground#B32B00
focusBorder#FF3E00
gitDecoration.modifiedResourceForeground#B32B00
list.activeSelectionBackground#B32B0033
list.activeSelectionForeground#1e1e1e
list.highlightForeground#B32B00
list.hoverBackground#eeeeee
list.inactiveSelectionBackground#B32B001a
panel.border#e0e0e0
panelTitle.activeBorder#FF3E00
progressBar.background#FF3E00
scrollbarSlider.activeBackground#FF3E0066
scrollbarSlider.background#64646455
scrollbarSlider.hoverBackground#B32B0044
sideBar.background#f8f8f8
sideBar.foreground#3a3a3a
sideBarSectionHeader.background#f3f3f3
sideBarTitle.foreground#3a3a3a
statusBar.background#FF3E00
statusBar.debuggingBackground#B32B00
statusBar.debuggingForeground#ffffff
statusBar.foreground#000000
statusBar.noFolderBackground#DB3500
tab.activeBackground#ffffff
tab.activeBorderTop#FF3E00
tab.activeForeground#1e1e1e
tab.inactiveBackground#ececec
tab.inactiveForeground#7a7a7a
terminal.ansiBlue#B32B00
textLink.activeForeground#B32B00
textLink.foreground#B32B00
titleBar.activeBackground#f3f3f3
titleBar.activeForeground#3a3a3a
titleBar.inactiveBackground#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#2A6042	italic
string, punctuation.definition.string	#4806FC	—
constant.numeric, constant.language, constant.character	#2A7E72	—
keyword, keyword.control, storage, storage.type	#B32B00	—
entity.name.function, support.function	#727848	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#0C5496	—
variable, variable.parameter	#5460FC	—
entity.name.tag, meta.tag	#B32B00	—
entity.other.attribute-name	#5460FC	—
keyword.operator, punctuation	#304E54	—
meta.decorator, punctuation.decorator	#727848	—

VS Code preview

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

Frontend Themes — Svelte 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#E4A895
activityBar.background#1D1816
activityBar.foreground#D5D0DB
activityBarBadge.background#E4A895
activityBarBadge.foreground#000000
badge.background#E4A895
badge.foreground#000000
button.background#E4A895
button.foreground#000000
button.hoverBackground#BF7E69
editor.background#251F1D
editor.findMatchBackground#89544366
editor.findMatchHighlightBackground#89544333
editor.foreground#D5D0DB
editor.selectionBackground#89544355
editor.selectionHighlightBackground#89544333
editor.wordHighlightBackground#89544333
editorCursor.foreground#E4A895
editorIndentGuide.activeBackground1#89544388
editorLineNumber.activeForeground#E4A895
editorLineNumber.foreground#8B8694
extensionButton.prominentBackground#E4A895
extensionButton.prominentHoverBackground#BF7E69
focusBorder#E4A895
gitDecoration.modifiedResourceForeground#E4A895
list.activeSelectionBackground#89544344
list.activeSelectionForeground#D5D0DB
list.highlightForeground#E4A895
list.hoverBackground#362E2B
list.inactiveSelectionBackground#89544322
panel.border#3E3532
panelTitle.activeBorder#E4A895
progressBar.background#E4A895
scrollbarSlider.activeBackground#E4A89577
scrollbarSlider.background#8954433a
scrollbarSlider.hoverBackground#8954435a
sideBar.background#1D1816
sideBar.foreground#B4AFBC
sideBarSectionHeader.background#362E2B
sideBarTitle.foreground#B4AFBC
statusBar.background#895443
statusBar.debuggingBackground#AC6149
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#895443
tab.activeBackground#251F1D
tab.activeBorderTop#E4A895
tab.activeForeground#D5D0DB
tab.inactiveBackground#1D1816
tab.inactiveForeground#8B8694
terminal.ansiBlue#E4A895
textLink.activeForeground#E4A895
textLink.foreground#E4A895
titleBar.activeBackground#1D1816
titleBar.activeForeground#B4AFBC
titleBar.inactiveBackground#251F1D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#E4F6C0	italic
string, punctuation.definition.string	#E4A242	—
constant.numeric, constant.language, constant.character	#CCF6EA	—
keyword, keyword.control, storage, storage.type	#E4A895	—
entity.name.function, support.function	#EAEA66	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#C6DEF6	—
variable, variable.parameter	#9CA8F0	—
entity.name.tag, meta.tag	#E4A895	—
entity.other.attribute-name	#9CA8F0	—
keyword.operator, punctuation	#A2B4B4	—
meta.decorator, punctuation.decorator	#EAEA66	—

VS Code preview

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

Frontend Themes — Svelte 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#DB8E76
activityBar.background#F8F1EF
activityBar.foreground#3A3543
activityBarBadge.background#934F39
activityBarBadge.foreground#FFFFFF
badge.background#934F39
badge.foreground#FFFFFF
button.background#934F39
button.foreground#FFFFFF
button.hoverBackground#723D2C
editor.background#FDFAF9
editor.findMatchBackground#BF664A55
editor.findMatchHighlightBackground#BF664A26
editor.foreground#3A3543
editor.selectionBackground#BF664A44
editor.selectionHighlightBackground#BF664A26
editor.wordHighlightBackground#BF664A26
editorCursor.foreground#DB8E76
editorIndentGuide.activeBackground1#BF664A77
editorLineNumber.activeForeground#DB8E76
editorLineNumber.foreground#807A8B
extensionButton.prominentBackground#934F39
extensionButton.prominentHoverBackground#934F39
focusBorder#DB8E76
gitDecoration.modifiedResourceForeground#934F39
list.activeSelectionBackground#BF664A3a
list.activeSelectionForeground#3A3543
list.highlightForeground#934F39
list.hoverBackground#F4E8E4
list.inactiveSelectionBackground#BF664A1f
panel.border#EDE2DE
panelTitle.activeBorder#DB8E76
progressBar.background#DB8E76
scrollbarSlider.activeBackground#DB8E7677
scrollbarSlider.background#BF664A3a
scrollbarSlider.hoverBackground#BF664A5a
sideBar.background#FDFAF9
sideBar.foreground#5A5464
sideBarSectionHeader.background#F8F1EF
sideBarTitle.foreground#5A5464
statusBar.background#934F39
statusBar.debuggingBackground#B55C40
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#934F39
tab.activeBackground#FDFAF9
tab.activeBorderTop#DB8E76
tab.activeForeground#3A3543
tab.inactiveBackground#F8F1EF
tab.inactiveForeground#807A8B
terminal.ansiBlue#934F39
textLink.activeForeground#DB8E76
textLink.foreground#934F39
titleBar.activeBackground#F8F1EF
titleBar.activeForeground#5A5464
titleBar.inactiveBackground#FDFAF9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#5A7872	italic
string, punctuation.definition.string	#3C00E4	—
constant.numeric, constant.language, constant.character	#0C7E90	—
keyword, keyword.control, storage, storage.type	#934F39	—
entity.name.function, support.function	#B45A00	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#18487E	—
variable, variable.parameter	#6054FC	—
entity.name.tag, meta.tag	#934F39	—
entity.other.attribute-name	#6054FC	—
keyword.operator, punctuation	#543C42	—
meta.decorator, punctuation.decorator	#B45A00	—