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 — Vue 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#95E4C1
activityBar.background#161D1A
activityBar.foreground#D5D0DB
activityBarBadge.background#95E4C1
activityBarBadge.foreground#000000
badge.background#95E4C1
badge.foreground#000000
button.background#95E4C1
button.foreground#000000
button.hoverBackground#69BF98
editor.background#1D2522
editor.findMatchBackground#43896A66
editor.findMatchHighlightBackground#43896A33
editor.foreground#D5D0DB
editor.selectionBackground#43896A55
editor.selectionHighlightBackground#43896A33
editor.wordHighlightBackground#43896A33
editorCursor.foreground#95E4C1
editorIndentGuide.activeBackground1#43896A88
editorLineNumber.activeForeground#95E4C1
editorLineNumber.foreground#8B8694
extensionButton.prominentBackground#95E4C1
extensionButton.prominentHoverBackground#69BF98
focusBorder#95E4C1
gitDecoration.modifiedResourceForeground#95E4C1
list.activeSelectionBackground#43896A44
list.activeSelectionForeground#D5D0DB
list.highlightForeground#95E4C1
list.hoverBackground#2B3631
list.inactiveSelectionBackground#43896A22
panel.border#323E39
panelTitle.activeBorder#95E4C1
progressBar.background#95E4C1
scrollbarSlider.activeBackground#95E4C177
scrollbarSlider.background#43896A3a
scrollbarSlider.hoverBackground#43896A5a
sideBar.background#161D1A
sideBar.foreground#B4AFBC
sideBarSectionHeader.background#2B3631
sideBarTitle.foreground#B4AFBC
statusBar.background#408265
statusBar.debuggingBackground#37815F
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#408265
tab.activeBackground#1D2522
tab.activeBorderTop#95E4C1
tab.activeForeground#D5D0DB
tab.inactiveBackground#161D1A
tab.inactiveForeground#8B8694
terminal.ansiBlue#95E4C1
textLink.activeForeground#95E4C1
textLink.foreground#95E4C1
titleBar.activeBackground#161D1A
titleBar.activeForeground#B4AFBC
titleBar.inactiveBackground#1D2522

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#D2F0A2	italic
string, punctuation.definition.string	#DEA248	—
constant.numeric, constant.language, constant.character	#C6DEEA	—
keyword, keyword.control, storage, storage.type	#95E4C1	—
entity.name.function, support.function	#E4E442	—
entity.name.class, entity.name.type, support.class, entity.other.inherited-class	#72BAAE	—
variable, variable.parameter	#A2A8EA	—
entity.name.tag, meta.tag	#95E4C1	—
entity.other.attribute-name	#A2A8EA	—
keyword.operator, punctuation	#9CB48A	—
meta.decorator, punctuation.decorator	#E4E442	—