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 — Noir Detective

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#000000
activityBar.border#000000
activityBar.foreground#F8F9FA
activityBar.inactiveForeground#8C96A073
diffEditor.diagonalFill#8C96A040
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#E9ECEF
editor.inactiveSelectionBackground#33333380
editor.lineHighlightBackground#111111
editor.selectionBackground#333333
editor.selectionHighlightBackground#333333A0
editor.wordHighlightBackground#333333A0
editor.wordHighlightStrongBackground#F8F9FA30
editorBracketMatch.background#F8F9FA40
editorBracketMatch.border#F8F9FAA0
editorCursor.foreground#F8F9FA
editorGroupHeader.tabsBackground#000000
editorIndentGuide.activeBackground#8C96A090
editorIndentGuide.background#8C96A040
editorLineNumber.activeForeground#E9ECEF
editorLineNumber.foreground#8C96A090
editorWhitespace.foreground#8C96A060
focusBorder#F8F9FA40
foreground#E9ECEF
gitDecoration.addedResourceForeground#98C379
gitDecoration.conflictingResourceForeground#93C5FD
gitDecoration.deletedResourceForeground#E06C75
gitDecoration.ignoredResourceForeground#8C96A0B3
gitDecoration.modifiedResourceForeground#F8F9FA
gitDecoration.untrackedResourceForeground#56B6C2
list.deemphasizedForeground#8C96A0B3
panel.background#000000
sideBar.background#000000
sideBar.border#000000
sideBar.foreground#E9ECEF
sideBarSectionHeader.background#000000
statusBar.background#000000
statusBar.border#000000
statusBar.debuggingBackground#E5C07B40
statusBar.foreground#E9ECEF
statusBar.noFolderBackground#000000
tab.activeBackground#000000
tab.inactiveBackground#000000
terminal.ansiBlack#000000
terminal.ansiBlue#F8F9FA
terminal.ansiBrightBlack#8C96A0
terminal.ansiBrightBlue#F8F9FA
terminal.ansiBrightCyan#56B6C2
terminal.ansiBrightGreen#98C379
terminal.ansiBrightMagenta#93C5FD
terminal.ansiBrightRed#E06C75
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#E5C07B
terminal.ansiCyan#56B6C2
terminal.ansiGreen#98C379
terminal.ansiMagenta#93C5FD
terminal.ansiRed#E06C75
terminal.ansiWhite#E9ECEF
terminal.ansiYellow#E5C07B
terminal.background#000000
terminal.foreground#E9ECEF
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8C96A0	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	#ADB5BD	—
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch, keyword.control.return	#ADB5BD	bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as	#ADB5BD	italic
entity.name.function, meta.function-call, support.function	#F8F9FA	—
variable.function, meta.function-call.generic	#F8F9FA	—
entity.name.type, entity.name.class, support.class, entity.name.type.class, entity.name.type.struct, entity.name.type.enum	#93C5FD	—
entity.name.type.interface, entity.name.type.trait	#93C5FD	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	#E9ECEF	—
variable.parameter, meta.parameter	#56B6C2	italic
variable.language, variable.parameter.function.language.special.self, variable.parameter.function.language.special.cls	#ADB5BD	italic
variable.other.property, meta.object-literal.key, support.type.property-name	#E9ECEF	—
string, string.quoted, string.template	#D4A373	—
constant.character.escape, constant.other.placeholder	#ADB5BD	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	#ADB5BD	—
support.class.component, entity.name.tag.custom	#93C5FD	bold
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx	#CED4DA	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	#CED4DA	—
support.constant.property-value.css, meta.property-value.css, support.constant.color	#D4A373	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#93C5FD	bold
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#C678DD	italic
variable.argument.css, variable.css, variable.scss	#E9ECEF	—
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	#F8F9FA	bold
keyword.other.unsafe.rust	#E06C75	bold
keyword.package.go, keyword.import.go, entity.name.package.go	#ADB5BD	italic
support.type.property-name.json, entity.name.tag.yaml	#CED4DA	—
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql	#ADB5BD	bold
entity.name.type.model.prisma	#93C5FD	bold
keyword.other.dockerfile	#ADB5BD	bold
variable.other.normal.shell, support.function.builtin.shell	#56B6C2	—
markup.heading, entity.name.section.markdown	#F8F9FA	bold
markup.quote	#93C5FD	italic
markup.inline.raw, markup.fenced_code.block	#D4A373	—
markup.underline.link, string.other.link	#56B6C2	underline

VS Code preview

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

