spyder-dark

Name: spyder-dark
Author: Flufficalness

Publisher: FlufficalnessThemes in package: 1

Python-centric syntax highlighting and background theme based off Spyder Dark in the Spyder python IDE

Open in VS Code GitHub

VS Code preview

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

spyder-dark — spyder-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.

editor.background#19232D
editor.foreground#ffffff
editor.lineHighlightBackground#3a424a
editorBracketHighlight.background#0bbe0b
editorBracketHighlight.unexpectedBracket.foreground#ff4340
editorCursor.foreground#F8F8F0
editorWhitespace.foreground#3B3A32

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#ffffff	—
comment	#999999	—
string	#b0e686	italic
constant.numeric	#faed5c	—
keyword, storage.type.function, storage.type.class, keyword.operator.logical	#c670e0	—
support.function.builtin, support.type, constant.language	#fab16c
entity.name.type.class, entity.name.function, support.function.magic	#57d6e4	bold
variable.language.special.self, variable.parameter.function.language.special.self, entity.name.function.decorator	#ee6772	italic
invalid	#ff4340
invalid.deprecated	#ff4340	—
source.python, keyword.operator, variable, meta.attribute	#ffffff	—

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