My Bright Light/Dark Colorful Theme

Name: My Bright Light/Dark Colorful Theme
Author: Kureke

Publisher: KurekeThemes in package: 21

A colorful theme for VSCode, now with a bold option in the editor!

Open in VS Code GitHub

Color themes

My Vibrant Bright Colorful Theme (Bold)

VS Code preview

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

My Bright Light/Dark Colorful Theme — My Vibrant Bright Colorful Theme (Bold)

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

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#ff6666
activityBar.foreground#ffffff
activityBarBadge.background#ff0000
button.background#ff33cc
dropdown.background#c2c2f0
dropdown.border#9999ff
dropdown.foreground#1a1a1a
editor.background#ffffff
editor.foreground#070
editor.lineHighlightBackground#e6f2ff
editorLineNumber.foreground#555555
input.background#f0e6cc
input.border#ffcc66
input.foreground#1a1a1a
scrollbarSlider.activeBackground#ff8000
scrollbarSlider.background#ffcc66
scrollbarSlider.hoverBackground#ff9933
sideBar.background#ffe6e6
statusBar.background#ff9933
statusBar.foreground#ffffff
statusBarItem.hoverBackground#ffcc99
terminal.foreground#9933ff
titleBar.activeBackground#00cc99
titleBar.activeForeground#ffffff
titleBar.inactiveBackground#b3e0cc
titleBar.inactiveForeground#333333

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#aaa	—
string	#ff3300	bold
entity.name.function	#0033cc	bold
variable	#990099	bold
keyword	#ff0066	bold
constant	#990000	bold
constant.numeric	#333399	bold

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

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}!`;
}