Spider Theme Suite — Phantom Web

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#1E2227
activityBar.border#1E2227
activityBar.foreground#A0E1E5
activityBar.inactiveForeground#A6B1E173
diffEditor.diagonalFill#A6B1E140
diffEditor.insertedLineBackground#98C37910
diffEditor.insertedTextBackground#98C3791A
diffEditor.removedLineBackground#E06C7510
diffEditor.removedTextBackground#E06C751A
editor.background#282C34
editor.findMatchBackground#E5C07B80
editor.findMatchHighlightBackground#E5C07B30
editor.findRangeHighlightBackground#E5C07B1A
editor.foreground#DFE0DF
editor.inactiveSelectionBackground#3E445180
editor.lineHighlightBackground#2F333D
editor.selectionBackground#3E4451
editor.selectionHighlightBackground#3E4451A0
editor.wordHighlightBackground#3E4451A0
editor.wordHighlightStrongBackground#A0E1E530
editorBracketMatch.background#A0E1E540
editorBracketMatch.border#A0E1E5A0
editorCursor.foreground#A0E1E5
editorGroupHeader.tabsBackground#21252B
editorIndentGuide.activeBackground#A6B1E190
editorIndentGuide.background#A6B1E140
editorLineNumber.activeForeground#DFE0DF
editorLineNumber.foreground#A6B1E190
editorWhitespace.foreground#A6B1E160
focusBorder#A0E1E540
foreground#DFE0DF
gitDecoration.addedResourceForeground#98C379
gitDecoration.conflictingResourceForeground#C77DFF
gitDecoration.deletedResourceForeground#E06C75
gitDecoration.ignoredResourceForeground#A6B1E1B3
gitDecoration.modifiedResourceForeground#A0E1E5
gitDecoration.untrackedResourceForeground#56B6C2
list.deemphasizedForeground#A6B1E1B3
panel.background#282C34
sideBar.background#21252B
sideBar.border#21252B
sideBar.foreground#DFE0DF
sideBarSectionHeader.background#21252B
statusBar.background#181A1F
statusBar.border#181A1F
statusBar.debuggingBackground#E5C07B40
statusBar.foreground#DFE0DF
statusBar.noFolderBackground#181A1F
tab.activeBackground#282C34
tab.inactiveBackground#21252B
terminal.ansiBlack#1E2227
terminal.ansiBlue#A0E1E5
terminal.ansiBrightBlack#A6B1E1
terminal.ansiBrightBlue#A0E1E5
terminal.ansiBrightCyan#56B6C2
terminal.ansiBrightGreen#98C379
terminal.ansiBrightMagenta#C77DFF
terminal.ansiBrightRed#E06C75
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#E5C07B
terminal.ansiCyan#56B6C2
terminal.ansiGreen#98C379
terminal.ansiMagenta#C77DFF
terminal.ansiRed#E06C75
terminal.ansiWhite#DFE0DF
terminal.ansiYellow#E5C07B
terminal.background#282C34
terminal.foreground#DFE0DF
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#A6B1E1	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	#FFA6C9	—
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch, keyword.control.return	#FFA6C9	bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as	#FFA6C9	italic
entity.name.function, meta.function-call, support.function	#A0E1E5	—
variable.function, meta.function-call.generic	#A0E1E5	—
entity.name.type, entity.name.class, support.class, entity.name.type.class, entity.name.type.struct, entity.name.type.enum	#C77DFF	—
entity.name.type.interface, entity.name.type.trait	#C77DFF	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	#DFE0DF	—
variable.parameter, meta.parameter	#56B6C2	italic
variable.language, variable.parameter.function.language.special.self, variable.parameter.function.language.special.cls	#FFA6C9	italic
variable.other.property, meta.object-literal.key, support.type.property-name	#DFE0DF	—
string, string.quoted, string.template	#B4F8C8	—
constant.character.escape, constant.other.placeholder	#FFA6C9	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	#FFA6C9	—
support.class.component, entity.name.tag.custom	#C77DFF	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	#B4F8C8	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#C77DFF	bold
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#C678DD	italic
variable.argument.css, variable.css, variable.scss	#DFE0DF	—
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	#A0E1E5	bold
keyword.other.unsafe.rust	#E06C75	bold
keyword.package.go, keyword.import.go, entity.name.package.go	#FFA6C9	italic
support.type.property-name.json, entity.name.tag.yaml	#56B6C2	—
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql	#FFA6C9	bold
entity.name.type.model.prisma	#C77DFF	bold
keyword.other.dockerfile	#FFA6C9	bold
variable.other.normal.shell, support.function.builtin.shell	#56B6C2	—
markup.heading, entity.name.section.markdown	#A0E1E5	bold
markup.quote	#C77DFF	italic
markup.inline.raw, markup.fenced_code.block	#B4F8C8	—
markup.underline.link, string.other.link	#56B6C2	underline

VS Code preview

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

