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 — Angular 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#A80020
activityBar.background#FFFFFF
activityBar.border#A80020
activityBar.foreground#000000
activityBar.inactiveForeground#2B2B2B
activityBarBadge.background#A80020
activityBarBadge.foreground#FFFFFF
badge.background#A80020
badge.foreground#FFFFFF
button.background#FFFFFF
button.border#A80020
button.foreground#000000
button.hoverBackground#A8002044
button.secondaryBackground#FFFFFF
button.secondaryForeground#000000
button.secondaryHoverBackground#7A001844
checkbox.background#FFFFFF
checkbox.border#A80020
checkbox.foreground#000000
contrastActiveBorder#000000
contrastBorder#A80020
dropdown.background#FFFFFF
dropdown.border#A80020
dropdown.foreground#000000
dropdown.listBackground#FFFFFF
editor.background#FFFFFF
editor.findMatchBackground#A8002066
editor.findMatchBorder#000000
editor.findMatchHighlightBackground#A8002033
editor.findMatchHighlightBorder#A80020
editor.foreground#000000
editor.lineHighlightBorder#A8002088
editor.selectionBackground#A8002055
editor.selectionForeground#000000
editor.selectionHighlightBackground#A8002033
editor.selectionHighlightBorder#A80020
editor.wordHighlightBackground#A8002033
editor.wordHighlightBorder#A80020
editor.wordHighlightStrongBorder#7A0018
editorBracketMatch.background#FFFFFF
editorBracketMatch.border#A80020
editorCursor.foreground#A80020
editorGroup.border#A80020
editorGroupHeader.tabsBackground#FFFFFF
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#A80020
editorIndentGuide.activeBackground1#A80020
editorIndentGuide.background1#59595966
editorLineNumber.activeForeground#A80020
editorLineNumber.foreground#595959
editorOverviewRuler.border#A80020
editorRuler.foreground#595959
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.border#A80020
editorSuggestWidget.foreground#000000
editorSuggestWidget.highlightForeground#A80020
editorSuggestWidget.selectedBackground#A8002044
editorWhitespace.foreground#595959
editorWidget.background#FFFFFF
editorWidget.border#A80020
editorWidget.foreground#000000
extensionButton.prominentBackground#FFFFFF
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#A8002044
focusBorder#000000
gitDecoration.deletedResourceForeground#7A0018
gitDecoration.ignoredResourceForeground#595959
gitDecoration.modifiedResourceForeground#A80020
gitDecoration.untrackedResourceForeground#105040
input.background#FFFFFF
input.border#A80020
input.foreground#000000
input.placeholderForeground#595959
inputOption.activeBorder#000000
inputOption.activeForeground#000000
inputValidation.errorBorder#A80020
list.activeSelectionBackground#A8002044
list.activeSelectionForeground#000000
list.focusBackground#A8002044
list.focusForeground#000000
list.focusOutline#000000
list.highlightForeground#A80020
list.hoverBackground#A8002022
list.hoverForeground#000000
list.inactiveSelectionBackground#A8002022
list.inactiveSelectionForeground#000000
menu.background#FFFFFF
menu.border#A80020
menu.foreground#000000
menu.selectionBackground#A8002044
menu.selectionForeground#000000
menubar.selectionBackground#A8002044
menubar.selectionForeground#000000
minimap.findMatchHighlight#A80020
minimapSlider.background#59595944
notificationCenterHeader.background#FFFFFF
notifications.background#FFFFFF
notifications.border#A80020
notifications.foreground#000000
panel.background#FFFFFF
panel.border#A80020
panelTitle.activeBorder#A80020
panelTitle.activeForeground#000000
panelTitle.inactiveForeground#2B2B2B
peekView.border#A80020
peekViewEditor.background#FFFFFF
peekViewResult.background#FFFFFF
peekViewTitle.background#FFFFFF
progressBar.background#A80020
quickInput.background#FFFFFF
quickInput.foreground#000000
quickInputTitle.background#FFFFFF
scrollbar.shadow#FFFFFF
scrollbarSlider.activeBackground#A80020
scrollbarSlider.background#59595988
scrollbarSlider.hoverBackground#A80020AA
selection.background#A8002066
sideBar.background#FFFFFF
sideBar.border#A80020
sideBar.foreground#000000
sideBarSectionHeader.background#FFFFFF
sideBarSectionHeader.border#A80020
sideBarSectionHeader.foreground#000000
sideBarTitle.foreground#000000
statusBar.background#FFFFFF
statusBar.border#A80020
statusBar.debuggingBackground#A80020
statusBar.debuggingBorder#000000
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#000000
statusBar.noFolderBackground#FFFFFF
statusBar.noFolderBorder#A80020
statusBar.noFolderForeground#000000
statusBarItem.hoverBackground#A8002044
statusBarItem.remoteBackground#A80020
statusBarItem.remoteForeground#FFFFFF
tab.activeBackground#FFFFFF
tab.activeBorder#A80020
tab.activeBorderTop#A80020
tab.activeForeground#000000
tab.border#A80020
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#A80020
terminal.ansiBrightWhite#000000
terminal.ansiBrightYellow#6B5220
terminal.ansiCyan#0E5A73
terminal.ansiGreen#005A00
terminal.ansiMagenta#4A2475
terminal.ansiRed#7A0018
terminal.ansiWhite#4D4D4D
terminal.ansiYellow#634C1C
terminal.background#FFFFFF
terminal.border#A80020
terminal.foreground#000000
terminal.selectionBackground#A8002055
terminalCursor.foreground#A80020
textLink.activeForeground#7A0018
textLink.foreground#A80020
textPreformat.foreground#A80020
titleBar.activeBackground#FFFFFF
titleBar.activeForeground#000000
titleBar.border#A80020
titleBar.inactiveBackground#FFFFFF
titleBar.inactiveForeground#2B2B2B
tree.indentGuidesStroke#595959
widget.border#A80020
widget.shadow#FFFFFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#005412	italic
string, punctuation.definition.string	#3000C0	—
constant.numeric, constant.language, constant.character	#246066	—
keyword, keyword.control, storage, storage.type	#A80020	bold
entity.name.function, support.function	#605448	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#063C78	—
variable, variable.parameter	#5412FC	—
entity.name.tag, meta.tag	#A80020	bold
entity.other.attribute-name	#5412FC	—
keyword.operator, punctuation	#302A3C	—
meta.decorator, punctuation.decorator	#605448	—

