Pixel Dark

Name: Pixel Dark
Author: Meghana

Publisher: MeghanaThemes in package: 1

A warm pixel-art inspired dark theme for VS Code with ember-glow syntax and retro dashboard vibes.

VS Code preview

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

Pixel Dark — Pixel Dark

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#21252B
activityBar.foreground#61AFEF
button.background#61AFEF
button.hoverBackground#528BFF
editor.background#282C34
editor.foreground#ABB2BF
editor.lineHighlightBackground#2C313C
editor.selectionBackground#3E4451AA
editor.selectionHighlightBackground#3E445180
editor.wordHighlightBackground#61AFEF30
editorCursor.foreground#E06C75
editorIndentGuide.activeBackground#61AFEF
editorIndentGuide.background#3B4048
scrollbarSlider.background#3E4451AA
scrollbarSlider.hoverBackground#3E4451CC
sideBar.background#21252B
sideBar.foreground#ABB2BF
sideBarSectionHeader.background#282C34
statusBar.background#21252B
statusBar.foreground#61AFEF
tab.activeBackground#282C34
tab.border#61AFEF
tab.inactiveBackground#21252B
titleBar.activeBackground#21252B
titleBar.activeForeground#ABB2BF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#5C6370	italic
keyword, storage.type, storage.modifier	#C678DD	bold
constant.numeric, constant.language, constant.character	#D19A66	—
string, constant.other.symbol	#98C379	—
variable, entity.name.variable	#E06C75	—
entity.name.function, support.function	#61AFEF	bold
entity.name.type, support.type	#E5C07B	—
punctuation, delimiter	#ABB2BF	—
invalid, invalid.illegal	#FFFFFF	—
markup.inserted	#98C379	underline
markup.deleted	#E06C75	underline

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