MultiTheme

Name: MultiTheme
Author: Arturo Arevalo

Publisher: Arturo ArevaloThemes in package: 336

A collection of themes ported from TextMate

Open in VS Code

Color themes

VS Code preview

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

MultiTheme — MultiTheme those_lights

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+

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#B0B0B0	—
variable.parameter.function	#359923	—
comment, punctuation.definition.comment	#766e6b	italic
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array	#a8a19f	—
none	#a8a19f	—
keyword.operator	#a8a19f	—
keyword	#2BA4BD	—
variable	#3DBAD4	—
entity.name.function, meta.require, support.function.any-method	#2BA4BD	—
support.class, entity.name.class, entity.name.type.class	#C2921B	—
meta.class	#f1efee	—
keyword.other.special-method	#2BA4BD	—
storage	#A6A623	—
support.function	#3d97b8	—
string, constant.other.symbol, entity.other.inherited-class	#E34F4F	—
constant.numeric	#A6A623	—
none	#A6A623	—
none	#A6A623	—
constant	#A6A623	—
entity.name.tag	#CC7F21	—
entity.other.attribute-name	#A6A623	—
entity.other.attribute-name.id, punctuation.definition.entity	#5885D1	—
meta.selector	#2BA4BD	—
none	#A6A623	—
markup.heading punctuation.definition.heading, entity.name.section	#2BA4BD
keyword.other.unit	#A6A623	—
markup.bold, punctuation.definition.bold	#C2921B	bold
markup.italic, punctuation.definition.italic	#2BA4BD	italic
markup.raw.inline	#7b9726	—
string.other.link, punctuation.definition.string.end.markdown	#E02B3D	—
meta.link	#A6A623	—
markup.list	#E02B3D	—
markup.quote	#A6A623	—
meta.separator	#a8a19f	—
markup.inserted	#7b9726	—
markup.deleted	#E02B3D	—
markup.changed	#2BA4BD	—
constant.other.color	#3d97b8	—
string.regexp	#3d97b8	—
constant.character.escape	#3d97b8	—
punctuation.section.embedded, variable.interpolation	#2BA4BD	—
invalid.illegal	#f1efee	—
invalid.broken	#1b1918	—
invalid.deprecated	#f1efee	—
invalid.unimplemented	#f1efee	—

VS Code preview

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

MultiTheme — MultiTheme Tireless

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+

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#7a7a7a	—
comment	#313e39	—
string	#24603f	—
constant.numeric	#7a7a7a	—
constant.language	#7a7a7a	—
constant.character, constant.other	#808080	—
variable	#7a7a7a	—
keyword	#224871	—
storage	#224871
storage.type	#808080	—
entity.name.class	#7a7a7a	—
entity.other.inherited-class	#224871	—
entity.name.function	#7a7a7a
variable.parameter	#7a7a7a	—
entity.name.tag	#224871
entity.other.attribute-name	#224871
support.function	#224871	—
support.constant	#224871	—
support.type, support.class	#224871	—
support.other.variable	—
invalid	#db891a
invalid.deprecated	#000000	—

VS Code preview

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

MultiTheme — MultiTheme Tomorrow

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+

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#4D4D4C	—
comment	#8E908C	—
keyword.operator.class, constant.other, source.php.embedded.line	#666969
variable, support.other.variable, string.other.link, string.regexp, entity.name.tag, entity.other.attribute-name, meta.tag, declaration.tag	#C82829	—
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, punctuation.section.embedded, keyword.other.unit	#F5871F
entity.name.class, entity.name.type.class, support.type, support.class	#C99E00
string, constant.other.symbol, entity.other.inherited-class, markup.heading	#718C00
keyword.operator, constant.other.color	#3E999F	—
entity.name.function, meta.function-call, support.function, keyword.other.special-method, meta.block-level	#4271AE
keyword, storage, storage.type	#8959A8
invalid	#FFFFFF
meta.separator	#FFFFFF	—
invalid.deprecated	#FFFFFF

VS Code preview

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

MultiTheme — MultiTheme Tomorrow_Night

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+

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#C5C8C6	—
comment	#969896	—
keyword.operator.class, constant.other, source.php.embedded.line	#CED1CF
variable, support.other.variable, string.other.link, string.regexp, entity.name.tag, entity.other.attribute-name, meta.tag, declaration.tag	#CC6666	—
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, punctuation.section.embedded, keyword.other.unit	#DE935F
entity.name.class, entity.name.type.class, support.type, support.class	#F0C674
string, constant.other.symbol, entity.other.inherited-class, markup.heading	#B5BD68
keyword.operator, constant.other.color	#8ABEB7	—
entity.name.function, meta.function-call, support.function, keyword.other.special-method, meta.block-level	#81A2BE
keyword, storage, storage.type, entity.name.tag.css	#B294BB
invalid	#CED2CF
meta.separator	#CED2CF	—
invalid.deprecated	#CED2CF