Argiope

Name: Argiope
Author: m4rsh

Publisher: m4rshThemes in package: 6

Argiope themes and tagged-template syntax highlighting for JavaScript and TypeScript.

Open in VS Code GitHub

Color themes

VS Code preview

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

Argiope — Argiope Aurantia

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+

colors

Workbench UI color keys from the theme JSON colors map.

editor.background#080A16
editor.foreground#F8F8F2
editor.selectionBackground#141739
editorCursor.foreground#F8F8F2
editorLineNumber.foreground#4B5163
editorWidget.background#21222C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source.js variable, source.ts variable	#C19945	—
source.js variable.other.property, source.js variable.other.member, source.ts variable.other.property, source.ts variable.other.member	#AF7E34	—
source.js constant.language, source.js variable.other.constant, source.ts constant.language, source.ts variable.other.constant	#D6CB65	—
source.js string, source.ts string	#976025	—
source.js constant.character.escape, source.ts constant.character.escape	#D6CB65	—
source.js constant.numeric, source.ts constant.numeric	#CEB355	—
source.js entity.name.type, source.js support.type, source.ts entity.name.type, source.ts support.type	#D9E076	—
source.js entity.name.function, source.js support.function, source.ts entity.name.function, source.ts support.function	#CEB355	—
source.js entity.name.function.call, source.js variable.function, source.ts entity.name.function.call, source.ts variable.function	#D6CB65	—
source.js keyword.operator, source.ts keyword.operator	#AF7E34	—
source.js storage, source.js keyword, source.ts storage, source.ts keyword	#A19C94	—
source.js keyword.control, source.ts keyword.control	#D6CB65	—
source.js keyword.control.return, source.ts keyword.control.return	#D9E076	—
source.js punctuation, source.ts punctuation	#969DA6	—
source.js punctuation.section, source.js punctuation.definition, source.ts punctuation.section, source.ts punctuation.definition	#4F565E	—
source.js comment, source.ts comment	#4F565E	—
meta.embedded.argiope.javascript variable	#C19945	—
meta.embedded.argiope.javascript variable.other.property, meta.embedded.argiope.javascript variable.other.member	#AF7E34	—
meta.embedded.argiope.javascript constant.language, meta.embedded.argiope.javascript variable.other.constant	#D6CB65	—
meta.embedded.argiope.javascript string	#976025	—
meta.embedded.argiope.javascript constant.character.escape	#D6CB65	—
meta.embedded.argiope.javascript constant.numeric	#CEB355	—
meta.embedded.argiope.javascript entity.name.type, meta.embedded.argiope.javascript support.type	#D9E076	—
meta.embedded.argiope.javascript entity.name.function, meta.embedded.argiope.javascript support.function	#CEB355	—
meta.embedded.argiope.javascript entity.name.function.call, meta.embedded.argiope.javascript variable.function	#D6CB65	—
meta.embedded.argiope.javascript keyword.operator	#AF7E34	—
meta.embedded.argiope.javascript storage, meta.embedded.argiope.javascript keyword	#A19C94	—
meta.embedded.argiope.javascript keyword.control	#D6CB65	—
meta.embedded.argiope.javascript keyword.control.return	#D9E076	—
meta.embedded.argiope.javascript punctuation	#969DA6	—
meta.embedded.argiope.javascript punctuation.section, meta.embedded.argiope.javascript punctuation.definition	#4F565E	—
meta.embedded.argiope.javascript comment	#4F565E	—
meta.embedded.argiope.html entity.name.tag, meta.embedded.argiope.html entity.other.attribute-name	#4CB0C0	—
meta.embedded.argiope.html entity.other.attribute-name	#4CB0C0	—
meta.embedded.argiope.html string	#A0E5F1	—
meta.embedded.argiope.html constant	#65C5D5	—
meta.embedded.argiope.html punctuation, meta.embedded.argiope.html meta.tag punctuation	#063A41	—
meta.embedded.argiope.html punctuation.definition.tag	#063A41	—
meta.embedded.argiope.html comment	#247B89	—
meta.embedded.argiope.svg entity.name.tag, meta.embedded.argiope.svg entity.other.attribute-name	#62A7DF	—
meta.embedded.argiope.svg entity.other.attribute-name	#62A7DF	—
meta.embedded.argiope.svg string	#B8DCFC	—
meta.embedded.argiope.svg constant	#80BBEE	—
meta.embedded.argiope.svg punctuation, meta.embedded.argiope.svg meta.tag punctuation	#093655	—
meta.embedded.argiope.svg punctuation.definition.tag	#093655	—
meta.embedded.argiope.svg comment	#2E74A9	—
meta.embedded.argiope.css entity.other.attribute-name.class, meta.embedded.argiope.css entity.name.tag	#48BA69	—
meta.embedded.argiope.css support.type.property-name, meta.embedded.argiope.css meta.property-name	#48BA69	—
meta.embedded.argiope.css string	#228342	—
meta.embedded.argiope.css constant, meta.embedded.argiope.css constant.numeric, meta.embedded.argiope.css support.constant	#5FD07D	—
meta.embedded.argiope.css entity.name.function	#5FD07D	—
meta.embedded.argiope.css keyword	#48BA69	—
meta.embedded.argiope.css punctuation	#4E5852	—
meta.embedded.argiope.css punctuation.section.block, meta.embedded.argiope.css punctuation.definition	#228342	—
meta.embedded.argiope.css comment	#228342	—
meta.embedded.argiope.markdown markup.heading	#EA70A5	—
meta.embedded.argiope.markdown markup.list	#B53773	—
meta.embedded.argiope.markdown markup.underline.link, meta.embedded.argiope.markdown string.other.link	#FFC4DA	—
meta.embedded.argiope.markdown string	#B53773	—
meta.embedded.argiope.markdown punctuation	#B53773	—
meta.embedded.argiope.markdown punctuation.definition	#5D0B36	—
meta.embedded.argiope.glsl variable	#9791F6	—
meta.embedded.argiope.glsl storage.type, meta.embedded.argiope.glsl entity.name.type	#D3D3FF	—
meta.embedded.argiope.glsl entity.name.function, meta.embedded.argiope.glsl support.function	#ADAAFD	—
meta.embedded.argiope.glsl constant	#C1C0FF	—
meta.embedded.argiope.glsl string	#6855D5	—
meta.embedded.argiope.glsl constant.numeric	#ADAAFD	—
meta.embedded.argiope.glsl keyword	#9B9BAA	—
meta.embedded.argiope.glsl keyword.control	#C1C0FF	—
meta.embedded.argiope.glsl keyword.operator	#8075EA	—
meta.embedded.argiope.glsl punctuation	#9B9BAA	—
meta.embedded.argiope.glsl punctuation.section, meta.embedded.argiope.glsl punctuation.definition	#545462	—
meta.embedded.argiope.glsl comment	#545462	—
meta.embedded.argiope.wgsl variable	#C07EED	—
meta.embedded.argiope.wgsl storage.type, meta.embedded.argiope.wgsl entity.name.type	#E7CAFF	—
meta.embedded.argiope.wgsl entity.name.function, meta.embedded.argiope.wgsl support.function	#D09AF8	—
meta.embedded.argiope.wgsl constant	#DDB3FD	—
meta.embedded.argiope.wgsl string	#9141C1	—
meta.embedded.argiope.wgsl constant.numeric	#D09AF8	—
meta.embedded.argiope.wgsl keyword	#A199A7	—
meta.embedded.argiope.wgsl keyword.control	#DDB3FD	—
meta.embedded.argiope.wgsl keyword.operator	#AB60DC	—
meta.embedded.argiope.wgsl punctuation	#A099A8	—
meta.embedded.argiope.wgsl punctuation.section, meta.embedded.argiope.wgsl punctuation.definition	#585260	—
meta.embedded.argiope.wgsl comment	#585260	—
meta.interpolation.argiope punctuation.section.interpolation.begin, meta.interpolation.argiope punctuation.section.interpolation.end	#4F565E	—

