PastelLight Themes

Name: PastelLight Themes
Author: Stoxfi

Publisher: StoxfiThemes in package: 10

Soft and elegant pastel light themes for Visual Studio Code. Ideal for minimalists, frontend devs, and anyone who prefers soothing syntax highlighting with aesthetic code palettes.

Open in VS Code GitHub

Color themes

VS Code preview

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

PastelLight Themes — Petal Whisper - Pastelight Themes

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.background#F5EDF7
activityBar.foreground#CB4D90
editor.background#FCF8FC
editor.foreground#353535
editor.inactiveSelectionBackground#F4DDE9
editor.lineHighlightBackground#F8EFF8
editor.selectionBackground#EDC9DA
editorCursor.foreground#D84E8C
editorGroup.border#E8DBF0
editorGroupHeader.noTabsBackground#F9F3FB
editorGroupHeader.tabsBackground#F9F3FB
editorLineNumber.activeForeground#D84E8C
editorLineNumber.foreground#BCAFC2
input.background#FAF5FA
input.border#E1D0E4
input.foreground#3C3C3C
panel.background#FCF8FC
panel.border#E1D3E8
scrollbarSlider.activeBackground#B78FC688
scrollbarSlider.background#D3C1DB88
scrollbarSlider.hoverBackground#C6A9D788
sideBar.background#FBF7FC
sideBar.foreground#5A5162
sideBarSectionHeader.background#F1E6F4
statusBar.background#E9D9EA
statusBar.foreground#5C5360
tab.activeBackground#FCF8FC
tab.activeForeground#C94D8B
tab.inactiveBackground#F2EBF4
tab.inactiveForeground#9C8CA7
titleBar.activeBackground#F5EEF7
titleBar.activeForeground#333333

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword	#D84E8C	bold
string	#AA49A3	—
variable	#685CA0	—
function	#3D7FB0	—
type	#F26F92	—
comment	#B7A7BC	italic
number	#E66985	—
operator	#AD6B94	—
punctuation	#B592BC	—
constant	#9E6BC7	—
storage	#D74A87	bold
entity.name.class	#7E5CA9	—
entity.name.function	#3D7FB0	—