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 — React 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#95D3E4
activityBar.background#161B1D
activityBar.foreground#D5D0DB
activityBarBadge.background#95D3E4
activityBarBadge.foreground#000000
badge.background#95D3E4
badge.foreground#000000
button.background#95D3E4
button.foreground#000000
button.hoverBackground#69ACBF
editor.background#1D2325
editor.findMatchBackground#437A8966
editor.findMatchHighlightBackground#437A8933
editor.foreground#D5D0DB
editor.selectionBackground#437A8955
editor.selectionHighlightBackground#437A8933
editor.wordHighlightBackground#437A8933
editorCursor.foreground#95D3E4
editorIndentGuide.activeBackground1#437A8988
editorLineNumber.activeForeground#95D3E4
editorLineNumber.foreground#8B8694
extensionButton.prominentBackground#95D3E4
extensionButton.prominentHoverBackground#69ACBF
focusBorder#95D3E4
gitDecoration.modifiedResourceForeground#95D3E4
list.activeSelectionBackground#437A8944
list.activeSelectionForeground#D5D0DB
list.highlightForeground#95D3E4
list.hoverBackground#2B3336
list.inactiveSelectionBackground#437A8922
panel.border#323C3E
panelTitle.activeBorder#95D3E4
progressBar.background#95D3E4
scrollbarSlider.activeBackground#95D3E477
scrollbarSlider.background#437A893a
scrollbarSlider.hoverBackground#437A895a
sideBar.background#161B1D
sideBar.foreground#B4AFBC
sideBarSectionHeader.background#2B3336
sideBarTitle.foreground#B4AFBC
statusBar.background#437A89
statusBar.debuggingBackground#3D7D8F
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#437A89
tab.activeBackground#1D2325
tab.activeBorderTop#95D3E4
tab.activeForeground#D5D0DB
tab.inactiveBackground#161B1D
tab.inactiveForeground#8B8694
terminal.ansiBlue#95D3E4
textLink.activeForeground#95D3E4
textLink.foreground#95D3E4
titleBar.activeBackground#161B1D
titleBar.activeForeground#B4AFBC
titleBar.inactiveBackground#1D2325

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#90B4AE	italic
string, punctuation.definition.string	#E4A842	—
constant.numeric, constant.language, constant.character	#DEEAC6	—
keyword, keyword.control, storage, storage.type	#95D3E4	—
entity.name.function, support.function	#E4EA8A	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#C0F6F0	—
variable, variable.parameter	#9CA8F0	—
entity.name.tag, meta.tag	#95D3E4	—
entity.other.attribute-name	#9CA8F0	—
keyword.operator, punctuation	#A2B48A	—
meta.decorator, punctuation.decorator	#E4EA8A	—

VS Code preview

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