VS Code preview

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

Frontend Themes — Angular 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#DD0031
activityBar.background#f3f3f3
activityBar.foreground#1e1e1e
activityBarBadge.background#DD0031
activityBarBadge.foreground#ffffff
badge.background#DD0031
badge.foreground#ffffff
button.background#DD0031
button.foreground#ffffff
button.hoverBackground#8B1A29
editor.background#ffffff
editor.findMatchBackground#8B1A2955
editor.findMatchHighlightBackground#8B1A2922
editor.foreground#1e1e1e
editor.selectionBackground#8B1A2933
editor.selectionHighlightBackground#8B1A2922
editor.wordHighlightBackground#8B1A2922
editorCursor.foreground#DD0031
editorIndentGuide.activeBackground1#8B1A2966
editorLineNumber.activeForeground#DD0031
editorLineNumber.foreground#a0a0a0
extensionButton.prominentBackground#DD0031
extensionButton.prominentHoverBackground#8B1A29
focusBorder#DD0031
gitDecoration.modifiedResourceForeground#8B1A29
list.activeSelectionBackground#8B1A2933
list.activeSelectionForeground#1e1e1e
list.highlightForeground#8B1A29
list.hoverBackground#eeeeee
list.inactiveSelectionBackground#8B1A291a
panel.border#e0e0e0
panelTitle.activeBorder#DD0031
progressBar.background#DD0031
scrollbarSlider.activeBackground#DD003166
scrollbarSlider.background#64646455
scrollbarSlider.hoverBackground#8B1A2944
sideBar.background#f8f8f8
sideBar.foreground#3a3a3a
sideBarSectionHeader.background#f3f3f3
sideBarTitle.foreground#3a3a3a
statusBar.background#DD0031
statusBar.debuggingBackground#8B1A29
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#8B1A29
tab.activeBackground#ffffff
tab.activeBorderTop#DD0031
tab.activeForeground#1e1e1e
tab.inactiveBackground#ececec
tab.inactiveForeground#7a7a7a
terminal.ansiBlue#8B1A29
textLink.activeForeground#8B1A29
textLink.foreground#8B1A29
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	#12845A	italic
string, punctuation.definition.string	#663CA8	—
constant.numeric, constant.language, constant.character	#186654	—
keyword, keyword.control, storage, storage.type	#8B1A29	—
entity.name.function, support.function	#AE6006	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#1E7E96	—
variable, variable.parameter	#665AFC	—
entity.name.tag, meta.tag	#8B1A29	—
entity.other.attribute-name	#665AFC	—
keyword.operator, punctuation	#4E425A	—
meta.decorator, punctuation.decorator	#AE6006	—

VS Code preview

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