Spider Theme Suite — Superior

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#070A12
activityBar.border#070A12
activityBar.foreground#3A86FF
activityBar.inactiveForeground#979DAC73
diffEditor.diagonalFill#979DAC40
diffEditor.insertedLineBackground#98C37910
diffEditor.insertedTextBackground#98C3791A
diffEditor.removedLineBackground#E06C7510
diffEditor.removedTextBackground#E06C751A
editor.background#0F1423
editor.findMatchBackground#E5C07B80
editor.findMatchHighlightBackground#E5C07B30
editor.findRangeHighlightBackground#E5C07B1A
editor.foreground#FDFCDC
editor.inactiveSelectionBackground#212A4580
editor.lineHighlightBackground#161D33
editor.selectionBackground#212A45
editor.selectionHighlightBackground#212A45A0
editor.wordHighlightBackground#212A45A0
editor.wordHighlightStrongBackground#3A86FF30
editorBracketMatch.background#3A86FF40
editorBracketMatch.border#3A86FFA0
editorCursor.foreground#3A86FF
editorGroupHeader.tabsBackground#0A0D17
editorIndentGuide.activeBackground#979DAC90
editorIndentGuide.background#979DAC40
editorLineNumber.activeForeground#FDFCDC
editorLineNumber.foreground#979DAC90
editorWhitespace.foreground#979DAC60
focusBorder#3A86FF40
foreground#FDFCDC
gitDecoration.addedResourceForeground#98C379
gitDecoration.conflictingResourceForeground#0A9396
gitDecoration.deletedResourceForeground#E06C75
gitDecoration.ignoredResourceForeground#979DACB3
gitDecoration.modifiedResourceForeground#3A86FF
gitDecoration.untrackedResourceForeground#56B6C2
list.deemphasizedForeground#979DACB3
panel.background#0F1423
sideBar.background#0A0D17
sideBar.border#0A0D17
sideBar.foreground#FDFCDC
sideBarSectionHeader.background#0A0D17
statusBar.background#05070D
statusBar.border#05070D
statusBar.debuggingBackground#E5C07B40
statusBar.foreground#FDFCDC
statusBar.noFolderBackground#05070D
tab.activeBackground#0F1423
tab.inactiveBackground#0A0D17
terminal.ansiBlack#070A12
terminal.ansiBlue#3A86FF
terminal.ansiBrightBlack#979DAC
terminal.ansiBrightBlue#3A86FF
terminal.ansiBrightCyan#56B6C2
terminal.ansiBrightGreen#98C379
terminal.ansiBrightMagenta#0A9396
terminal.ansiBrightRed#E06C75
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#E5C07B
terminal.ansiCyan#56B6C2
terminal.ansiGreen#98C379
terminal.ansiMagenta#0A9396
terminal.ansiRed#E06C75
terminal.ansiWhite#FDFCDC
terminal.ansiYellow#E5C07B
terminal.background#0F1423
terminal.foreground#FDFCDC
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#979DAC	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	#FF4D5D	—
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch, keyword.control.return	#FF4D5D	bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as	#FF4D5D	italic
entity.name.function, meta.function-call, support.function	#3A86FF	—
variable.function, meta.function-call.generic	#3A86FF	—
entity.name.type, entity.name.class, support.class, entity.name.type.class, entity.name.type.struct, entity.name.type.enum	#0A9396	—
entity.name.type.interface, entity.name.type.trait	#0A9396	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	#FDFCDC	—
variable.parameter, meta.parameter	#56B6C2	italic
variable.language, variable.parameter.function.language.special.self, variable.parameter.function.language.special.cls	#FF4D5D	italic
variable.other.property, meta.object-literal.key, support.type.property-name	#FDFCDC	—
string, string.quoted, string.template	#EE9B00	—
constant.character.escape, constant.other.placeholder	#FF4D5D	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	#FF4D5D	—
support.class.component, entity.name.tag.custom	#0A9396	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	#EE9B00	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#0A9396	bold
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#C678DD	italic
variable.argument.css, variable.css, variable.scss	#FDFCDC	—
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	#3A86FF	bold
keyword.other.unsafe.rust	#E06C75	bold
keyword.package.go, keyword.import.go, entity.name.package.go	#FF4D5D	italic
support.type.property-name.json, entity.name.tag.yaml	#56B6C2	—
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql	#FF4D5D	bold
entity.name.type.model.prisma	#0A9396	bold
keyword.other.dockerfile	#FF4D5D	bold
variable.other.normal.shell, support.function.builtin.shell	#56B6C2	—
markup.heading, entity.name.section.markdown	#3A86FF	bold
markup.quote	#0A9396	italic
markup.inline.raw, markup.fenced_code.block	#EE9B00	—
markup.underline.link, string.other.link	#56B6C2	underline

VS Code preview

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