VS Code preview

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

Argiope — Argiope Aurantia Neon

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+

colors

Workbench UI color keys from the theme JSON colors map.

editor.background#05070B
editor.foreground#F2F5FA
editor.selectionBackground#243657
editorCursor.foreground#F2F5FA
editorLineNumber.foreground#5D6B82
editorWidget.background#0E1420

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source.js variable, source.ts variable	#F1BC45	—
source.js variable.other.property, source.js variable.other.member, source.ts variable.other.property, source.ts variable.other.member	#EAA32F	—
source.js constant.language, source.js variable.other.constant, source.ts constant.language, source.ts variable.other.constant	#F5E664	—
source.js string, source.ts string	#DD8924	—
source.js constant.character.escape, source.ts constant.character.escape	#F5E664	—
source.js constant.numeric, source.ts constant.numeric	#F4D258	—
source.js entity.name.type, source.js support.type, source.ts entity.name.type, source.ts support.type	#F0F977	—
source.js entity.name.function, source.js support.function, source.ts entity.name.function, source.ts support.function	#F4D258	—
source.js entity.name.function.call, source.js variable.function, source.ts entity.name.function.call, source.ts variable.function	#F5E664	—
source.js keyword.operator, source.ts keyword.operator	#EAA32F	—
source.js storage, source.js keyword, source.ts storage, source.ts keyword	#BBB6AF	—
source.js keyword.control, source.ts keyword.control	#F5E664	—
source.js keyword.control.return, source.ts keyword.control.return	#F0F977	—
source.js punctuation, source.ts punctuation	#B1B8C0	—
source.js punctuation.section, source.js punctuation.definition, source.ts punctuation.section, source.ts punctuation.definition	#6B727B	—
source.js comment, source.ts comment	#6B727B	—
meta.embedded.argiope.javascript variable	#F1BC45	—
meta.embedded.argiope.javascript variable.other.property, meta.embedded.argiope.javascript variable.other.member	#EAA32F	—
meta.embedded.argiope.javascript constant.language, meta.embedded.argiope.javascript variable.other.constant	#F5E664	—
meta.embedded.argiope.javascript string	#DD8924	—
meta.embedded.argiope.javascript constant.character.escape	#F5E664	—
meta.embedded.argiope.javascript constant.numeric	#F4D258	—
meta.embedded.argiope.javascript entity.name.type, meta.embedded.argiope.javascript support.type	#F0F977	—
meta.embedded.argiope.javascript entity.name.function, meta.embedded.argiope.javascript support.function	#F4D258	—
meta.embedded.argiope.javascript entity.name.function.call, meta.embedded.argiope.javascript variable.function	#F5E664	—
meta.embedded.argiope.javascript keyword.operator	#EAA32F	—
meta.embedded.argiope.javascript storage, meta.embedded.argiope.javascript keyword	#BBB6AF	—
meta.embedded.argiope.javascript keyword.control	#F5E664	—
meta.embedded.argiope.javascript keyword.control.return	#F0F977	—
meta.embedded.argiope.javascript punctuation	#B1B8C0	—
meta.embedded.argiope.javascript punctuation.section, meta.embedded.argiope.javascript punctuation.definition	#6B727B	—
meta.embedded.argiope.javascript comment	#6B727B	—
meta.embedded.argiope.html entity.name.tag, meta.embedded.argiope.html entity.other.attribute-name	#4CDAF0	—
meta.embedded.argiope.html entity.other.attribute-name	#4CDAF0	—
meta.embedded.argiope.html string	#CFF7FE	—
meta.embedded.argiope.html constant	#7FE6F8	—
meta.embedded.argiope.html punctuation, meta.embedded.argiope.html meta.tag punctuation	#0D808F	—
meta.embedded.argiope.html punctuation.definition.tag	#0D808F	—
meta.embedded.argiope.html comment	#1FB3C7	—
meta.embedded.argiope.svg entity.name.tag, meta.embedded.argiope.svg entity.other.attribute-name	#90CCFF	—
meta.embedded.argiope.svg entity.other.attribute-name	#90CCFF	—
meta.embedded.argiope.svg string	#E1F1FF	—
meta.embedded.argiope.svg constant	#AFDAFF	—
meta.embedded.argiope.svg punctuation, meta.embedded.argiope.svg meta.tag punctuation	#1477B8	—
meta.embedded.argiope.svg punctuation.definition.tag	#1477B8	—
meta.embedded.argiope.svg comment	#42A7F3	—
meta.embedded.argiope.css entity.other.attribute-name.class, meta.embedded.argiope.css entity.name.tag	#36E976	—
meta.embedded.argiope.css support.type.property-name, meta.embedded.argiope.css meta.property-name	#36E976	—
meta.embedded.argiope.css string	#1DBE5C	—
meta.embedded.argiope.css constant, meta.embedded.argiope.css constant.numeric, meta.embedded.argiope.css support.constant	#68F690	—
meta.embedded.argiope.css entity.name.function	#68F690	—
meta.embedded.argiope.css keyword	#36E976	—
meta.embedded.argiope.css punctuation	#6A756E	—
meta.embedded.argiope.css punctuation.section.block, meta.embedded.argiope.css punctuation.definition	#1DBE5C	—
meta.embedded.argiope.css comment	#1DBE5C	—
meta.embedded.argiope.markdown markup.heading	#FFA6C8	—
meta.embedded.argiope.markdown markup.list	#FB5CA6	—
meta.embedded.argiope.markdown markup.underline.link, meta.embedded.argiope.markdown string.other.link	#FFE7EF	—
meta.embedded.argiope.markdown string	#FB5CA6	—
meta.embedded.argiope.markdown punctuation	#FB5CA6	—
meta.embedded.argiope.markdown punctuation.definition	#C71978	—
meta.embedded.argiope.glsl variable	#BEBDFF	—
meta.embedded.argiope.glsl storage.type, meta.embedded.argiope.glsl entity.name.type	#ECEDFF	—
meta.embedded.argiope.glsl entity.name.function, meta.embedded.argiope.glsl support.function	#CFCFFF	—
meta.embedded.argiope.glsl constant	#DEDFFF	—
meta.embedded.argiope.glsl string	#978EFF	—
meta.embedded.argiope.glsl constant.numeric	#CFCFFF	—
meta.embedded.argiope.glsl keyword	#B5B6C4	—
meta.embedded.argiope.glsl keyword.control	#DEDFFF	—
meta.embedded.argiope.glsl keyword.operator	#ABA7FF	—
meta.embedded.argiope.glsl punctuation	#B5B6C4	—
meta.embedded.argiope.glsl punctuation.section, meta.embedded.argiope.glsl punctuation.definition	#70707F	—
meta.embedded.argiope.glsl comment	#70707F	—
meta.embedded.argiope.wgsl variable	#DDAFFF	—
meta.embedded.argiope.wgsl storage.type, meta.embedded.argiope.wgsl entity.name.type	#F5E9FF	—
meta.embedded.argiope.wgsl entity.name.function, meta.embedded.argiope.wgsl support.function	#E6C5FF	—
meta.embedded.argiope.wgsl constant	#EED8FF	—
meta.embedded.argiope.wgsl string	#C673FD	—
meta.embedded.argiope.wgsl constant.numeric	#E6C5FF	—
meta.embedded.argiope.wgsl keyword	#BBB4C2	—
meta.embedded.argiope.wgsl keyword.control	#EED8FF	—
meta.embedded.argiope.wgsl keyword.operator	#D294FF	—
meta.embedded.argiope.wgsl punctuation	#BAB4C2	—
meta.embedded.argiope.wgsl punctuation.section, meta.embedded.argiope.wgsl punctuation.definition	#756E7D	—
meta.embedded.argiope.wgsl comment	#756E7D	—
meta.interpolation.argiope punctuation.section.interpolation.begin, meta.interpolation.argiope punctuation.section.interpolation.end	#6B727B	—