Frontend Themes — React 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#76C5DB
activityBar.background#EFF6F8
activityBar.foreground#3A3543
activityBarBadge.background#367A8C
activityBarBadge.foreground#FFFFFF
badge.background#367A8C
badge.foreground#FFFFFF
button.background#367A8C
button.foreground#FFFFFF
button.hoverBackground#2C6372
editor.background#F9FCFD
editor.findMatchBackground#4AA6BF55
editor.findMatchHighlightBackground#4AA6BF26
editor.foreground#3A3543
editor.selectionBackground#4AA6BF44
editor.selectionHighlightBackground#4AA6BF26
editor.wordHighlightBackground#4AA6BF26
editorCursor.foreground#76C5DB
editorIndentGuide.activeBackground1#4AA6BF77
editorLineNumber.activeForeground#76C5DB
editorLineNumber.foreground#807A8B
extensionButton.prominentBackground#367A8C
extensionButton.prominentHoverBackground#367A8C
focusBorder#76C5DB
gitDecoration.modifiedResourceForeground#367A8C
list.activeSelectionBackground#4AA6BF3a
list.activeSelectionForeground#3A3543
list.highlightForeground#367A8C
list.hoverBackground#E4F0F4
list.inactiveSelectionBackground#4AA6BF1f
panel.border#DEEAED
panelTitle.activeBorder#76C5DB
progressBar.background#76C5DB
scrollbarSlider.activeBackground#76C5DB77
scrollbarSlider.background#4AA6BF3a
scrollbarSlider.hoverBackground#4AA6BF5a
sideBar.background#F9FCFD
sideBar.foreground#5A5464
sideBarSectionHeader.background#EFF6F8
sideBarTitle.foreground#5A5464
statusBar.background#367A8C
statusBar.debuggingBackground#337B8F
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#367A8C
tab.activeBackground#F9FCFD
tab.activeBorderTop#76C5DB
tab.activeForeground#3A3543
tab.inactiveBackground#EFF6F8
tab.inactiveForeground#807A8B
terminal.ansiBlue#367A8C
textLink.activeForeground#76C5DB
textLink.foreground#367A8C
titleBar.activeBackground#EFF6F8
titleBar.activeForeground#5A5464
titleBar.inactiveBackground#F9FCFD

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#185400	italic
string, punctuation.definition.string	#3C00E4	—
constant.numeric, constant.language, constant.character	#607254	—
keyword, keyword.control, storage, storage.type	#367A8C	—
entity.name.function, support.function	#6C7800	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#1E4E72	—
variable, variable.parameter	#4E60F6	—
entity.name.tag, meta.tag	#367A8C	—
entity.other.attribute-name	#4E60F6	—
keyword.operator, punctuation	#30483C	—
meta.decorator, punctuation.decorator	#6C7800	—

VS Code preview

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

Frontend Themes — Svelte 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#FF3E00
activityBar.background#181818
activityBar.foreground#d4d4d4
activityBarBadge.background#FF3E00
activityBarBadge.foreground#000000
badge.background#FF3E00
badge.foreground#000000
button.background#FF3E00
button.foreground#000000
button.hoverBackground#FF7042
editor.background#1e1e1e
editor.findMatchBackground#B32B0066
editor.findMatchHighlightBackground#B32B0033
editor.foreground#d4d4d4
editor.selectionBackground#B32B0055
editor.selectionHighlightBackground#B32B0033
editor.wordHighlightBackground#B32B0033
editorCursor.foreground#FF3E00
editorIndentGuide.activeBackground1#B32B0088
editorLineNumber.activeForeground#FF3E00
editorLineNumber.foreground#5a5a5a
extensionButton.prominentBackground#FF3E00
extensionButton.prominentHoverBackground#B32B00
focusBorder#FF3E00
gitDecoration.modifiedResourceForeground#FF3E00
list.activeSelectionBackground#B32B0044
list.activeSelectionForeground#ffffff
list.highlightForeground#FF3E00
list.hoverBackground#2a2a2a
list.inactiveSelectionBackground#B32B0022
panel.border#2a2a2a
panelTitle.activeBorder#FF3E00
progressBar.background#FF3E00
scrollbarSlider.activeBackground#FF3E0088
scrollbarSlider.background#4a4a4a55
scrollbarSlider.hoverBackground#B32B0066
sideBar.background#1e1e1e
sideBar.foreground#cccccc
sideBarSectionHeader.background#181818
sideBarTitle.foreground#cccccc
statusBar.background#B32B00
statusBar.debuggingBackground#FF3E00
statusBar.debuggingForeground#000000
statusBar.foreground#ffffff
statusBar.noFolderBackground#B32B00
tab.activeBackground#1e1e1e
tab.activeBorderTop#FF3E00
tab.activeForeground#ffffff
tab.inactiveBackground#181818
tab.inactiveForeground#8a8a8a
terminal.ansiBlue#FF3E00
textLink.activeForeground#FF3E00
textLink.foreground#FF3E00
titleBar.activeBackground#181818
titleBar.activeForeground#cccccc
titleBar.inactiveBackground#1e1e1e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#609666	italic
string, punctuation.definition.string	#CCB4F6	—
constant.numeric, constant.language, constant.character	#DEFCB4	—
keyword, keyword.control, storage, storage.type	#FF3E00	—
entity.name.function, support.function	#FCC600	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#96FCEA	—
variable, variable.parameter	#9672F6	—
entity.name.tag, meta.tag	#FF3E00	—
entity.other.attribute-name	#9672F6	—
keyword.operator, punctuation	#AE789C	—
meta.decorator, punctuation.decorator	#FCC600	—

