Spider Theme Suite

Name: Spider Theme Suite
Author: Akila Wasalathilaka

Publisher: Akila WasalathilakaThemes in package: 10

Minimalist, high-performance spider-inspired theme suite engineered for visual focus and eye comfort.

Open in VS Code GitHub

Color themes

VS Code preview

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

Spider Theme Suite — Absolute Carnage

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.

activityBar.background#0A0B0E
activityBar.border#0A0B0E
activityBar.foreground#FF9F1C
activityBar.inactiveForeground#A288A673
diffEditor.diagonalFill#A288A640
diffEditor.insertedLineBackground#98C37910
diffEditor.insertedTextBackground#98C3791A
diffEditor.removedLineBackground#E06C7510
diffEditor.removedTextBackground#E06C751A
editor.background#111217
editor.findMatchBackground#E5C07B80
editor.findMatchHighlightBackground#E5C07B30
editor.findRangeHighlightBackground#E5C07B1A
editor.foreground#CED4DA
editor.inactiveSelectionBackground#20222B80
editor.lineHighlightBackground#16181F
editor.selectionBackground#20222B
editor.selectionHighlightBackground#20222BA0
editor.wordHighlightBackground#20222BA0
editor.wordHighlightStrongBackground#FF9F1C30
editorBracketMatch.background#FF9F1C40
editorBracketMatch.border#FF9F1CA0
editorCursor.foreground#FF9F1C
editorGroupHeader.tabsBackground#0E0E12
editorIndentGuide.activeBackground#A288A690
editorIndentGuide.background#A288A640
editorLineNumber.activeForeground#CED4DA
editorLineNumber.foreground#A288A690
editorWhitespace.foreground#A288A660
focusBorder#FF9F1C40
foreground#CED4DA
gitDecoration.addedResourceForeground#98C379
gitDecoration.conflictingResourceForeground#E63946
gitDecoration.deletedResourceForeground#E06C75
gitDecoration.ignoredResourceForeground#A288A6B3
gitDecoration.modifiedResourceForeground#FF9F1C
gitDecoration.untrackedResourceForeground#56B6C2
list.deemphasizedForeground#A288A6B3
panel.background#111217
sideBar.background#0E0E12
sideBar.border#0E0E12
sideBar.foreground#CED4DA
sideBarSectionHeader.background#0E0E12
statusBar.background#08090C
statusBar.border#08090C
statusBar.debuggingBackground#E5C07B40
statusBar.foreground#CED4DA
statusBar.noFolderBackground#08090C
tab.activeBackground#111217
tab.inactiveBackground#0E0E12
terminal.ansiBlack#0A0B0E
terminal.ansiBlue#FF9F1C
terminal.ansiBrightBlack#A288A6
terminal.ansiBrightBlue#FF9F1C
terminal.ansiBrightCyan#56B6C2
terminal.ansiBrightGreen#98C379
terminal.ansiBrightMagenta#E63946
terminal.ansiBrightRed#E06C75
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#E5C07B
terminal.ansiCyan#56B6C2
terminal.ansiGreen#98C379
terminal.ansiMagenta#E63946
terminal.ansiRed#E06C75
terminal.ansiWhite#CED4DA
terminal.ansiYellow#E5C07B
terminal.background#111217
terminal.foreground#CED4DA
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#A288A6	italic
comment.keyword.todo, comment.line.todo	#D19A66	bold
comment.keyword.fixme, comment.line.fixme	#E06C75	bold underline
comment.keyword.note, comment.line.note	#61AFEF	bold
comment.keyword.warning, comment.line.warning	#E5C07B	bold
comment.keyword.hack, comment.line.hack	#C678DD	bold
punctuation, meta.brace, meta.delimiter	#ABB2BFD9	—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison	#ABB2BFD9	—
keyword, storage, storage.type	#FF4D4D	—
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch, keyword.control.return	#FF4D4D	bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as	#FF4D4D	italic
entity.name.function, meta.function-call, support.function	#FF9F1C	—
variable.function, meta.function-call.generic	#FF9F1C	—
entity.name.type, entity.name.class, support.class, entity.name.type.class, entity.name.type.struct, entity.name.type.enum	#E63946	—
entity.name.type.interface, entity.name.type.trait	#E63946	italic
support.type.primitive, support.type.builtin, storage.type.numeric.go, storage.type.boolean.go, storage.type.string.go	#56B6C2	—
variable, variable.other.readwrite, variable.other.object	#CED4DA	—
variable.parameter, meta.parameter	#56B6C2	italic
variable.language, variable.parameter.function.language.special.self, variable.parameter.function.language.special.cls	#FF4D4D	italic
variable.other.property, meta.object-literal.key, support.type.property-name	#CED4DA	—
string, string.quoted, string.template	#2EC4B6	—
constant.character.escape, constant.other.placeholder	#FF4D4D	bold
constant.numeric, keyword.other.unit	#D19A66	—
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined	#D19A66	bold
variable.other.constant, entity.name.constant	#E5C07B	bold
entity.name.tag, entity.name.tag.html, entity.name.tag.xml, entity.name.tag.js, entity.name.tag.jsx, entity.name.tag.tsx	#FF4D4D	—
support.class.component, entity.name.tag.custom	#E63946	bold
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx	#56B6C2	italic
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end	#ABB2BFD9	—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less	#56B6C2	—
support.constant.property-value.css, meta.property-value.css, support.constant.color	#2EC4B6	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#E63946	bold
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#C678DD	italic
variable.argument.css, variable.css, variable.scss	#CED4DA	—
meta.function.decorator.python, entity.name.function.decorator.python	#C678DD	italic
support.function.builtin.python	#56B6C2	—
entity.name.type.lifetime.rust, storage.modifier.lifetime.rust	#E5C07B	italic
support.macro.rust, entity.name.function.macro.rust	#FF9F1C	bold
keyword.other.unsafe.rust	#E06C75	bold
keyword.package.go, keyword.import.go, entity.name.package.go	#FF4D4D	italic
support.type.property-name.json, entity.name.tag.yaml	#56B6C2	—
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql	#FF4D4D	bold
entity.name.type.model.prisma	#E63946	bold
keyword.other.dockerfile	#FF4D4D	bold
variable.other.normal.shell, support.function.builtin.shell	#56B6C2	—
markup.heading, entity.name.section.markdown	#FF9F1C	bold
markup.quote	#E63946	italic
markup.inline.raw, markup.fenced_code.block	#2EC4B6	—
markup.underline.link, string.other.link	#56B6C2	underline