VS Code preview

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

Argiope — Argiope Ocyaloides

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+

colors

Workbench UI color keys from the theme JSON colors map.

editor.background#151719
editor.foreground#C7C9C8
editor.selectionBackground#292D31
editorCursor.foreground#C7C9C8
editorLineNumber.foreground#50565A
editorWidget.background#1D2023

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source.js variable, source.ts variable	#95979B	—
source.js variable.other.property, source.js variable.other.member, source.ts variable.other.property, source.ts variable.other.member	#838689	—
source.js constant.language, source.js variable.other.constant, source.ts constant.language, source.ts variable.other.constant	#B4B7BA	—
source.js string, source.ts string	#707276	—
source.js constant.character.escape, source.ts constant.character.escape	#B4B7BA	—
source.js constant.numeric, source.ts constant.numeric	#A5A8AB	—
source.js entity.name.type, source.js support.type, source.ts entity.name.type, source.ts support.type	#C2C4C7	—
source.js entity.name.function, source.js support.function, source.ts entity.name.function, source.ts support.function	#A5A8AB	—
source.js entity.name.function.call, source.js variable.function, source.ts entity.name.function.call, source.ts variable.function	#B4B7BA	—
source.js keyword.operator, source.ts keyword.operator	#838689	—
source.js storage, source.js keyword, source.ts storage, source.ts keyword	#888B8D	—
source.js keyword.control, source.ts keyword.control	#B4B7BA	—
source.js keyword.control.return, source.ts keyword.control.return	#C2C4C7	—
source.js punctuation, source.ts punctuation	#888B8D	—
source.js punctuation.section, source.js punctuation.definition, source.ts punctuation.section, source.ts punctuation.definition	#515355	—
source.js comment, source.ts comment	#515355	—
meta.embedded.argiope.javascript variable	#95979B	—
meta.embedded.argiope.javascript variable.other.property, meta.embedded.argiope.javascript variable.other.member	#838689	—
meta.embedded.argiope.javascript constant.language, meta.embedded.argiope.javascript variable.other.constant	#B4B7BA	—
meta.embedded.argiope.javascript string	#707276	—
meta.embedded.argiope.javascript constant.character.escape	#B4B7BA	—
meta.embedded.argiope.javascript constant.numeric	#A5A8AB	—
meta.embedded.argiope.javascript entity.name.type, meta.embedded.argiope.javascript support.type	#C2C4C7	—
meta.embedded.argiope.javascript entity.name.function, meta.embedded.argiope.javascript support.function	#A5A8AB	—
meta.embedded.argiope.javascript entity.name.function.call, meta.embedded.argiope.javascript variable.function	#B4B7BA	—
meta.embedded.argiope.javascript keyword.operator	#838689	—
meta.embedded.argiope.javascript storage, meta.embedded.argiope.javascript keyword	#888B8D	—
meta.embedded.argiope.javascript keyword.control	#B4B7BA	—
meta.embedded.argiope.javascript keyword.control.return	#C2C4C7	—
meta.embedded.argiope.javascript punctuation	#888B8D	—
meta.embedded.argiope.javascript punctuation.section, meta.embedded.argiope.javascript punctuation.definition	#515355	—
meta.embedded.argiope.javascript comment	#515355	—
meta.embedded.argiope.html entity.name.tag, meta.embedded.argiope.html entity.other.attribute-name	#6FA1AA	—
meta.embedded.argiope.html entity.other.attribute-name	#6FA1AA	—
meta.embedded.argiope.html string	#A1CDD5	—
meta.embedded.argiope.html constant	#80B1BA	—
meta.embedded.argiope.html punctuation, meta.embedded.argiope.html meta.tag punctuation	#254F56	—
meta.embedded.argiope.html punctuation.definition.tag	#254F56	—
meta.embedded.argiope.html comment	#4B7B84	—
meta.embedded.argiope.svg entity.name.tag, meta.embedded.argiope.svg entity.other.attribute-name	#769CBC	—
meta.embedded.argiope.svg entity.other.attribute-name	#769CBC	—
meta.embedded.argiope.svg string	#A9C8E4	—
meta.embedded.argiope.svg constant	#88ACCC	—
meta.embedded.argiope.svg punctuation, meta.embedded.argiope.svg meta.tag punctuation	#2A4B66	—
meta.embedded.argiope.svg punctuation.definition.tag	#2A4B66	—
meta.embedded.argiope.svg comment	#517696	—
meta.embedded.argiope.css entity.other.attribute-name.class, meta.embedded.argiope.css entity.name.tag	#6DA779	—
meta.embedded.argiope.css support.type.property-name, meta.embedded.argiope.css meta.property-name	#6DA779	—
meta.embedded.argiope.css string	#498156	—
meta.embedded.argiope.css constant, meta.embedded.argiope.css constant.numeric, meta.embedded.argiope.css support.constant	#7EB88A	—
meta.embedded.argiope.css entity.name.function	#7EB88A	—
meta.embedded.argiope.css keyword	#6DA779	—
meta.embedded.argiope.css punctuation	#505351	—
meta.embedded.argiope.css punctuation.section.block, meta.embedded.argiope.css punctuation.definition	#498156	—
meta.embedded.argiope.css comment	#498156	—
meta.embedded.argiope.markdown markup.heading	#C77E9A	—
meta.embedded.argiope.markdown markup.list	#A05875	—
meta.embedded.argiope.markdown markup.underline.link, meta.embedded.argiope.markdown string.other.link	#EDB0C7	—
meta.embedded.argiope.markdown string	#A05875	—
meta.embedded.argiope.markdown punctuation	#A05875	—
meta.embedded.argiope.markdown punctuation.definition	#6E2F4A	—
meta.embedded.argiope.glsl variable	#918ED3	—
meta.embedded.argiope.glsl storage.type, meta.embedded.argiope.glsl entity.name.type	#BFBEF2	—
meta.embedded.argiope.glsl entity.name.function, meta.embedded.argiope.glsl support.function	#A19FE0	—
meta.embedded.argiope.glsl constant	#B0AFEA	—
meta.embedded.argiope.glsl string	#6C68AF	—
meta.embedded.argiope.glsl constant.numeric	#A19FE0	—
meta.embedded.argiope.glsl keyword	#8A8A8F	—
meta.embedded.argiope.glsl keyword.control	#B0AFEA	—
meta.embedded.argiope.glsl keyword.operator	#7F7CC3	—
meta.embedded.argiope.glsl punctuation	#8A8A8F	—
meta.embedded.argiope.glsl punctuation.section, meta.embedded.argiope.glsl punctuation.definition	#525256	—
meta.embedded.argiope.glsl comment	#525256	—
meta.embedded.argiope.wgsl variable	#AB84C8	—
meta.embedded.argiope.wgsl storage.type, meta.embedded.argiope.wgsl entity.name.type	#D4B6EC	—
meta.embedded.argiope.wgsl entity.name.function, meta.embedded.argiope.wgsl support.function	#BB96D7	—
meta.embedded.argiope.wgsl constant	#C8A6E3	—
meta.embedded.argiope.wgsl string	#865EA3	—
meta.embedded.argiope.wgsl constant.numeric	#BB96D7	—
meta.embedded.argiope.wgsl keyword	#8C898E	—
meta.embedded.argiope.wgsl keyword.control	#C8A6E3	—
meta.embedded.argiope.wgsl keyword.operator	#9A72B7	—
meta.embedded.argiope.wgsl punctuation	#8B898E	—
meta.embedded.argiope.wgsl punctuation.section, meta.embedded.argiope.wgsl punctuation.definition	#535156	—
meta.embedded.argiope.wgsl comment	#535156	—
meta.interpolation.argiope punctuation.section.interpolation.begin, meta.interpolation.argiope punctuation.section.interpolation.end	#515355	—