VS Code preview

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

Frontend Themes — Svelte 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#FF8552
activityBar.background#000000
activityBar.border#FF8552
activityBar.foreground#FFFFFF
activityBar.inactiveForeground#D0D0D0
activityBarBadge.background#FF8552
activityBarBadge.foreground#000000
badge.background#FF8552
badge.foreground#000000
button.background#000000
button.border#FF8552
button.foreground#FFFFFF
button.hoverBackground#FF855244
button.secondaryBackground#000000
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#FFB08C44
checkbox.background#000000
checkbox.border#FF8552
checkbox.foreground#FFFFFF
contrastActiveBorder#FFFFFF
contrastBorder#FF8552
dropdown.background#000000
dropdown.border#FF8552
dropdown.foreground#FFFFFF
dropdown.listBackground#000000
editor.background#000000
editor.findMatchBackground#FF855266
editor.findMatchBorder#FFFFFF
editor.findMatchHighlightBackground#FF855233
editor.findMatchHighlightBorder#FF8552
editor.foreground#FFFFFF
editor.lineHighlightBorder#FF855288
editor.selectionBackground#FF855255
editor.selectionForeground#FFFFFF
editor.selectionHighlightBackground#FF855233
editor.selectionHighlightBorder#FF8552
editor.wordHighlightBackground#FF855233
editor.wordHighlightBorder#FF8552
editor.wordHighlightStrongBorder#FFB08C
editorBracketMatch.background#000000
editorBracketMatch.border#FF8552
editorCursor.foreground#FF8552
editorGroup.border#FF8552
editorGroupHeader.tabsBackground#000000
editorHoverWidget.background#000000
editorHoverWidget.border#FF8552
editorIndentGuide.activeBackground1#FF8552
editorIndentGuide.background1#A6A6A666
editorLineNumber.activeForeground#FF8552
editorLineNumber.foreground#A6A6A6
editorOverviewRuler.border#FF8552
editorRuler.foreground#A6A6A6
editorSuggestWidget.background#000000
editorSuggestWidget.border#FF8552
editorSuggestWidget.foreground#FFFFFF
editorSuggestWidget.highlightForeground#FF8552
editorSuggestWidget.selectedBackground#FF855244
editorWhitespace.foreground#A6A6A6
editorWidget.background#000000
editorWidget.border#FF8552
editorWidget.foreground#FFFFFF
extensionButton.prominentBackground#000000
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#FF855244
focusBorder#FFFFFF
gitDecoration.deletedResourceForeground#FF8552
gitDecoration.ignoredResourceForeground#A6A6A6
gitDecoration.modifiedResourceForeground#FF8552
gitDecoration.untrackedResourceForeground#E0F8B8
input.background#000000
input.border#FF8552
input.foreground#FFFFFF
input.placeholderForeground#A6A6A6
inputOption.activeBorder#FFFFFF
inputOption.activeForeground#FFFFFF
inputValidation.errorBorder#FF8552
list.activeSelectionBackground#FF855244
list.activeSelectionForeground#FFFFFF
list.focusBackground#FF855244
list.focusForeground#FFFFFF
list.focusOutline#FFFFFF
list.highlightForeground#FF8552
list.hoverBackground#FF855222
list.hoverForeground#FFFFFF
list.inactiveSelectionBackground#FF855222
list.inactiveSelectionForeground#FFFFFF
menu.background#000000
menu.border#FF8552
menu.foreground#FFFFFF
menu.selectionBackground#FF855244
menu.selectionForeground#FFFFFF
menubar.selectionBackground#FF855244
menubar.selectionForeground#FFFFFF
minimap.findMatchHighlight#FF8552
minimapSlider.background#A6A6A644
notificationCenterHeader.background#000000
notifications.background#000000
notifications.border#FF8552
notifications.foreground#FFFFFF
panel.background#000000
panel.border#FF8552
panelTitle.activeBorder#FF8552
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#D0D0D0
peekView.border#FF8552
peekViewEditor.background#000000
peekViewResult.background#000000
peekViewTitle.background#000000
progressBar.background#FF8552
quickInput.background#000000
quickInput.foreground#FFFFFF
quickInputTitle.background#000000
scrollbar.shadow#000000
scrollbarSlider.activeBackground#FF8552
scrollbarSlider.background#A6A6A688
scrollbarSlider.hoverBackground#FF8552AA
selection.background#FF855266
sideBar.background#000000
sideBar.border#FF8552
sideBar.foreground#FFFFFF
sideBarSectionHeader.background#000000
sideBarSectionHeader.border#FF8552
sideBarSectionHeader.foreground#FFFFFF
sideBarTitle.foreground#FFFFFF
statusBar.background#000000
statusBar.border#FF8552
statusBar.debuggingBackground#FF8552
statusBar.debuggingBorder#FFFFFF
statusBar.debuggingForeground#000000
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#000000
statusBar.noFolderBorder#FF8552
statusBar.noFolderForeground#FFFFFF
statusBarItem.hoverBackground#FF855244
statusBarItem.remoteBackground#FF8552
statusBarItem.remoteForeground#000000
tab.activeBackground#000000
tab.activeBorder#FF8552
tab.activeBorderTop#FF8552
tab.activeForeground#FFFFFF
tab.border#FF8552
tab.inactiveBackground#000000
tab.inactiveForeground#D0D0D0
tab.unfocusedActiveForeground#FFFFFF
tab.unfocusedInactiveForeground#D0D0D0
terminal.ansiBlack#999999
terminal.ansiBlue#61DAFB
terminal.ansiBrightBlack#C4C4C4
terminal.ansiBrightBlue#A8E9FD
terminal.ansiBrightCyan#8FE3D3
terminal.ansiBrightGreen#9AEBC6
terminal.ansiBrightMagenta#DCC6FF
terminal.ansiBrightRed#FFB08C
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#F0F0C8
terminal.ansiCyan#4EC9B0
terminal.ansiGreen#4FD69A
terminal.ansiMagenta#C5A3FF
terminal.ansiRed#FF8552
terminal.ansiWhite#E6E6E6
terminal.ansiYellow#DCDCAA
terminal.background#000000
terminal.border#FF8552
terminal.foreground#FFFFFF
terminal.selectionBackground#FF855255
terminalCursor.foreground#FF8552
textLink.activeForeground#FFB08C
textLink.foreground#FF8552
textPreformat.foreground#FF8552
titleBar.activeBackground#000000
titleBar.activeForeground#FFFFFF
titleBar.border#FF8552
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#D0D0D0
tree.indentGuidesStroke#A6A6A6
widget.border#FF8552
widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#E0F8B8	italic
string, punctuation.definition.string	#D0B0A0	—
constant.numeric, constant.language, constant.character	#70A0A8	—
keyword, keyword.control, storage, storage.type	#FF8552	bold
entity.name.function, support.function	#E0F038	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#98D8F0	—
variable, variable.parameter	#18A8F0	—
entity.name.tag, meta.tag	#FF8552	bold
entity.other.attribute-name	#18A8F0	—
keyword.operator, punctuation	#FFFFFF	—
meta.decorator, punctuation.decorator	#E0F038	—