Frontend Themes — Angular 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#E495A7
activityBar.background#1D1618
activityBar.foreground#D5D0DB
activityBarBadge.background#E495A7
activityBarBadge.foreground#000000
badge.background#E495A7
badge.foreground#000000
button.background#E495A7
button.foreground#000000
button.hoverBackground#C27082
editor.background#251D1F
editor.findMatchBackground#89435366
editor.findMatchHighlightBackground#89435333
editor.foreground#D5D0DB
editor.selectionBackground#89435355
editor.selectionHighlightBackground#89435333
editor.wordHighlightBackground#89435333
editorCursor.foreground#E495A7
editorIndentGuide.activeBackground1#89435388
editorLineNumber.activeForeground#E495A7
editorLineNumber.foreground#8B8694
extensionButton.prominentBackground#E495A7
extensionButton.prominentHoverBackground#C27082
focusBorder#E495A7
gitDecoration.modifiedResourceForeground#E495A7
list.activeSelectionBackground#89435344
list.activeSelectionForeground#D5D0DB
list.highlightForeground#E495A7
list.hoverBackground#362B2D
list.inactiveSelectionBackground#89435322
panel.border#3E3235
panelTitle.activeBorder#E495A7
progressBar.background#E495A7
scrollbarSlider.activeBackground#E495A777
scrollbarSlider.background#8943533a
scrollbarSlider.hoverBackground#8943535a
sideBar.background#1D1618
sideBar.foreground#B4AFBC
sideBarSectionHeader.background#362B2D
sideBarTitle.foreground#B4AFBC
statusBar.background#894353
statusBar.debuggingBackground#B65469
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#894353
tab.activeBackground#251D1F
tab.activeBorderTop#E495A7
tab.activeForeground#D5D0DB
tab.inactiveBackground#1D1618
tab.inactiveForeground#8B8694
terminal.ansiBlue#E495A7
textLink.activeForeground#E495A7
textLink.foreground#E495A7
titleBar.activeBackground#1D1618
titleBar.activeForeground#B4AFBC
titleBar.inactiveBackground#251D1F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#C6F6DE	italic
string, punctuation.definition.string	#CCB478	—
constant.numeric, constant.language, constant.character	#AEE448	—
keyword, keyword.control, storage, storage.type	#E495A7	—
entity.name.function, support.function	#EAF0B4	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#CCF0F6	—
variable, variable.parameter	#9CA8F0	—
entity.name.tag, meta.tag	#E495A7	—
entity.other.attribute-name	#9CA8F0	—
keyword.operator, punctuation	#C0BAD8	—
meta.decorator, punctuation.decorator	#EAF0B4	—

VS Code preview

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

Frontend Themes — Angular 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#DB768C
activityBar.background#F8EFF1
activityBar.foreground#3A3543
activityBarBadge.background#93394D
activityBarBadge.foreground#FFFFFF
badge.background#93394D
badge.foreground#FFFFFF
button.background#93394D
button.foreground#FFFFFF
button.hoverBackground#6E2B3A
editor.background#FDF9FA
editor.findMatchBackground#BF4A6455
editor.findMatchHighlightBackground#BF4A6426
editor.foreground#3A3543
editor.selectionBackground#BF4A6444
editor.selectionHighlightBackground#BF4A6426
editor.wordHighlightBackground#BF4A6426
editorCursor.foreground#DB768C
editorIndentGuide.activeBackground1#BF4A6477
editorLineNumber.activeForeground#DB768C
editorLineNumber.foreground#807A8B
extensionButton.prominentBackground#93394D
extensionButton.prominentHoverBackground#93394D
focusBorder#DB768C
gitDecoration.modifiedResourceForeground#93394D
list.activeSelectionBackground#BF4A643a
list.activeSelectionForeground#3A3543
list.highlightForeground#93394D
list.hoverBackground#F4E4E8
list.inactiveSelectionBackground#BF4A641f
panel.border#EDDEE1
panelTitle.activeBorder#DB768C
progressBar.background#DB768C
scrollbarSlider.activeBackground#DB768C77
scrollbarSlider.background#BF4A643a
scrollbarSlider.hoverBackground#BF4A645a
sideBar.background#FDF9FA
sideBar.foreground#5A5464
sideBarSectionHeader.background#F8EFF1
sideBarTitle.foreground#5A5464
statusBar.background#93394D
statusBar.debuggingBackground#BF4A64
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#93394D
tab.activeBackground#FDF9FA
tab.activeBorderTop#DB768C
tab.activeForeground#3A3543
tab.inactiveBackground#F8EFF1
tab.inactiveForeground#807A8B
terminal.ansiBlue#93394D
textLink.activeForeground#DB768C
textLink.foreground#93394D
titleBar.activeBackground#F8EFF1
titleBar.activeForeground#5A5464
titleBar.inactiveBackground#FDF9FA

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#3C4E06	italic
string, punctuation.definition.string	#5A24AE	—
constant.numeric, constant.language, constant.character	#427872	—
keyword, keyword.control, storage, storage.type	#93394D	—
entity.name.function, support.function	#9C6600	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#4E7296	—
variable, variable.parameter	#545AFC	—
entity.name.tag, meta.tag	#93394D	—
entity.other.attribute-name	#545AFC	—
keyword.operator, punctuation	#4E4260	—
meta.decorator, punctuation.decorator	#9C6600	—