Spider Theme Suite — Symbiote

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#111317
activityBar.border#111317
activityBar.foreground#00F5D4
activityBar.inactiveForeground#8D93AB73
diffEditor.diagonalFill#8D93AB40
diffEditor.insertedLineBackground#98C37910
diffEditor.insertedTextBackground#98C3791A
diffEditor.removedLineBackground#E06C7510
diffEditor.removedTextBackground#E06C751A
editor.background#1A1C23
editor.findMatchBackground#E5C07B80
editor.findMatchHighlightBackground#E5C07B30
editor.findRangeHighlightBackground#E5C07B1A
editor.foreground#E5E5E5
editor.inactiveSelectionBackground#2E344080
editor.lineHighlightBackground#21242E
editor.selectionBackground#2E3440
editor.selectionHighlightBackground#2E3440A0
editor.wordHighlightBackground#2E3440A0
editor.wordHighlightStrongBackground#00F5D430
editorBracketMatch.background#00F5D440
editorBracketMatch.border#00F5D4A0
editorCursor.foreground#00F5D4
editorGroupHeader.tabsBackground#16181E
editorIndentGuide.activeBackground#8D93AB90
editorIndentGuide.background#8D93AB40
editorLineNumber.activeForeground#E5E5E5
editorLineNumber.foreground#8D93AB90
editorWhitespace.foreground#8D93AB60
focusBorder#00F5D440
foreground#E5E5E5
gitDecoration.addedResourceForeground#98C379
gitDecoration.conflictingResourceForeground#C77DFF
gitDecoration.deletedResourceForeground#E06C75
gitDecoration.ignoredResourceForeground#8D93ABB3
gitDecoration.modifiedResourceForeground#00F5D4
gitDecoration.untrackedResourceForeground#56B6C2
list.deemphasizedForeground#8D93ABB3
panel.background#1A1C23
sideBar.background#16181E
sideBar.border#16181E
sideBar.foreground#E5E5E5
sideBarSectionHeader.background#16181E
statusBar.background#0E0F12
statusBar.border#0E0F12
statusBar.debuggingBackground#E5C07B40
statusBar.foreground#E5E5E5
statusBar.noFolderBackground#0E0F12
tab.activeBackground#1A1C23
tab.inactiveBackground#16181E
terminal.ansiBlack#111317
terminal.ansiBlue#00F5D4
terminal.ansiBrightBlack#8D93AB
terminal.ansiBrightBlue#00F5D4
terminal.ansiBrightCyan#56B6C2
terminal.ansiBrightGreen#98C379
terminal.ansiBrightMagenta#C77DFF
terminal.ansiBrightRed#E06C75
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#E5C07B
terminal.ansiCyan#56B6C2
terminal.ansiGreen#98C379
terminal.ansiMagenta#C77DFF
terminal.ansiRed#E06C75
terminal.ansiWhite#E5E5E5
terminal.ansiYellow#E5C07B
terminal.background#1A1C23
terminal.foreground#E5E5E5
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8D93AB	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	#F15BB5	—
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch, keyword.control.return	#F15BB5	bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as	#F15BB5	italic
entity.name.function, meta.function-call, support.function	#00F5D4	—
variable.function, meta.function-call.generic	#00F5D4	—
entity.name.type, entity.name.class, support.class, entity.name.type.class, entity.name.type.struct, entity.name.type.enum	#C77DFF	—
entity.name.type.interface, entity.name.type.trait	#C77DFF	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	#E5E5E5	—
variable.parameter, meta.parameter	#56B6C2	italic
variable.language, variable.parameter.function.language.special.self, variable.parameter.function.language.special.cls	#F15BB5	italic
variable.other.property, meta.object-literal.key, support.type.property-name	#E5E5E5	—
string, string.quoted, string.template	#89FC00	—
constant.character.escape, constant.other.placeholder	#F15BB5	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	#F15BB5	—
support.class.component, entity.name.tag.custom	#C77DFF	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	#89FC00	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#C77DFF	bold
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#C678DD	italic
variable.argument.css, variable.css, variable.scss	#E5E5E5	—
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	#00F5D4	bold
keyword.other.unsafe.rust	#E06C75	bold
keyword.package.go, keyword.import.go, entity.name.package.go	#F15BB5	italic
support.type.property-name.json, entity.name.tag.yaml	#56B6C2	—
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql	#F15BB5	bold
entity.name.type.model.prisma	#C77DFF	bold
keyword.other.dockerfile	#F15BB5	bold
variable.other.normal.shell, support.function.builtin.shell	#56B6C2	—
markup.heading, entity.name.section.markdown	#00F5D4	bold
markup.quote	#C77DFF	italic
markup.inline.raw, markup.fenced_code.block	#89FC00	—
markup.underline.link, string.other.link	#56B6C2	underline