VS Code preview

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

Spider Theme Suite — Arachnid

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.

activityBar.background#0D0A0A
activityBar.border#0D0A0A
activityBar.foreground#00B4D8
activityBar.inactiveForeground#8E98AD73
diffEditor.diagonalFill#8E98AD40
diffEditor.insertedLineBackground#98C37910
diffEditor.insertedTextBackground#98C3791A
diffEditor.removedLineBackground#E06C7510
diffEditor.removedTextBackground#E06C751A
editor.background#1A1515
editor.findMatchBackground#E5C07B80
editor.findMatchHighlightBackground#E5C07B30
editor.findRangeHighlightBackground#E5C07B1A
editor.foreground#F8F9FA
editor.inactiveSelectionBackground#3D272780
editor.lineHighlightBackground#241818
editor.selectionBackground#3D2727
editor.selectionHighlightBackground#3D2727A0
editor.wordHighlightBackground#3D2727A0
editor.wordHighlightStrongBackground#00B4D830
editorBracketMatch.background#00B4D840
editorBracketMatch.border#00B4D8A0
editorCursor.foreground#00B4D8
editorGroupHeader.tabsBackground#120E0E
editorIndentGuide.activeBackground#8E98AD90
editorIndentGuide.background#8E98AD40
editorLineNumber.activeForeground#F8F9FA
editorLineNumber.foreground#8E98AD90
editorWhitespace.foreground#8E98AD60
focusBorder#00B4D840
foreground#F8F9FA
gitDecoration.addedResourceForeground#98C379
gitDecoration.conflictingResourceForeground#C678DD
gitDecoration.deletedResourceForeground#E06C75
gitDecoration.ignoredResourceForeground#8E98ADB3
gitDecoration.modifiedResourceForeground#00B4D8
gitDecoration.untrackedResourceForeground#56B6C2
list.deemphasizedForeground#8E98ADB3
panel.background#1A1515
sideBar.background#120E0E
sideBar.border#120E0E
sideBar.foreground#F8F9FA
sideBarSectionHeader.background#120E0E
statusBar.background#080606
statusBar.border#080606
statusBar.debuggingBackground#E5C07B40
statusBar.foreground#F8F9FA
statusBar.noFolderBackground#080606
tab.activeBackground#1A1515
tab.inactiveBackground#120E0E
terminal.ansiBlack#0D0A0A
terminal.ansiBlue#00B4D8
terminal.ansiBrightBlack#8E98AD
terminal.ansiBrightBlue#00B4D8
terminal.ansiBrightCyan#56B6C2
terminal.ansiBrightGreen#98C379
terminal.ansiBrightMagenta#C678DD
terminal.ansiBrightRed#E06C75
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#E5C07B
terminal.ansiCyan#56B6C2
terminal.ansiGreen#98C379
terminal.ansiMagenta#C678DD
terminal.ansiRed#E06C75
terminal.ansiWhite#F8F9FA
terminal.ansiYellow#E5C07B
terminal.background#1A1515
terminal.foreground#F8F9FA
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8E98AD	italic
comment.keyword.todo, comment.line.todo	#D19A66	bold
comment.keyword.fixme, comment.line.fixme	#E06C75	bold underline
comment.keyword.note, comment.line.note	#61AFEF	bold
comment.keyword.warning, comment.line.warning	#E5C07B	bold
comment.keyword.hack, comment.line.hack	#C678DD	bold
punctuation, meta.brace, meta.delimiter	#ABB2BFD9	—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison	#ABB2BFD9	—
keyword, storage, storage.type	#E63946	—
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch, keyword.control.return	#E63946	bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as	#E63946	italic
entity.name.function, meta.function-call, support.function	#00B4D8	—
variable.function, meta.function-call.generic	#00B4D8	—
entity.name.type, entity.name.class, support.class, entity.name.type.class, entity.name.type.struct, entity.name.type.enum	#C678DD	—
entity.name.type.interface, entity.name.type.trait	#C678DD	italic
support.type.primitive, support.type.builtin, storage.type.numeric.go, storage.type.boolean.go, storage.type.string.go	#56B6C2	—
variable, variable.other.readwrite, variable.other.object	#F8F9FA	—
variable.parameter, meta.parameter	#56B6C2	italic
variable.language, variable.parameter.function.language.special.self, variable.parameter.function.language.special.cls	#E63946	italic
variable.other.property, meta.object-literal.key, support.type.property-name	#F8F9FA	—
string, string.quoted, string.template	#E9C46A	—
constant.character.escape, constant.other.placeholder	#E63946	bold
constant.numeric, keyword.other.unit	#D19A66	—
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined	#D19A66	bold
variable.other.constant, entity.name.constant	#E5C07B	bold
entity.name.tag, entity.name.tag.html, entity.name.tag.xml, entity.name.tag.js, entity.name.tag.jsx, entity.name.tag.tsx	#E63946	—
support.class.component, entity.name.tag.custom	#C678DD	bold
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx	#56B6C2	italic
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end	#ABB2BFD9	—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less	#56B6C2	—
support.constant.property-value.css, meta.property-value.css, support.constant.color	#E9C46A	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#C678DD	bold
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#C678DD	italic
variable.argument.css, variable.css, variable.scss	#F8F9FA	—
meta.function.decorator.python, entity.name.function.decorator.python	#C678DD	italic
support.function.builtin.python	#56B6C2	—
entity.name.type.lifetime.rust, storage.modifier.lifetime.rust	#E5C07B	italic
support.macro.rust, entity.name.function.macro.rust	#00B4D8	bold
keyword.other.unsafe.rust	#E06C75	bold
keyword.package.go, keyword.import.go, entity.name.package.go	#E63946	italic
support.type.property-name.json, entity.name.tag.yaml	#56B6C2	—
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql	#E63946	bold
entity.name.type.model.prisma	#C678DD	bold
keyword.other.dockerfile	#E63946	bold
variable.other.normal.shell, support.function.builtin.shell	#56B6C2	—
markup.heading, entity.name.section.markdown	#00B4D8	bold
markup.quote	#C678DD	italic
markup.inline.raw, markup.fenced_code.block	#E9C46A	—
markup.underline.link, string.other.link	#56B6C2	underline

