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 Focus_Dark

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
—	#c2c5bd	—
comment, constant, entity, invalid, keyword, markup, meta, storage, string, support, variable, source	#34373b	—
string.quoted, meta.paragraph, entity.name.section	#c5c8c6	—
text.tex.latex support.function.general.tex, support.function.section.latex, string.other.math.block.environment.latex, string.other.math.block.environment.latex support.function.general.tex, text.tex.latex string.other.math.tex, text.tex.latex constant.other.general.math.tex, text.tex.latex string.other.math.tex meta.group.braces.tex, text.tex.latex invalid.illegal.string	#999b99	—
string.quoted.double.html, string.quoted.double.xml	#34373b	—
markup.raw.inline.markdown, string.other.link.title.markdown, string.other.link.description.markdown, markup.quote.markdown	#c5c8c6	—
markup.underline.link.markdown, markup.underline.link.image.markdown	#999b99	—
meta.image.inline.markdown, meta.link.inline.markdown	#34373b	—

VS Code preview

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

MultiTheme — MultiTheme Focus_Light

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
—	#5a5a59	—
comment, constant, entity, invalid, keyword, markup, meta, storage, string, support, variable, source	#dfdfdf	—
string.quoted, meta.paragraph, entity.name.section	#5a5a59	—
text.tex.latex support.function.general.tex, support.function.section.latex, string.other.math.block.environment.latex, string.other.math.block.environment.latex support.function.general.tex, text.tex.latex string.other.math.tex, text.tex.latex constant.other.general.math.tex, text.tex.latex string.other.math.tex meta.group.braces.tex, text.tex.latex invalid.illegal.string	#999b99	—
string.quoted.double.html, string.quoted.double.xml	#dfdfdf	—
markup.raw.inline.markdown, string.other.link.title.markdown, string.other.link.description.markdown, markup.quote.markdown	#5a5a59	—
markup.underline.link.markdown, markup.underline.link.image.markdown	#999b99	—
meta.image.inline.markdown, meta.link.inline.markdown	#dfdfdf	—

VS Code preview

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

MultiTheme — MultiTheme Foggy-Evening

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
—	#d2d6e0	—
variable.parameter.function	#fafafa	bold
comment, punctuation.definition.comment	#4caf50
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array, punctuation.terminator	#9e9e9e
punctuation.separator, punctuation.section, meta.brace, meta.delimiter	#9e9e9e
keyword.operator	#9e9e9e
keyword	#03a9f4	bold
variable.declaration, variable.parameter, variable.other	#00bfa5
entity.name.filename.find-in-files	#ba68c8	bold
constant.numeric.line-number.match.find-in-files	#03a9f4	bold
entity.name.function, meta.require, support.function.any-method	#8bc34a	bold
support.class, entity.name.class, entity.name.type.class, entity.name.type.module, meta.class	#ba68c8	bold
keyword.other.special-method	#ba68c8	bold
storage	#03a9f4	bold
support	#f48fb1
string, entity.other.inherited-class, punctuation.definition.string, support.constant.property-value	#ff5252
constant.numeric	#ff6e40
constant.other.symbol	#ff6e40
none	#ff6e40
constant.language.boolean	#ff6e40
constant, support.constant, variable.language	#ff6e40
entity.name.tag, punctuation.definition.tag	#03a9f4
entity.other.attribute-name	#00bfa5
entity.other.attribute-name.id, punctuation.definition.entity	#00bfa5
meta.selector, meta.object-literal.key	#ba68c8
markup.heading punctuation.definition.heading, entity.name.section	#03a9f4	bold
keyword.other.unit	#ff6e40
markup.bold, punctuation.definition.bold	#ba68c8	bold
markup.italic, punctuation.definition.italic	#ba68c8	italic
markup.raw.inline	#ff5252
string.other.link	#fafafa	bold
meta.link	#03a9f4
markup.list	#ff6e40
markup.quote	#ff5252
meta.separator	#9e9e9e
markup.inserted	#4caf50
markup.deleted	#ff5252
markup.changed	#8bc34a
constant.other.color	#ff6e40
string.regexp	#ff6e40
constant.character.escape	#00bfa5
punctuation.section.embedded, variable.interpolation	#00bfa5
sublimelinter.mark.warning	#8bc34a	—
sublimelinter.gutter-mark	#8bc34a	—
sublimelinter.mark.error	#ff5252	—
invalid, invalid.illegal	#fafafa	bold
invalid.broken	#ff5252	bold
invalid.deprecated	#ff5252	bold
invalid.unimplemented	#ff5252	bold

VS Code preview

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

MultiTheme — MultiTheme Foggy-Morning

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
—	#3f4e5c	—
variable.parameter.function	#222222	bold
comment, punctuation.definition.comment	#00aa00
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array, punctuation.terminator	#bb9900
punctuation.separator, punctuation.section, meta.brace, meta.delimiter	#bb9900
keyword.operator	#bb9900
keyword	#0000cc	bold
variable.declaration, variable.parameter, variable.other	#0088aa
entity.name.filename.find-in-files	#aa00ee	bold
constant.numeric.line-number.match.find-in-files	#0000cc	bold
entity.name.function, meta.require, support.function.any-method	#0088aa	bold
support.class, entity.name.class, entity.name.type.class, entity.name.type.module, meta.class	#aa00ee	bold
keyword.other.special-method	#aa00ee	bold
storage	#0000cc	bold
support	#dd44aa
string, entity.other.inherited-class, punctuation.definition.string, support.constant.property-value	#cc0000
constant.numeric	#dd6600
constant.other.symbol	#dd6600
none	#dd6600
constant.language.boolean	#dd6600
constant, support.constant, variable.language	#dd6600
entity.name.tag, punctuation.definition.tag	#0000cc
entity.other.attribute-name	#0088aa
entity.other.attribute-name.id, punctuation.definition.entity	#0088aa
meta.selector, meta.object-literal.key	#aa00ee
markup.heading punctuation.definition.heading, entity.name.section	#0000cc	bold
keyword.other.unit	#dd6600
markup.bold, punctuation.definition.bold	#aa00ee	bold
markup.italic, punctuation.definition.italic	#aa00ee	italic
markup.raw.inline	#cc0000
string.other.link	#222222	bold
meta.link	#0000cc
markup.list	#dd6600
markup.quote	#bb9900
meta.separator	#bb9900
markup.inserted	#00aa00
markup.deleted	#cc0000
markup.changed	#bb9900
constant.other.color	#dd6600
string.regexp	#dd6600
constant.character.escape	#00aa00
punctuation.section.embedded, variable.interpolation	#aa00ee
sublimelinter.mark.warning	#bb9900	—
sublimelinter.gutter-mark	#bb9900	—
sublimelinter.mark.error	#cc0000	—
invalid, invalid.illegal	#f8f8f8	bold
invalid.broken	#cc0000	bold
invalid.deprecated	#cc0000	bold
invalid.unimplemented	#cc0000	bold