VS Code preview

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

Argiope — Argiope Trifasciata

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

editor.background#F7F5EF
editor.foreground#25282D
editor.selectionBackground#DBE5F3
editorCursor.foreground#FAEB42
editorLineNumber.foreground#9A9DA0
editorWidget.background#EBE8DF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source.js variable, source.ts variable	#393939	—
source.js variable.other.property, source.js variable.other.member, source.ts variable.other.property, source.ts variable.other.member	#454545	—
source.js constant.language, source.js variable.other.constant, source.ts constant.language, source.ts variable.other.constant	#1F1F1F	—
source.js string, source.ts string	#525252	—
source.js constant.character.escape, source.ts constant.character.escape	#1F1F1F	—
source.js constant.numeric, source.ts constant.numeric	#2C2C2C	—
source.js entity.name.type, source.js support.type, source.ts entity.name.type, source.ts support.type	#121212	—
source.js entity.name.function, source.js support.function, source.ts entity.name.function, source.ts support.function	#2C2C2C	—
source.js entity.name.function.call, source.js variable.function, source.ts entity.name.function.call, source.ts variable.function	#1F1F1F	—
source.js keyword.operator, source.ts keyword.operator	#454545	—
source.js storage, source.js keyword, source.ts storage, source.ts keyword	#535353	—
source.js keyword.control, source.ts keyword.control	#1F1F1F	—
source.js keyword.control.return, source.ts keyword.control.return	#121212	—
source.js punctuation, source.ts punctuation	#535353	—
source.js punctuation.section, source.js punctuation.definition, source.ts punctuation.section, source.ts punctuation.definition	#747474	—
source.js comment, source.ts comment	#747474	—
meta.embedded.argiope.javascript variable	#393939	—
meta.embedded.argiope.javascript variable.other.property, meta.embedded.argiope.javascript variable.other.member	#454545	—
meta.embedded.argiope.javascript constant.language, meta.embedded.argiope.javascript variable.other.constant	#1F1F1F	—
meta.embedded.argiope.javascript string	#525252	—
meta.embedded.argiope.javascript constant.character.escape	#1F1F1F	—
meta.embedded.argiope.javascript constant.numeric	#2C2C2C	—
meta.embedded.argiope.javascript entity.name.type, meta.embedded.argiope.javascript support.type	#121212	—
meta.embedded.argiope.javascript entity.name.function, meta.embedded.argiope.javascript support.function	#2C2C2C	—
meta.embedded.argiope.javascript entity.name.function.call, meta.embedded.argiope.javascript variable.function	#1F1F1F	—
meta.embedded.argiope.javascript keyword.operator	#454545	—
meta.embedded.argiope.javascript storage, meta.embedded.argiope.javascript keyword	#535353	—
meta.embedded.argiope.javascript keyword.control	#1F1F1F	—
meta.embedded.argiope.javascript keyword.control.return	#121212	—
meta.embedded.argiope.javascript punctuation	#535353	—
meta.embedded.argiope.javascript punctuation.section, meta.embedded.argiope.javascript punctuation.definition	#747474	—
meta.embedded.argiope.javascript comment	#747474	—
meta.embedded.argiope.html entity.name.tag, meta.embedded.argiope.html entity.other.attribute-name	#003280	—
meta.embedded.argiope.html entity.other.attribute-name	#003280	—
meta.embedded.argiope.html string	#000F31	—
meta.embedded.argiope.html constant	#002766	—
meta.embedded.argiope.html punctuation, meta.embedded.argiope.html meta.tag punctuation	#005DE0	—
meta.embedded.argiope.html punctuation.definition.tag	#005DE0	—
meta.embedded.argiope.html comment	#0048B1	—
meta.embedded.argiope.svg entity.name.tag, meta.embedded.argiope.svg entity.other.attribute-name	#003C62	—
meta.embedded.argiope.svg entity.other.attribute-name	#003C62	—
meta.embedded.argiope.svg string	#001324	—
meta.embedded.argiope.svg constant	#002F4E	—
meta.embedded.argiope.svg punctuation, meta.embedded.argiope.svg meta.tag punctuation	#006EAE	—
meta.embedded.argiope.svg punctuation.definition.tag	#006EAE	—
meta.embedded.argiope.svg comment	#00568A	—
meta.embedded.argiope.css entity.other.attribute-name.class, meta.embedded.argiope.css entity.name.tag	#00461C	—
meta.embedded.argiope.css support.type.property-name, meta.embedded.argiope.css meta.property-name	#00461C	—
meta.embedded.argiope.css string	#00632A	—
meta.embedded.argiope.css constant, meta.embedded.argiope.css constant.numeric, meta.embedded.argiope.css support.constant	#003714	—
meta.embedded.argiope.css entity.name.function	#003714	—
meta.embedded.argiope.css keyword	#00461C	—
meta.embedded.argiope.css punctuation	#747474	—
meta.embedded.argiope.css punctuation.section.block, meta.embedded.argiope.css punctuation.definition	#00632A	—
meta.embedded.argiope.css comment	#00632A	—
meta.embedded.argiope.markdown markup.heading	#6B003D	—
meta.embedded.argiope.markdown markup.list	#950057	—
meta.embedded.argiope.markdown markup.underline.link, meta.embedded.argiope.markdown string.other.link	#280013	—
meta.embedded.argiope.markdown string	#950057	—
meta.embedded.argiope.markdown punctuation	#950057	—
meta.embedded.argiope.markdown punctuation.definition	#BC006F	—
meta.embedded.argiope.glsl variable	#390099	—
meta.embedded.argiope.glsl storage.type, meta.embedded.argiope.glsl entity.name.type	#12003C	—
meta.embedded.argiope.glsl entity.name.function, meta.embedded.argiope.glsl support.function	#2D007B	—
meta.embedded.argiope.glsl constant	#20005D	—
meta.embedded.argiope.glsl string	#5200D4	—
meta.embedded.argiope.glsl constant.numeric	#2D007B	—
meta.embedded.argiope.glsl keyword	#535353	—
meta.embedded.argiope.glsl keyword.control	#20005D	—
meta.embedded.argiope.glsl keyword.operator	#4600B7	—
meta.embedded.argiope.glsl punctuation	#535353	—
meta.embedded.argiope.glsl punctuation.section, meta.embedded.argiope.glsl punctuation.definition	#747474	—
meta.embedded.argiope.glsl comment	#747474	—
meta.embedded.argiope.wgsl variable	#54007A	—
meta.embedded.argiope.wgsl storage.type, meta.embedded.argiope.wgsl entity.name.type	#1E002E	—
meta.embedded.argiope.wgsl entity.name.function, meta.embedded.argiope.wgsl support.function	#420061	—
meta.embedded.argiope.wgsl constant	#300048	—
meta.embedded.argiope.wgsl string	#7600A9	—
meta.embedded.argiope.wgsl constant.numeric	#420061	—
meta.embedded.argiope.wgsl keyword	#535353	—
meta.embedded.argiope.wgsl keyword.control	#300048	—
meta.embedded.argiope.wgsl keyword.operator	#650092	—
meta.embedded.argiope.wgsl punctuation	#535353	—
meta.embedded.argiope.wgsl punctuation.section, meta.embedded.argiope.wgsl punctuation.definition	#747474	—
meta.embedded.argiope.wgsl comment	#747474	—
meta.interpolation.argiope punctuation.section.interpolation.begin, meta.interpolation.argiope punctuation.section.interpolation.end	#747474	—