VS Code preview

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

Spider Theme Suite — Brooklyn Anomaly

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.

activityBar.background#080808
activityBar.border#080808
activityBar.foreground#4CC9F0
activityBar.inactiveForeground#9EA7B073
diffEditor.diagonalFill#9EA7B040
diffEditor.insertedLineBackground#98C37910
diffEditor.insertedTextBackground#98C3791A
diffEditor.removedLineBackground#E06C7510
diffEditor.removedTextBackground#E06C751A
editor.background#000000
editor.findMatchBackground#E5C07B80
editor.findMatchHighlightBackground#E5C07B30
editor.findRangeHighlightBackground#E5C07B1A
editor.foreground#FFFFFF
editor.inactiveSelectionBackground#1A1A1A80
editor.lineHighlightBackground#0F0F0F
editor.selectionBackground#1A1A1A
editor.selectionHighlightBackground#1A1A1AA0
editor.wordHighlightBackground#1A1A1AA0
editor.wordHighlightStrongBackground#4CC9F030
editorBracketMatch.background#4CC9F040
editorBracketMatch.border#4CC9F0A0
editorCursor.foreground#4CC9F0
editorGroupHeader.tabsBackground#050505
editorIndentGuide.activeBackground#9EA7B090
editorIndentGuide.background#9EA7B040
editorLineNumber.activeForeground#FFFFFF
editorLineNumber.foreground#9EA7B090
editorWhitespace.foreground#9EA7B060
focusBorder#4CC9F040
foreground#FFFFFF
gitDecoration.addedResourceForeground#98C379
gitDecoration.conflictingResourceForeground#E056FD
gitDecoration.deletedResourceForeground#E06C75
gitDecoration.ignoredResourceForeground#9EA7B0B3
gitDecoration.modifiedResourceForeground#4CC9F0
gitDecoration.untrackedResourceForeground#56B6C2
list.deemphasizedForeground#9EA7B0B3
panel.background#000000
sideBar.background#050505
sideBar.border#050505
sideBar.foreground#FFFFFF
sideBarSectionHeader.background#050505
statusBar.background#0A0A0A
statusBar.border#0A0A0A
statusBar.debuggingBackground#E5C07B40
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#0A0A0A
tab.activeBackground#000000
tab.inactiveBackground#050505
terminal.ansiBlack#080808
terminal.ansiBlue#4CC9F0
terminal.ansiBrightBlack#9EA7B0
terminal.ansiBrightBlue#4CC9F0
terminal.ansiBrightCyan#56B6C2
terminal.ansiBrightGreen#98C379
terminal.ansiBrightMagenta#E056FD
terminal.ansiBrightRed#E06C75
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#E5C07B
terminal.ansiCyan#56B6C2
terminal.ansiGreen#98C379
terminal.ansiMagenta#E056FD
terminal.ansiRed#E06C75
terminal.ansiWhite#FFFFFF
terminal.ansiYellow#E5C07B
terminal.background#000000
terminal.foreground#FFFFFF
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#9EA7B0	italic
comment.keyword.todo, comment.line.todo	#D19A66	bold
comment.keyword.fixme, comment.line.fixme	#E06C75	bold underline
comment.keyword.note, comment.line.note	#61AFEF	bold
comment.keyword.warning, comment.line.warning	#E5C07B	bold
comment.keyword.hack, comment.line.hack	#C678DD	bold
punctuation, meta.brace, meta.delimiter	#ABB2BFD9	—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison	#ABB2BFD9	—
keyword, storage, storage.type	#F72585	—
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch, keyword.control.return	#F72585	bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as	#F72585	italic
entity.name.function, meta.function-call, support.function	#4CC9F0	—
variable.function, meta.function-call.generic	#4CC9F0	—
entity.name.type, entity.name.class, support.class, entity.name.type.class, entity.name.type.struct, entity.name.type.enum	#E056FD	—
entity.name.type.interface, entity.name.type.trait	#E056FD	italic
support.type.primitive, support.type.builtin, storage.type.numeric.go, storage.type.boolean.go, storage.type.string.go	#56B6C2	—
variable, variable.other.readwrite, variable.other.object	#FFFFFF	—
variable.parameter, meta.parameter	#56B6C2	italic
variable.language, variable.parameter.function.language.special.self, variable.parameter.function.language.special.cls	#F72585	italic
variable.other.property, meta.object-literal.key, support.type.property-name	#FFFFFF	—
string, string.quoted, string.template	#FEE440	—
constant.character.escape, constant.other.placeholder	#F72585	bold
constant.numeric, keyword.other.unit	#D19A66	—
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined	#D19A66	bold
variable.other.constant, entity.name.constant	#E5C07B	bold
entity.name.tag, entity.name.tag.html, entity.name.tag.xml, entity.name.tag.js, entity.name.tag.jsx, entity.name.tag.tsx	#F72585	—
support.class.component, entity.name.tag.custom	#E056FD	bold
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx	#3A86FF	italic
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end	#ABB2BFD9	—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less	#3A86FF	—
support.constant.property-value.css, meta.property-value.css, support.constant.color	#FEE440	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#E056FD	bold
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#C678DD	italic
variable.argument.css, variable.css, variable.scss	#FFFFFF	—
meta.function.decorator.python, entity.name.function.decorator.python	#C678DD	italic
support.function.builtin.python	#56B6C2	—
entity.name.type.lifetime.rust, storage.modifier.lifetime.rust	#E5C07B	italic
support.macro.rust, entity.name.function.macro.rust	#4CC9F0	bold
keyword.other.unsafe.rust	#E06C75	bold
keyword.package.go, keyword.import.go, entity.name.package.go	#F72585	italic
support.type.property-name.json, entity.name.tag.yaml	#3A86FF	—
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql	#F72585	bold
entity.name.type.model.prisma	#E056FD	bold
keyword.other.dockerfile	#F72585	bold
variable.other.normal.shell, support.function.builtin.shell	#56B6C2	—
markup.heading, entity.name.section.markdown	#4CC9F0	bold
markup.quote	#E056FD	italic
markup.inline.raw, markup.fenced_code.block	#FEE440	—
markup.underline.link, string.other.link	#56B6C2	underline

