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 Versicolor

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	#DBC99F	—
source.js variable.other.property, source.js variable.other.member, source.ts variable.other.property, source.ts variable.other.member	#DBC99F	—
source.js constant.language, source.js variable.other.constant, source.ts constant.language, source.ts variable.other.constant	#F6CE55	—
source.js string, source.ts string	#A4AAB7	—
source.js constant.character.escape, source.ts constant.character.escape	#FFB86B	—
source.js constant.numeric, source.ts constant.numeric	#BF95F9	—
source.js entity.name.type, source.js support.type, source.ts entity.name.type, source.ts support.type	#8BE8FD	—
source.js entity.name.function, source.js support.function, source.ts entity.name.function, source.ts support.function	#52FA7C	—
source.js entity.name.function.call, source.js variable.function, source.ts entity.name.function.call, source.ts variable.function	#52FA7C	—
source.js keyword.operator, source.ts keyword.operator	#FF7AC6	—
source.js storage, source.js keyword, source.ts storage, source.ts keyword	#FF7AC6	—
source.js keyword.control, source.ts keyword.control	#FF7AC6	—
source.js keyword.control.return, source.ts keyword.control.return	#FF7AC6	—
source.js punctuation, source.ts punctuation	#F8F8F2	—
source.js punctuation.section, source.js punctuation.definition, source.ts punctuation.section, source.ts punctuation.definition	#F8F8F2	—
source.js comment, source.ts comment	#526284	—
meta.embedded.argiope.javascript variable	#DBC99F	—
meta.embedded.argiope.javascript variable.other.property, meta.embedded.argiope.javascript variable.other.member	#DBC99F	—
meta.embedded.argiope.javascript constant.language, meta.embedded.argiope.javascript variable.other.constant	#F6CE55	—
meta.embedded.argiope.javascript string	#A4AAB7	—
meta.embedded.argiope.javascript constant.character.escape	#FFB86B	—
meta.embedded.argiope.javascript constant.numeric	#BF95F9	—
meta.embedded.argiope.javascript entity.name.type, meta.embedded.argiope.javascript support.type	#8BE8FD	—
meta.embedded.argiope.javascript entity.name.function, meta.embedded.argiope.javascript support.function	#52FA7C	—
meta.embedded.argiope.javascript entity.name.function.call, meta.embedded.argiope.javascript variable.function	#52FA7C	—
meta.embedded.argiope.javascript keyword.operator	#FF7AC6	—
meta.embedded.argiope.javascript storage, meta.embedded.argiope.javascript keyword	#FF7AC6	—
meta.embedded.argiope.javascript keyword.control	#FF7AC6	—
meta.embedded.argiope.javascript keyword.control.return	#FF7AC6	—
meta.embedded.argiope.javascript punctuation	#F8F8F2	—
meta.embedded.argiope.javascript punctuation.section, meta.embedded.argiope.javascript punctuation.definition	#F8F8F2	—
meta.embedded.argiope.javascript comment	#526284	—
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	#526284	—