VS Code preview

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

Spider Theme Suite — Emerald Menace

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.

activityBar.background#20232A
activityBar.border#20232A
activityBar.foreground#38D9A9
activityBar.inactiveForeground#9AA5B973
diffEditor.diagonalFill#9AA5B940
diffEditor.insertedLineBackground#98C37910
diffEditor.insertedTextBackground#98C3791A
diffEditor.removedLineBackground#E06C7510
diffEditor.removedTextBackground#E06C751A
editor.background#2C313C
editor.findMatchBackground#E5C07B80
editor.findMatchHighlightBackground#E5C07B30
editor.findRangeHighlightBackground#E5C07B1A
editor.foreground#F8F9FA
editor.inactiveSelectionBackground#40485980
editor.lineHighlightBackground#363C49
editor.selectionBackground#404859
editor.selectionHighlightBackground#404859A0
editor.wordHighlightBackground#404859A0
editor.wordHighlightStrongBackground#38D9A930
editorBracketMatch.background#38D9A940
editorBracketMatch.border#38D9A9A0
editorCursor.foreground#38D9A9
editorGroupHeader.tabsBackground#252932
editorIndentGuide.activeBackground#9AA5B990
editorIndentGuide.background#9AA5B940
editorLineNumber.activeForeground#F8F9FA
editorLineNumber.foreground#9AA5B990
editorWhitespace.foreground#9AA5B960
focusBorder#38D9A940
foreground#F8F9FA
gitDecoration.addedResourceForeground#98C379
gitDecoration.conflictingResourceForeground#7088FF
gitDecoration.deletedResourceForeground#E06C75
gitDecoration.ignoredResourceForeground#9AA5B9B3
gitDecoration.modifiedResourceForeground#38D9A9
gitDecoration.untrackedResourceForeground#56B6C2
list.deemphasizedForeground#9AA5B9B3
panel.background#2C313C
sideBar.background#252932
sideBar.border#252932
sideBar.foreground#F8F9FA
sideBarSectionHeader.background#252932
statusBar.background#1B1E24
statusBar.border#1B1E24
statusBar.debuggingBackground#E5C07B40
statusBar.foreground#F8F9FA
statusBar.noFolderBackground#1B1E24
tab.activeBackground#2C313C
tab.inactiveBackground#252932
terminal.ansiBlack#20232A
terminal.ansiBlue#38D9A9
terminal.ansiBrightBlack#9AA5B9
terminal.ansiBrightBlue#38D9A9
terminal.ansiBrightCyan#56B6C2
terminal.ansiBrightGreen#98C379
terminal.ansiBrightMagenta#7088FF
terminal.ansiBrightRed#E06C75
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#E5C07B
terminal.ansiCyan#56B6C2
terminal.ansiGreen#98C379
terminal.ansiMagenta#7088FF
terminal.ansiRed#E06C75
terminal.ansiWhite#F8F9FA
terminal.ansiYellow#E5C07B
terminal.background#2C313C
terminal.foreground#F8F9FA
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#9AA5B9	italic
comment.keyword.todo, comment.line.todo	#D19A66	bold
comment.keyword.fixme, comment.line.fixme	#E06C75	bold underline
comment.keyword.note, comment.line.note	#61AFEF	bold
comment.keyword.warning, comment.line.warning	#E5C07B	bold
comment.keyword.hack, comment.line.hack	#C678DD	bold
punctuation, meta.brace, meta.delimiter	#ABB2BFD9	—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison	#ABB2BFD9	—
keyword, storage, storage.type	#52B788	—
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch, keyword.control.return	#52B788	bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as	#52B788	italic
entity.name.function, meta.function-call, support.function	#38D9A9	—
variable.function, meta.function-call.generic	#38D9A9	—
entity.name.type, entity.name.class, support.class, entity.name.type.class, entity.name.type.struct, entity.name.type.enum	#7088FF	—
entity.name.type.interface, entity.name.type.trait	#7088FF	italic
support.type.primitive, support.type.builtin, storage.type.numeric.go, storage.type.boolean.go, storage.type.string.go	#56B6C2	—
variable, variable.other.readwrite, variable.other.object	#F8F9FA	—
variable.parameter, meta.parameter	#56B6C2	italic
variable.language, variable.parameter.function.language.special.self, variable.parameter.function.language.special.cls	#52B788	italic
variable.other.property, meta.object-literal.key, support.type.property-name	#F8F9FA	—
string, string.quoted, string.template	#F48C06	—
constant.character.escape, constant.other.placeholder	#52B788	bold
constant.numeric, keyword.other.unit	#D19A66	—
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined	#D19A66	bold
variable.other.constant, entity.name.constant	#E5C07B	bold
entity.name.tag, entity.name.tag.html, entity.name.tag.xml, entity.name.tag.js, entity.name.tag.jsx, entity.name.tag.tsx	#52B788	—
support.class.component, entity.name.tag.custom	#7088FF	bold
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx	#56B6C2	italic
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end	#ABB2BFD9	—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less	#56B6C2	—
support.constant.property-value.css, meta.property-value.css, support.constant.color	#F48C06	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#7088FF	bold
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#C678DD	italic
variable.argument.css, variable.css, variable.scss	#F8F9FA	—
meta.function.decorator.python, entity.name.function.decorator.python	#C678DD	italic
support.function.builtin.python	#56B6C2	—
entity.name.type.lifetime.rust, storage.modifier.lifetime.rust	#E5C07B	italic
support.macro.rust, entity.name.function.macro.rust	#38D9A9	bold
keyword.other.unsafe.rust	#E06C75	bold
keyword.package.go, keyword.import.go, entity.name.package.go	#52B788	italic
support.type.property-name.json, entity.name.tag.yaml	#56B6C2	—
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql	#52B788	bold
entity.name.type.model.prisma	#7088FF	bold
keyword.other.dockerfile	#52B788	bold
variable.other.normal.shell, support.function.builtin.shell	#56B6C2	—
markup.heading, entity.name.section.markdown	#38D9A9	bold
markup.quote	#7088FF	italic
markup.inline.raw, markup.fenced_code.block	#F48C06	—
markup.underline.link, string.other.link	#56B6C2	underline