Shadow Monarch Abyss

Name: Shadow Monarch Abyss
Author: PisethLokaa

Publisher: PisethLokaaThemes in package: 8

A premium VS Code theme family inspired by Sung Jin-woo from Solo Leveling. Includes Void, Abyss, Ember, Igris, Frost, Light, Twilight, and Dawn variants.

Open in VS Code GitHub

Color themes

VS Code preview

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

Shadow Monarch Abyss — Shadow Monarch Frost

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#03060A
activityBar.border#03060A
activityBar.foreground#E0F2FE
activityBar.inactiveForeground#334155
activityBarBadge.background#06B6D4
activityBarBadge.foreground#04080E
badge.background#06B6D4
badge.foreground#04080E
breadcrumb.activeSelectionForeground#E0F2FE
breadcrumb.focusForeground#E0F2FE
breadcrumb.foreground#A5F3FCCC
breadcrumbPicker.background#09131F
button.background#06B6D4
button.foreground#04080E
button.hoverBackground#0891B2
chat.avatarBackground#06B6D4
chat.avatarForeground#04080E
chat.requestBackground#09131F
chat.requestBorder#06B6D433
chat.slashCommandBackground#06B6D433
chat.slashCommandForeground#22D3EE
commandCenter.activeBackground#0E1D2F
commandCenter.activeForeground#FFFFFF
commandCenter.background#09131F
commandCenter.border#06B6D440
commandCenter.foreground#E0F2FE
debugToolBar.background#09131F
diffEditor.diagonalFill#3341554D
diffEditor.insertedLineBackground#34D3991A
diffEditor.insertedTextBackground#34D39926
diffEditor.removedLineBackground#F43F5E1A
diffEditor.removedTextBackground#F43F5E26
dropdown.background#0E1D2F
dropdown.border#06B6D44D
dropdown.foreground#E0F2FE
editor.background#060C14
editor.bracketMatchBackground#06B6D440
editor.bracketMatchBorder#06B6D4
editor.findMatchBackground#06B6D480
editor.findMatchHighlightBackground#06B6D44D
editor.foreground#E0F2FE
editor.inactiveSelectionBackground#06B6D426
editor.lineHighlightBackground#06B6D41A
editor.selectionBackground#06B6D44D
editor.selectionHighlightBackground#06B6D433
editor.wordHighlightBackground#06B6D433
editor.wordHighlightStrongBackground#06B6D455
editorBracketHighlight.foreground1#06B6D4
editorBracketHighlight.foreground2#38BDF8
editorBracketHighlight.foreground3#67E8F9
editorBracketHighlight.foreground4#FBBF24
editorBracketHighlight.foreground5#34D399
editorBracketHighlight.foreground6#A5F3FC
editorBracketHighlight.unexpectedBracket.foreground#F43F5E
editorBracketPairGuide.activeBackground1#06B6D438
editorBracketPairGuide.activeBackground2#38BDF838
editorBracketPairGuide.activeBackground3#67E8F938
editorBracketPairGuide.activeBackground4#FBBF2438
editorBracketPairGuide.activeBackground5#34D39938
editorBracketPairGuide.activeBackground6#A5F3FC38
editorBracketPairGuide.background1#06B6D422
editorBracketPairGuide.background2#38BDF822
editorBracketPairGuide.background3#67E8F922
editorBracketPairGuide.background4#FBBF2422
editorBracketPairGuide.background5#34D39922
editorBracketPairGuide.background6#A5F3FC22
editorCodeLens.foreground#A5F3FC99
editorCursor.foreground#06B6D4
editorError.foreground#F43F5E
editorGhostText.background#00000000
editorGhostText.foreground#64748B
editorGroupHeader.tabsBackground#09131F
editorGuide.activeBackground#06B6D4AA
editorGuide.activeBackground1#06B6D4AA
editorGuide.activeBackground2#38BDF8AA
editorGuide.activeBackground3#67E8F9AA
editorGuide.activeBackground4#FBBF24AA
editorGuide.activeBackground5#34D399AA
editorGuide.activeBackground6#A5F3FCAA
editorGuide.background#33415533
editorGuide.background1#06B6D444
editorGuide.background2#38BDF844
editorGuide.background3#67E8F944
editorGuide.background4#FBBF2444
editorGuide.background5#34D39944
editorGuide.background6#A5F3FC44
editorGutter.addedBackground#34D399
editorGutter.deletedBackground#F43F5E
editorGutter.modifiedBackground#FBBF24
editorHoverWidget.background#09131F
editorHoverWidget.border#06B6D480
editorHoverWidget.statusBarBackground#0E1D2F
editorIndentGuide.activeBackground#06B6D4AA
editorIndentGuide.activeBackground1#06B6D4AA
editorIndentGuide.activeBackground2#38BDF8AA
editorIndentGuide.activeBackground3#67E8F9AA
editorIndentGuide.activeBackground4#FBBF24AA
editorIndentGuide.activeBackground5#34D399AA
editorIndentGuide.activeBackground6#A5F3FCAA
editorIndentGuide.background#33415533
editorIndentGuide.background1#06B6D444
editorIndentGuide.background2#38BDF844
editorIndentGuide.background3#67E8F944
editorIndentGuide.background4#FBBF2444
editorIndentGuide.background5#34D39944
editorIndentGuide.background6#A5F3FC44
editorInfo.foreground#38BDF8
editorInlayHint.background#0E1D2F80
editorInlayHint.foreground#A5F3FCAA
editorInlayHint.parameterForeground#38BDF8AA
editorInlayHint.typeForeground#06B6D4AA
editorLineNumber.activeForeground#06B6D4
editorLineNumber.foreground#33415599
editorOverviewRuler.errorForeground#F43F5E
editorOverviewRuler.infoForeground#38BDF8
editorOverviewRuler.warningForeground#FBBF24
editorStickyScroll.background#09131F
editorStickyScroll.border#06B6D440
editorStickyScrollHover.background#0E1D2F
editorWarning.foreground#FBBF24
editorWidget.background#09131F
editorWidget.border#06B6D480
editorWidget.resizeBorder#06B6D4
focusBorder#06B6D480
foreground#A5F3FC
gitDecoration.addedResourceForeground#34D399
gitDecoration.deletedResourceForeground#F43F5E
gitDecoration.ignoredResourceForeground#334155
gitDecoration.modifiedResourceForeground#FBBF24
gitDecoration.untrackedResourceForeground#38BDF8
input.background#0E1D2F
input.border#06B6D44D
input.foreground#E0F2FE
inputOption.activeBorder#06B6D4
list.activeSelectionBackground#06B6D466
list.activeSelectionForeground#E0F2FE
list.activeSelectionIconForeground#06B6D4
list.errorForeground#F43F5E
list.focusAndSelectionOutline#06B6D4
list.focusOutline#06B6D480
list.hoverBackground#0E1D2F80
list.hoverForeground#FBBF24
list.inactiveSelectionBackground#06B6D433
list.warningForeground#FBBF24
merge.border#06B6D480
merge.currentHeaderBackground#34D39955
merge.incomingHeaderBackground#38BDF855
minimap.background#03060A80
minimap.errorHighlight#F43F5ECC
minimap.findMatchHighlight#FBBF24CC
minimap.selectionHighlight#06B6D499
minimap.warningHighlight#FBBF24CC
notebook.cellBorderColor#06B6D433
notebook.focusedCellBorder#06B6D4
notificationCenterHeader.background#03060A
notifications.background#09131F
notifications.border#06B6D433
notifications.foreground#E0F2FE
panel.background#09131F
panel.border#03060A
panelTitle.activeBorder#06B6D4
panelTitle.activeForeground#E0F2FE
panelTitle.inactiveForeground#334155
peekView.border#06B6D4
peekViewEditor.background#060C14
peekViewEditor.matchHighlightBackground#FBBF2444
peekViewResult.background#09131F
peekViewResult.matchHighlightBackground#FBBF2444
peekViewResult.selectionBackground#06B6D466
peekViewResult.selectionForeground#E0F2FE
peekViewTitle.background#09131F
progressBar.background#06B6D4
scrollbarSlider.activeBackground#06B6D499
scrollbarSlider.background#06B6D433
scrollbarSlider.hoverBackground#06B6D466
settings.headerForeground#E0F2FE
settings.modifiedItemIndicator#06B6D4
sideBar.background#04080E
sideBar.border#06B6D433
sideBar.foreground#A5F3FC
sideBarSectionHeader.background#09131F
sideBarSectionHeader.border#06B6D426
sideBarSectionHeader.foreground#A5F3FC
sideBarTitle.foreground#E0F2FE
statusBar.background#03060A
statusBar.border#03060A
statusBar.debuggingBackground#03060A
statusBar.foreground#A5F3FC
statusBarItem.activeBackground#06B6D4
statusBarItem.hoverBackground#0E1D2F
symbolIcon.classForeground#A5F3FC
symbolIcon.functionForeground#FBBF24
symbolIcon.variableForeground#E0F2FE
tab.activeBackground#0E1D2F
tab.activeBorder#06B6D4
tab.activeForeground#E0F2FE
tab.border#03060A
tab.inactiveBackground#09131F
tab.inactiveForeground#A5F3FC80
tab.lastPinnedBorder#06B6D4
terminal.ansiBlack#04080E
terminal.ansiBlue#38BDF8
terminal.ansiBrightBlack#0E1D2F
terminal.ansiBrightBlue#7DD3FC
terminal.ansiBrightCyan#CFFAFE
terminal.ansiBrightGreen#6EE7B7
terminal.ansiBrightMagenta#67E8F9
terminal.ansiBrightRed#FB7185
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FDE047
terminal.ansiCyan#22D3EE
terminal.ansiGreen#34D399
terminal.ansiMagenta#06B6D4
terminal.ansiRed#F43F5E
terminal.ansiWhite#A5F3FC
terminal.ansiYellow#FBBF24
terminal.background#060C14
terminal.foreground#E0F2FE
testing.iconFailed#F43F5E
testing.iconPassed#34D399
testing.iconQueued#FBBF24
testing.iconSkipped#64748B
testing.iconUnset#A5F3FC
testing.peekBorder#06B6D4
testing.runAction#34D399
textLink.activeForeground#A5F3FC
textLink.foreground#22D3EE
titleBar.activeBackground#04080E
titleBar.activeForeground#E0F2FE
titleBar.inactiveBackground#04080E
titleBar.inactiveForeground#334155
tree.activeIndentGuidesStroke#06B6D4
tree.indentGuidesStroke#33415566
welcomePage.tileBackground#0E1D2F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.line, comment.block, punctuation.definition.comment	#A5F3FC	italic
string.quoted.docstring.multi.python	#A5F3FC	italic
variable, variable.other, variable.other.readwrite, meta.block	#E0F2FE	—
variable.parameter, meta.parameter.type.variable, variable.parameter.function	#E0F2FE	—
variable.other.constant, variable.other.readonly	#A5F3FC	bold
keyword.control, keyword.control.conditional, keyword.control.repeat, keyword.control.flow, keyword.control.trycatch, keyword.control.import, keyword.control.export	#38BDF8	bold
keyword, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression	#06B6D4	bold
keyword.operator, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.logical	#334155	—
punctuation, punctuation.separator, punctuation.terminator, meta.delimiter, punctuation.section, punctuation.definition.parameters, punctuation.definition.block	#A5F3FC	—
entity.name.function, entity.name.function.constructor	#38BDF8	bold
meta.function-call, variable.function	#7DD3FC	—
support.function, support.function.builtin, support.function.console	#818CF8	—
support.function.react, support.function.builtin.react, entity.name.function.react	#38BDF8	italic
meta.decorator, entity.name.function.decorator, punctuation.decorator	#FBBF24	italic
entity.name.type.class, support.class	#0891B2	bold
entity.name.type.interface, entity.name.type.type-parameter	#60A5FA	italic
entity.name.type.enum, entity.name.type.struct	#22D3EE	bold
entity.name.type, support.type	#0891B2	—
string, string.quoted, string.quoted.double, string.quoted.single	#67E8F9	—
string.template	#BAE6FD	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#334155	—
string.regexp, string.regexp.character-class, punctuation.definition.string.regexp	#2DD4BF	—
constant.numeric	#F43F5E	—
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined	#FB7185	bold
support.type.property-name.json, meta.object-key.json, meta.structure.dictionary.key.json	#06B6D4	—
string.quoted.double.json, string.quoted.single.json	#67E8F9	—
entity.name.tag, entity.name.tag.html, entity.name.tag.xml, punctuation.definition.tag	#2DD4BF	—
entity.other.attribute-name, entity.other.attribute-name.html	#FBBF24	—
string.quoted.double.html, string.quoted.single.html	#67E8F9	—
entity.name.tag.jsx, entity.name.tag.tsx	#2DD4BF	—
support.class.component.jsx, support.class.component.tsx, entity.name.tag.custom.jsx, entity.name.tag.custom.tsx	#0891B2	bold
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.js, entity.other.attribute-name.ts	#FBBF24	—
entity.other.attribute-name.event.jsx, entity.other.attribute-name.event.tsx	#38BDF8	italic
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less	#06B6D4	—
support.constant.property-value.css, meta.property-value.css, support.constant.color.w3c-standard-color-name.css	#67E8F9	—
keyword.other.unit.css, keyword.other.unit.scss, constant.numeric.css	#F43F5E	—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss	#A5F3FC	—
entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss	#FBBF24	bold
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#60A5FA	italic
variable.css, variable.argument.css, custom-property	#38BDF8	—
keyword.control.at-rule.media, keyword.control.at-rule.keyframes, keyword.control.at-rule.import	#38BDF8	bold
entity.other.attribute-name.class.css.tailwindcss	#67E8F9	—
entity.other.attribute-name.variant.tailwindcss	#38BDF8	italic
entity.name.tag.template.html.vue, entity.name.tag.script.html.vue, entity.name.tag.style.html.vue	#2DD4BF	bold
entity.other.attribute-name.directive.vue	#2DD4BF	italic
entity.other.attribute-name.directive.svelte, punctuation.definition.reactive.svelte	#FBBF24	italic
markup.heading, entity.name.section.markdown	#E0F2FE	bold
markup.inline.raw, markup.fenced_code.block	#67E8F9	—
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python	#38BDF8	italic
support.function.magic.python	#38BDF8	bold
storage.modifier.lifetime.rust, entity.name.type.lifetime.rust	#FBBF24	italic
support.macro.rust, entity.name.function.macro.rust	#F97316	bold
entity.name.type.trait.rust	#60A5FA	italic
keyword.channel.go, keyword.goroutine.go	#38BDF8	bold
keyword.other.DML.sql, keyword.other.DDL.create.sql	#06B6D4	bold
support.function.scalar.sql, support.function.aggregate.sql	#38BDF8	—
keyword.other.special-method.dockerfile, entity.name.instruction.dockerfile	#06B6D4	bold
entity.name.tag.yaml, support.type.property-name.yaml	#06B6D4	—
variable.other.normal.shell, variable.other.special.shell	#E0F2FE	—

VS Code preview

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

Shadow Monarch Abyss — Shadow Monarch Igris

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#050407
activityBar.border#050407
activityBar.foreground#E2E8F0
activityBar.inactiveForeground#475569
activityBarBadge.background#E11D48
activityBarBadge.foreground#FFFFFF
badge.background#E11D48
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#E2E8F0
breadcrumb.focusForeground#E2E8F0
breadcrumb.foreground#94A3B8CC
breadcrumbPicker.background#0D0B12
button.background#E11D48
button.foreground#FFFFFF
button.hoverBackground#BE123C
chat.avatarBackground#E11D48
chat.avatarForeground#FFFFFF
chat.requestBackground#0D0B12
chat.requestBorder#E11D4833
chat.slashCommandBackground#E11D4833
chat.slashCommandForeground#F43F5E
commandCenter.activeBackground#15121B
commandCenter.activeForeground#FFFFFF
commandCenter.background#0D0B12
commandCenter.border#E11D4840
commandCenter.foreground#E2E8F0
debugToolBar.background#0D0B12
diffEditor.diagonalFill#4755694D
diffEditor.insertedLineBackground#10B9811A
diffEditor.insertedTextBackground#10B98126
diffEditor.removedLineBackground#F43F5E1A
diffEditor.removedTextBackground#F43F5E26
dropdown.background#15121B
dropdown.border#E11D484D
dropdown.foreground#E2E8F0
editor.background#0A090D
editor.bracketMatchBackground#E11D4840
editor.bracketMatchBorder#E11D48
editor.findMatchBackground#E11D4880
editor.findMatchHighlightBackground#E11D484D
editor.foreground#E2E8F0
editor.inactiveSelectionBackground#E11D4826
editor.lineHighlightBackground#E11D481A
editor.selectionBackground#E11D484D
editor.selectionHighlightBackground#E11D4833
editor.wordHighlightBackground#E11D4833
editor.wordHighlightStrongBackground#E11D4855
editorBracketHighlight.foreground1#E11D48
editorBracketHighlight.foreground2#F59E0B
editorBracketHighlight.foreground3#FB7185
editorBracketHighlight.foreground4#38BDF8
editorBracketHighlight.foreground5#34D399
editorBracketHighlight.foreground6#FB923C
editorBracketHighlight.unexpectedBracket.foreground#EF4444
editorBracketPairGuide.activeBackground1#E11D4838
editorBracketPairGuide.activeBackground2#F59E0B38
editorBracketPairGuide.activeBackground3#FB718538
editorBracketPairGuide.activeBackground4#38BDF838
editorBracketPairGuide.activeBackground5#34D39938
editorBracketPairGuide.activeBackground6#FB923C38
editorBracketPairGuide.background1#E11D4822
editorBracketPairGuide.background2#F59E0B22
editorBracketPairGuide.background3#FB718522
editorBracketPairGuide.background4#38BDF822
editorBracketPairGuide.background5#34D39922
editorBracketPairGuide.background6#FB923C22
editorCodeLens.foreground#94A3B899
editorCursor.foreground#E11D48
editorError.foreground#F43F5E
editorGhostText.background#00000000
editorGhostText.foreground#64748B
editorGroupHeader.tabsBackground#0D0B12
editorGuide.activeBackground#E11D48AA
editorGuide.activeBackground1#E11D48AA
editorGuide.activeBackground2#F59E0BAA
editorGuide.activeBackground3#FB7185AA
editorGuide.activeBackground4#38BDF8AA
editorGuide.activeBackground5#34D399AA
editorGuide.activeBackground6#FB923CAA
editorGuide.background#47556933
editorGuide.background1#E11D4844
editorGuide.background2#F59E0B44
editorGuide.background3#FB718544
editorGuide.background4#38BDF844
editorGuide.background5#34D39944
editorGuide.background6#FB923C44
editorGutter.addedBackground#10B981
editorGutter.deletedBackground#F43F5E
editorGutter.modifiedBackground#F59E0B
editorHoverWidget.background#0D0B12
editorHoverWidget.border#E11D4880
editorHoverWidget.statusBarBackground#15121B
editorIndentGuide.activeBackground#E11D48AA
editorIndentGuide.activeBackground1#E11D48AA
editorIndentGuide.activeBackground2#F59E0BAA
editorIndentGuide.activeBackground3#FB7185AA
editorIndentGuide.activeBackground4#38BDF8AA
editorIndentGuide.activeBackground5#34D399AA
editorIndentGuide.activeBackground6#FB923CAA
editorIndentGuide.background#47556933
editorIndentGuide.background1#E11D4844
editorIndentGuide.background2#F59E0B44
editorIndentGuide.background3#FB718544
editorIndentGuide.background4#38BDF844
editorIndentGuide.background5#34D39944
editorIndentGuide.background6#FB923C44
editorInfo.foreground#38BDF8
editorInlayHint.background#15121B80
editorInlayHint.foreground#94A3B8AA
editorInlayHint.parameterForeground#FB7185AA
editorInlayHint.typeForeground#E11D48AA
editorLineNumber.activeForeground#E11D48
editorLineNumber.foreground#47556999
editorOverviewRuler.errorForeground#F43F5E
editorOverviewRuler.infoForeground#38BDF8
editorOverviewRuler.warningForeground#F59E0B
editorStickyScroll.background#0D0B12
editorStickyScroll.border#E11D4840
editorStickyScrollHover.background#15121B
editorWarning.foreground#F59E0B
editorWidget.background#0D0B12
editorWidget.border#E11D4880
editorWidget.resizeBorder#E11D48
focusBorder#E11D4880
foreground#94A3B8
gitDecoration.addedResourceForeground#10B981
gitDecoration.deletedResourceForeground#F43F5E
gitDecoration.ignoredResourceForeground#475569
gitDecoration.modifiedResourceForeground#F59E0B
gitDecoration.untrackedResourceForeground#FB7185
input.background#15121B
input.border#E11D484D
input.foreground#E2E8F0
inputOption.activeBorder#E11D48
list.activeSelectionBackground#E11D4866
list.activeSelectionForeground#E2E8F0
list.activeSelectionIconForeground#E11D48
list.errorForeground#F43F5E
list.focusAndSelectionOutline#E11D48
list.focusOutline#E11D4880
list.hoverBackground#15121B80
list.hoverForeground#F59E0B
list.inactiveSelectionBackground#E11D4833
list.warningForeground#F59E0B
merge.border#E11D4880
merge.currentHeaderBackground#10B98155
merge.incomingHeaderBackground#38BDF855
minimap.background#05040780
minimap.errorHighlight#F43F5ECC
minimap.findMatchHighlight#F59E0BCC
minimap.selectionHighlight#E11D4899
minimap.warningHighlight#F59E0BCC
notebook.cellBorderColor#E11D4833
notebook.focusedCellBorder#E11D48
notificationCenterHeader.background#050407
notifications.background#0D0B12
notifications.border#E11D4833
notifications.foreground#E2E8F0
panel.background#0D0B12
panel.border#050407
panelTitle.activeBorder#E11D48
panelTitle.activeForeground#E2E8F0
panelTitle.inactiveForeground#475569
peekView.border#E11D48
peekViewEditor.background#0A090D
peekViewEditor.matchHighlightBackground#F59E0B44
peekViewResult.background#0D0B12
peekViewResult.matchHighlightBackground#F59E0B44
peekViewResult.selectionBackground#E11D4866
peekViewResult.selectionForeground#E2E8F0
peekViewTitle.background#0D0B12
progressBar.background#E11D48
scrollbarSlider.activeBackground#E11D4899
scrollbarSlider.background#E11D4833
scrollbarSlider.hoverBackground#E11D4866
settings.headerForeground#E2E8F0
settings.modifiedItemIndicator#E11D48
sideBar.background#07060A
sideBar.border#E11D4833
sideBar.foreground#94A3B8
sideBarSectionHeader.background#0D0B12
sideBarSectionHeader.border#E11D4826
sideBarSectionHeader.foreground#94A3B8
sideBarTitle.foreground#E2E8F0
statusBar.background#050407
statusBar.border#050407
statusBar.debuggingBackground#050407
statusBar.foreground#94A3B8
statusBarItem.activeBackground#E11D48
statusBarItem.hoverBackground#15121B
symbolIcon.classForeground#94A3B8
symbolIcon.functionForeground#F59E0B
symbolIcon.variableForeground#E2E8F0
tab.activeBackground#15121B
tab.activeBorder#E11D48
tab.activeForeground#E2E8F0
tab.border#050407
tab.inactiveBackground#0D0B12
tab.inactiveForeground#94A3B880
tab.lastPinnedBorder#E11D48
terminal.ansiBlack#07060A
terminal.ansiBlue#94A3B8
terminal.ansiBrightBlack#15121B
terminal.ansiBrightBlue#CBD5E1
terminal.ansiBrightCyan#FDA4AF
terminal.ansiBrightGreen#34D399
terminal.ansiBrightMagenta#FB7185
terminal.ansiBrightRed#F43F5E
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#F59E0B
terminal.ansiCyan#FB7185
terminal.ansiGreen#10B981
terminal.ansiMagenta#E11D48
terminal.ansiRed#F43F5E
terminal.ansiWhite#E2E8F0
terminal.ansiYellow#F59E0B
terminal.background#0A090D
terminal.foreground#E2E8F0
testing.iconFailed#F43F5E
testing.iconPassed#10B981
testing.iconQueued#FB923C
testing.iconSkipped#64748B
testing.iconUnset#94A3B8
testing.peekBorder#E11D48
testing.runAction#10B981
textLink.activeForeground#F43F5E
textLink.foreground#FB7185
titleBar.activeBackground#07060A
titleBar.activeForeground#E2E8F0
titleBar.inactiveBackground#07060A
titleBar.inactiveForeground#475569
tree.activeIndentGuidesStroke#E11D48
tree.indentGuidesStroke#47556966
welcomePage.tileBackground#15121B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.line, comment.block, punctuation.definition.comment	#64748B	italic
string.quoted.docstring.multi.python	#64748B	italic
variable, variable.other, variable.other.readwrite, meta.block	#E2E8F0	—
variable.parameter, meta.parameter.type.variable, variable.parameter.function	#CBD5E1	—
variable.other.constant, variable.other.readonly	#FB7185	bold
keyword.control, keyword.control.conditional, keyword.control.repeat, keyword.control.flow, keyword.control.trycatch, keyword.control.import, keyword.control.export	#FB7185	bold
keyword, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression	#E11D48	bold
keyword.operator, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.logical	#E11D48	—
punctuation, punctuation.separator, punctuation.terminator, meta.delimiter, punctuation.section, punctuation.definition.parameters, punctuation.definition.block	#CBD5E1	—
entity.name.function, entity.name.function.constructor	#F59E0B	bold
meta.function-call, variable.function	#FBBF24	—
support.function, support.function.builtin, support.function.console	#F43F5E	—
support.function.react, support.function.builtin.react, entity.name.function.react	#F59E0B	italic
meta.decorator, entity.name.function.decorator, punctuation.decorator	#FBBF24	italic
entity.name.type.class, support.class	#BE123C	bold
entity.name.type.interface, entity.name.type.type-parameter	#38BDF8	italic
entity.name.type.enum, entity.name.type.struct	#F59E0B	bold
entity.name.type, support.type	#BE123C	—
string, string.quoted, string.quoted.double, string.quoted.single	#94A3B8	—
string.template	#CBD5E1	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#E11D48	—
string.regexp, string.regexp.character-class, punctuation.definition.string.regexp	#2DD4BF	—
constant.numeric	#E2E8F0	—
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined	#FB7185	bold
support.type.property-name.json, meta.object-key.json, meta.structure.dictionary.key.json	#E11D48	—
string.quoted.double.json, string.quoted.single.json	#94A3B8	—
entity.name.tag, entity.name.tag.html, entity.name.tag.xml, punctuation.definition.tag	#FB7185	—
entity.other.attribute-name, entity.other.attribute-name.html	#F59E0B	—
string.quoted.double.html, string.quoted.single.html	#94A3B8	—
entity.name.tag.jsx, entity.name.tag.tsx	#FB7185	—
support.class.component.jsx, support.class.component.tsx, entity.name.tag.custom.jsx, entity.name.tag.custom.tsx	#BE123C	bold
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.js, entity.other.attribute-name.ts	#F59E0B	—
entity.other.attribute-name.event.jsx, entity.other.attribute-name.event.tsx	#FB7185	italic
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less	#E11D48	—
support.constant.property-value.css, meta.property-value.css, support.constant.color.w3c-standard-color-name.css	#94A3B8	—
keyword.other.unit.css, keyword.other.unit.scss, constant.numeric.css	#F43F5E	—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss	#CBD5E1	—
entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss	#F59E0B	bold
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#38BDF8	italic
variable.css, variable.argument.css, custom-property	#FB7185	—
keyword.control.at-rule.media, keyword.control.at-rule.keyframes, keyword.control.at-rule.import	#FB7185	bold
entity.other.attribute-name.class.css.tailwindcss	#94A3B8	—
entity.other.attribute-name.variant.tailwindcss	#FB7185	italic
entity.name.tag.template.html.vue, entity.name.tag.script.html.vue, entity.name.tag.style.html.vue	#FB7185	bold
entity.other.attribute-name.directive.vue	#10B981	italic
entity.other.attribute-name.directive.svelte, punctuation.definition.reactive.svelte	#F59E0B	italic
markup.heading, entity.name.section.markdown	#E2E8F0	bold
markup.inline.raw, markup.fenced_code.block	#94A3B8	—
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python	#FB7185	italic
support.function.magic.python	#F59E0B	bold
storage.modifier.lifetime.rust, entity.name.type.lifetime.rust	#F59E0B	italic
support.macro.rust, entity.name.function.macro.rust	#E11D48	bold
entity.name.type.trait.rust	#38BDF8	italic
keyword.channel.go, keyword.goroutine.go	#FB7185	bold
keyword.other.DML.sql, keyword.other.DDL.create.sql	#E11D48	bold
support.function.scalar.sql, support.function.aggregate.sql	#F59E0B	—
keyword.other.special-method.dockerfile, entity.name.instruction.dockerfile	#E11D48	bold
entity.name.tag.yaml, support.type.property-name.yaml	#E11D48	—
variable.other.normal.shell, variable.other.special.shell	#E2E8F0	—

VS Code preview

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

Shadow Monarch Abyss — Shadow Monarch Light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#DDD6FE
activityBar.border#DDD6FE
activityBar.foreground#2E1065
activityBar.inactiveForeground#8E82B5
activityBarBadge.background#7C3AED
activityBarBadge.foreground#F5F3FF
badge.background#7C3AED
badge.foreground#F5F3FF
breadcrumb.activeSelectionForeground#2E1065
breadcrumb.focusForeground#2E1065
breadcrumb.foreground#4C1D95CC
breadcrumbPicker.background#EDE9FE
button.background#7C3AED
button.foreground#F5F3FF
button.hoverBackground#6D28D9
chat.avatarBackground#7C3AED
chat.avatarForeground#F5F3FF
chat.requestBackground#EDE9FE
chat.requestBorder#C4B5FD
chat.slashCommandBackground#7C3AED1A
chat.slashCommandForeground#6D28D9
commandCenter.activeBackground#DDD6FE
commandCenter.activeForeground#FFFFFF
commandCenter.background#EDE9FE
commandCenter.border#C4B5FD80
commandCenter.foreground#E2E8F0
debugToolBar.background#EDE9FE
diffEditor.diagonalFill#4755694D
diffEditor.insertedLineBackground#10B9811A
diffEditor.insertedTextBackground#05966925
diffEditor.removedLineBackground#F43F5E1A
diffEditor.removedTextBackground#DC262625
dropdown.background#F5F3FF
dropdown.border#C4B5FD
dropdown.foreground#2E1065
editor.background#F5F3FF
editor.bracketMatchBackground#7C3AED25
editor.bracketMatchBorder#7C3AED
editor.findMatchBackground#DDD6FEE6
editor.findMatchHighlightBackground#DDD6FEA0
editor.foreground#2E1065
editor.inactiveSelectionBackground#C4B5FD40
editor.lineHighlightBackground#7C3AED10
editor.selectionBackground#C4B5FD80
editor.selectionHighlightBackground#C4B5FD50
editor.wordHighlightBackground#7C3AED22
editor.wordHighlightStrongBackground#7C3AED44
editorBracketHighlight.foreground1#7C3AED
editorBracketHighlight.foreground2#D97706
editorBracketHighlight.foreground3#0284C7
editorBracketHighlight.foreground4#DC2626
editorBracketHighlight.foreground5#059669
editorBracketHighlight.foreground6#4F46E5
editorBracketHighlight.unexpectedBracket.foreground#DC2626
editorBracketPairGuide.activeBackground1#7C3AED38
editorBracketPairGuide.activeBackground2#D9770638
editorBracketPairGuide.activeBackground3#0284C738
editorBracketPairGuide.activeBackground4#DC262638
editorBracketPairGuide.activeBackground5#05966938
editorBracketPairGuide.activeBackground6#4F46E538
editorBracketPairGuide.background1#7C3AED22
editorBracketPairGuide.background2#D9770622
editorBracketPairGuide.background3#0284C722
editorBracketPairGuide.background4#DC262622
editorBracketPairGuide.background5#05966922
editorBracketPairGuide.background6#4F46E522
editorCodeLens.foreground#8E82B5
editorCursor.foreground#7C3AED
editorError.foreground#DC2626
editorGhostText.background#00000000
editorGhostText.foreground#8E82B580
editorGroupHeader.tabsBackground#EDE9FE
editorGuide.activeBackground#7C3AEDAA
editorGuide.activeBackground1#7C3AEDAA
editorGuide.activeBackground2#D97706AA
editorGuide.activeBackground3#0284C7AA
editorGuide.activeBackground4#DC2626AA
editorGuide.activeBackground5#059669AA
editorGuide.activeBackground6#4F46E5AA
editorGuide.background#47556933
editorGuide.background1#7C3AED44
editorGuide.background2#D9770644
editorGuide.background3#0284C744
editorGuide.background4#DC262644
editorGuide.background5#05966944
editorGuide.background6#4F46E544
editorGutter.addedBackground#059669
editorGutter.deletedBackground#DC2626
editorGutter.modifiedBackground#D97706
editorHoverWidget.background#EDE9FE
editorHoverWidget.border#7C3AED80
editorHoverWidget.statusBarBackground#DDD6FE
editorIndentGuide.activeBackground#7C3AEDAA
editorIndentGuide.activeBackground1#7C3AEDAA
editorIndentGuide.activeBackground2#D97706AA
editorIndentGuide.activeBackground3#0284C7AA
editorIndentGuide.activeBackground4#DC2626AA
editorIndentGuide.activeBackground5#059669AA
editorIndentGuide.activeBackground6#4F46E5AA
editorIndentGuide.background#47556933
editorIndentGuide.background1#7C3AED44
editorIndentGuide.background2#D9770644
editorIndentGuide.background3#0284C744
editorIndentGuide.background4#DC262644
editorIndentGuide.background5#05966944
editorIndentGuide.background6#4F46E544
editorInfo.foreground#0284C7
editorInlayHint.background#DDD6FE80
editorInlayHint.foreground#4C1D95AA
editorInlayHint.parameterForeground#0284C7AA
editorInlayHint.typeForeground#7C3AEDAA
editorLineNumber.activeForeground#7C3AED
editorLineNumber.foreground#8E82B5
editorOverviewRuler.errorForeground#DC2626
editorOverviewRuler.infoForeground#0284C7
editorOverviewRuler.warningForeground#D97706
editorStickyScroll.background#EDE9FE
editorStickyScroll.border#7C3AED40
editorStickyScrollHover.background#DDD6FE
editorWarning.foreground#D97706
editorWidget.background#EDE9FE
editorWidget.border#7C3AED80
editorWidget.resizeBorder#7C3AED
focusBorder#7C3AED80
foreground#4C1D95
gitDecoration.addedResourceForeground#059669
gitDecoration.deletedResourceForeground#DC2626
gitDecoration.ignoredResourceForeground#8E82B5
gitDecoration.modifiedResourceForeground#B45309
gitDecoration.untrackedResourceForeground#0284C7
input.background#F5F3FF
input.border#C4B5FD
input.foreground#2E1065
inputOption.activeBorder#7C3AED
list.activeSelectionBackground#C4B5FD80
list.activeSelectionForeground#2E1065
list.activeSelectionIconForeground#7C3AED
list.errorForeground#DC2626
list.focusAndSelectionOutline#7C3AED
list.focusOutline#7C3AED80
list.hoverBackground#C4B5FD50
list.hoverForeground#7C3AED
list.inactiveSelectionBackground#C4B5FD33
list.warningForeground#B45309
merge.border#7C3AED80
merge.currentHeaderBackground#05966940
merge.incomingHeaderBackground#0284C740
minimap.background#EDE9FE80
minimap.errorHighlight#DC2626CC
minimap.findMatchHighlight#D97706CC
minimap.selectionHighlight#7C3AED99
minimap.warningHighlight#D97706CC
notebook.cellBorderColor#C4B5FD
notebook.focusedCellBorder#7C3AED
notificationCenterHeader.background#EDE9FE
notifications.background#F5F3FF
notifications.border#C4B5FD
notifications.foreground#2E1065
panel.background#EDE9FE
panel.border#DDD6FE
panelTitle.activeBorder#7C3AED
panelTitle.activeForeground#2E1065
panelTitle.inactiveForeground#8E82B5
peekView.border#7C3AED
peekViewEditor.background#F5F3FF
peekViewEditor.matchHighlightBackground#D9770644
peekViewResult.background#EDE9FE
peekViewResult.matchHighlightBackground#D9770644
peekViewResult.selectionBackground#C4B5FD80
peekViewResult.selectionForeground#2E1065
peekViewTitle.background#EDE9FE
progressBar.background#7C3AED
scrollbarSlider.activeBackground#7C3AED60
scrollbarSlider.background#C4B5FD60
scrollbarSlider.hoverBackground#8E82B560
settings.headerForeground#2E1065
settings.modifiedItemIndicator#7C3AED
sideBar.background#EDE9FE
sideBar.border#DDD6FE
sideBar.foreground#4C1D95
sideBarSectionHeader.background#DDD6FE
sideBarSectionHeader.border#C4B5FD
sideBarSectionHeader.foreground#4C1D95
sideBarTitle.foreground#2E1065
statusBar.background#DDD6FE
statusBar.border#DDD6FE
statusBar.debuggingBackground#DDD6FE
statusBar.foreground#4C1D95
statusBarItem.activeBackground#7C3AED
statusBarItem.hoverBackground#EDE9FE
symbolIcon.classForeground#7C3AED
symbolIcon.functionForeground#D97706
symbolIcon.variableForeground#2E1065
tab.activeBackground#F5F3FF
tab.activeBorder#7C3AED
tab.activeForeground#2E1065
tab.border#DDD6FE
tab.inactiveBackground#EDE9FE
tab.inactiveForeground#8E82B5
tab.lastPinnedBorder#7C3AED
terminal.ansiBlack#EDE9FE
terminal.ansiBlue#0284C7
terminal.ansiBrightBlack#DDD6FE
terminal.ansiBrightBlue#38BDF8
terminal.ansiBrightCyan#38BDF8
terminal.ansiBrightGreen#10B981
terminal.ansiBrightMagenta#A78BFA
terminal.ansiBrightRed#DC2626
terminal.ansiBrightWhite#2E1065
terminal.ansiBrightYellow#D97706
terminal.ansiCyan#0284C7
terminal.ansiGreen#059669
terminal.ansiMagenta#7C3AED
terminal.ansiRed#DC2626
terminal.ansiWhite#4C1D95
terminal.ansiYellow#B45309
terminal.background#F5F3FF
terminal.foreground#2E1065
testing.iconFailed#DC2626
testing.iconPassed#059669
testing.iconQueued#D97706
testing.iconSkipped#64748B
testing.iconUnset#94A3B8
testing.peekBorder#E11D48
testing.runAction#10B981
textLink.activeForeground#6D28D9
textLink.foreground#7C3AED
titleBar.activeBackground#DDD6FE
titleBar.activeForeground#2E1065
titleBar.inactiveBackground#DDD6FE
titleBar.inactiveForeground#8E82B5
tree.activeIndentGuidesStroke#7C3AED
tree.indentGuidesStroke#C4B5FD
welcomePage.tileBackground#EDE9FE

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.line, comment.block, punctuation.definition.comment	#059669	italic
string.quoted.docstring.multi.python	#059669	italic
variable, variable.other, variable.other.readwrite, meta.block	#2E1065	—
variable.parameter, meta.parameter.type.variable, variable.parameter.function	#4C1D95	—
variable.other.constant, variable.other.readonly	#4C1D95	bold
keyword.control, keyword.control.conditional, keyword.control.repeat, keyword.control.flow, keyword.control.trycatch, keyword.control.import, keyword.control.export	#6D28D9	bold
keyword, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression	#7C3AED	bold
keyword.operator, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.logical	#4F46E5	—
punctuation, punctuation.separator, punctuation.terminator, meta.delimiter, punctuation.section, punctuation.definition.parameters, punctuation.definition.block	#6D28D9	—
entity.name.function, entity.name.function.constructor	#D97706	bold
meta.function-call, variable.function	#B45309	—
support.function, support.function.builtin, support.function.console	#0284C7	—
support.function.react, support.function.builtin.react, entity.name.function.react	#D97706	italic
meta.decorator, entity.name.function.decorator, punctuation.decorator	#D97706	italic
entity.name.type.class, support.class	#5B21B6	bold
entity.name.type.interface, entity.name.type.type-parameter	#0284C7	italic
entity.name.type.enum, entity.name.type.struct	#4F46E5	bold
entity.name.type, support.type	#5B21B6	—
string, string.quoted, string.quoted.double, string.quoted.single	#0369A1	—
string.template	#0284C7	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#4F46E5	—
string.regexp, string.regexp.character-class, punctuation.definition.string.regexp	#0D9488	—
constant.numeric	#DC2626	—
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined	#E11D48	bold
support.type.property-name.json, meta.object-key.json, meta.structure.dictionary.key.json	#7C3AED	—
string.quoted.double.json, string.quoted.single.json	#0369A1	—
entity.name.tag, entity.name.tag.html, entity.name.tag.xml, punctuation.definition.tag	#6D28D9	—
entity.other.attribute-name, entity.other.attribute-name.html	#D97706	—
string.quoted.double.html, string.quoted.single.html	#0369A1	—
entity.name.tag.jsx, entity.name.tag.tsx	#6D28D9	—
support.class.component.jsx, support.class.component.tsx, entity.name.tag.custom.jsx, entity.name.tag.custom.tsx	#5B21B6	bold
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.js, entity.other.attribute-name.ts	#D97706	—
entity.other.attribute-name.event.jsx, entity.other.attribute-name.event.tsx	#B45309	italic
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less	#7C3AED	—
support.constant.property-value.css, meta.property-value.css, support.constant.color.w3c-standard-color-name.css	#0369A1	—
keyword.other.unit.css, keyword.other.unit.scss, constant.numeric.css	#DC2626	—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss	#5B21B6	—
entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss	#D97706	bold
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#0284C7	italic
variable.css, variable.argument.css, custom-property	#0369A1	—
keyword.control.at-rule.media, keyword.control.at-rule.keyframes, keyword.control.at-rule.import	#6D28D9	bold
entity.other.attribute-name.class.css.tailwindcss	#0369A1	—
entity.other.attribute-name.variant.tailwindcss	#6D28D9	italic
entity.name.tag.template.html.vue, entity.name.tag.script.html.vue, entity.name.tag.style.html.vue	#6D28D9	bold
entity.other.attribute-name.directive.vue	#059669	italic
entity.other.attribute-name.directive.svelte, punctuation.definition.reactive.svelte	#D97706	italic
markup.heading, entity.name.section.markdown	#2E1065	bold
markup.inline.raw, markup.fenced_code.block	#0369A1	—
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python	#6D28D9	italic
support.function.magic.python	#D97706	bold
storage.modifier.lifetime.rust, entity.name.type.lifetime.rust	#D97706	italic
support.macro.rust, entity.name.function.macro.rust	#EA580C	bold
entity.name.type.trait.rust	#0284C7	italic
keyword.channel.go, keyword.goroutine.go	#6D28D9	bold
keyword.other.DML.sql, keyword.other.DDL.create.sql	#7C3AED	bold
support.function.scalar.sql, support.function.aggregate.sql	#D97706	—
keyword.other.special-method.dockerfile, entity.name.instruction.dockerfile	#7C3AED	bold
entity.name.tag.yaml, support.type.property-name.yaml	#7C3AED	—
variable.other.normal.shell, variable.other.special.shell	#2E1065	—

VS Code preview

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

Shadow Monarch Abyss — Shadow Monarch Twilight

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.

activityBar.background#C4B9D2
activityBar.border#C4B9D2
activityBar.foreground#2E1065
activityBar.inactiveForeground#7C6C9F
activityBarBadge.background#6D28D9
activityBarBadge.foreground#E0DBEC
badge.background#6D28D9
badge.foreground#E0DBEC
breadcrumb.activeSelectionForeground#2E1065
breadcrumb.focusForeground#2E1065
breadcrumb.foreground#2E1065CC
breadcrumbPicker.background#D3CBDF
button.background#6D28D9
button.foreground#E0DBEC
button.hoverBackground#5B21B6
chat.avatarBackground#7C3AED
chat.avatarForeground#F5F3FF
chat.requestBackground#D3CBDF
chat.requestBorder#B0A3C5
chat.slashCommandBackground#7C3AED1A
chat.slashCommandForeground#7C3AED
commandCenter.activeBackground#C4B9D2
commandCenter.activeForeground#FFFFFF
commandCenter.background#D3CBDF
commandCenter.border#B0A3C580
commandCenter.foreground#E2E8F0
debugToolBar.background#D3CBDF
diffEditor.diagonalFill#4755694D
diffEditor.insertedLineBackground#10B9811A
diffEditor.insertedTextBackground#04785725
diffEditor.removedLineBackground#F43F5E1A
diffEditor.removedTextBackground#B91C1C25
dropdown.background#E0DBEC
dropdown.border#B0A3C5
dropdown.foreground#2E1065
editor.background#E0DBEC
editor.bracketMatchBackground#6D28D925
editor.bracketMatchBorder#6D28D9
editor.findMatchBackground#DDD6FEE6
editor.findMatchHighlightBackground#DDD6FEA0
editor.foreground#2E1065
editor.inactiveSelectionBackground#A78BFA30
editor.lineHighlightBackground#6D28D910
editor.selectionBackground#A78BFA60
editor.selectionHighlightBackground#A78BFA40
editor.wordHighlightBackground#6D28D922
editor.wordHighlightStrongBackground#6D28D944
editorBracketHighlight.foreground1#6D28D9
editorBracketHighlight.foreground2#B45309
editorBracketHighlight.foreground3#0369A1
editorBracketHighlight.foreground4#B91C1C
editorBracketHighlight.foreground5#047857
editorBracketHighlight.foreground6#4338CA
editorBracketHighlight.unexpectedBracket.foreground#DC2626
editorBracketPairGuide.activeBackground1#6D28D938
editorBracketPairGuide.activeBackground2#B4530938
editorBracketPairGuide.activeBackground3#0369A138
editorBracketPairGuide.activeBackground4#B91C1C38
editorBracketPairGuide.activeBackground5#04785738
editorBracketPairGuide.activeBackground6#4338CA38
editorBracketPairGuide.background1#6D28D922
editorBracketPairGuide.background2#B4530922
editorBracketPairGuide.background3#0369A122
editorBracketPairGuide.background4#B91C1C22
editorBracketPairGuide.background5#04785722
editorBracketPairGuide.background6#4338CA22
editorCodeLens.foreground#7C6C9F
editorCursor.foreground#6D28D9
editorError.foreground#B91C1C
editorGhostText.background#00000000
editorGhostText.foreground#7C6C9F80
editorGroupHeader.tabsBackground#D3CBDF
editorGuide.activeBackground#6D28D9AA
editorGuide.activeBackground1#6D28D9AA
editorGuide.activeBackground2#B45309AA
editorGuide.activeBackground3#0369A1AA
editorGuide.activeBackground4#B91C1CAA
editorGuide.activeBackground5#047857AA
editorGuide.activeBackground6#4338CAAA
editorGuide.background#47556933
editorGuide.background1#6D28D944
editorGuide.background2#B4530944
editorGuide.background3#0369A144
editorGuide.background4#B91C1C44
editorGuide.background5#04785744
editorGuide.background6#4338CA44
editorGutter.addedBackground#047857
editorGutter.deletedBackground#B91C1C
editorGutter.modifiedBackground#B45309
editorHoverWidget.background#D3CBDF
editorHoverWidget.border#6D28D980
editorHoverWidget.statusBarBackground#C4B9D2
editorIndentGuide.activeBackground#6D28D9AA
editorIndentGuide.activeBackground1#6D28D9AA
editorIndentGuide.activeBackground2#B45309AA
editorIndentGuide.activeBackground3#0369A1AA
editorIndentGuide.activeBackground4#B91C1CAA
editorIndentGuide.activeBackground5#047857AA
editorIndentGuide.activeBackground6#4338CAAA
editorIndentGuide.background#47556933
editorIndentGuide.background1#6D28D944
editorIndentGuide.background2#B4530944
editorIndentGuide.background3#0369A144
editorIndentGuide.background4#B91C1C44
editorIndentGuide.background5#04785744
editorIndentGuide.background6#4338CA44
editorInfo.foreground#0369A1
editorInlayHint.background#C4B9D280
editorInlayHint.foreground#2E1065AA
editorInlayHint.parameterForeground#0369A1AA
editorInlayHint.typeForeground#6D28D9AA
editorLineNumber.activeForeground#6D28D9
editorLineNumber.foreground#7C6C9F
editorOverviewRuler.errorForeground#B91C1C
editorOverviewRuler.infoForeground#0369A1
editorOverviewRuler.warningForeground#B45309
editorStickyScroll.background#D3CBDF
editorStickyScroll.border#6D28D940
editorStickyScrollHover.background#C4B9D2
editorWarning.foreground#B45309
editorWidget.background#D3CBDF
editorWidget.border#6D28D980
editorWidget.resizeBorder#6D28D9
focusBorder#6D28D980
foreground#2E1065
gitDecoration.addedResourceForeground#047857
gitDecoration.deletedResourceForeground#B91C1C
gitDecoration.ignoredResourceForeground#7C6C9F
gitDecoration.modifiedResourceForeground#B45309
gitDecoration.untrackedResourceForeground#0369A1
input.background#E0DBEC
input.border#B0A3C5
input.foreground#2E1065
inputOption.activeBorder#6D28D9
list.activeSelectionBackground#B0A3C580
list.activeSelectionForeground#2E1065
list.activeSelectionIconForeground#6D28D9
list.errorForeground#B91C1C
list.focusAndSelectionOutline#6D28D9
list.focusOutline#6D28D980
list.hoverBackground#B0A3C550
list.hoverForeground#6D28D9
list.inactiveSelectionBackground#B0A3C533
list.warningForeground#B45309
merge.border#6D28D980
merge.currentHeaderBackground#04785740
merge.incomingHeaderBackground#0369A140
minimap.background#C4B9D280
minimap.errorHighlight#B91C1CCC
minimap.findMatchHighlight#B45309CC
minimap.selectionHighlight#6D28D999
minimap.warningHighlight#B45309CC
notebook.cellBorderColor#B0A3C5
notebook.focusedCellBorder#6D28D9
notificationCenterHeader.background#D3CBDF
notifications.background#E0DBEC
notifications.border#B0A3C5
notifications.foreground#2E1065
panel.background#D3CBDF
panel.border#C4B9D2
panelTitle.activeBorder#6D28D9
panelTitle.activeForeground#2E1065
panelTitle.inactiveForeground#7C6C9F
peekView.border#6D28D9
peekViewEditor.background#E0DBEC
peekViewEditor.matchHighlightBackground#B4530944
peekViewResult.background#D3CBDF
peekViewResult.matchHighlightBackground#B4530944
peekViewResult.selectionBackground#B0A3C580
peekViewResult.selectionForeground#2E1065
peekViewTitle.background#D3CBDF
progressBar.background#6D28D9
scrollbarSlider.activeBackground#6D28D960
scrollbarSlider.background#B0A3C560
scrollbarSlider.hoverBackground#7C6C9F60
settings.headerForeground#2E1065
settings.modifiedItemIndicator#6D28D9
sideBar.background#D3CBDF
sideBar.border#C4B9D2
sideBar.foreground#2E1065
sideBarSectionHeader.background#C4B9D2
sideBarSectionHeader.border#B0A3C5
sideBarSectionHeader.foreground#2E1065
sideBarTitle.foreground#2E1065
statusBar.background#C4B9D2
statusBar.border#C4B9D2
statusBar.debuggingBackground#C4B9D2
statusBar.foreground#2E1065
statusBarItem.activeBackground#6D28D9
statusBarItem.hoverBackground#D3CBDF
symbolIcon.classForeground#6D28D9
symbolIcon.functionForeground#B45309
symbolIcon.variableForeground#2E1065
tab.activeBackground#E0DBEC
tab.activeBorder#6D28D9
tab.activeForeground#2E1065
tab.border#C4B9D2
tab.inactiveBackground#D3CBDF
tab.inactiveForeground#7C6C9F
tab.lastPinnedBorder#6D28D9
terminal.ansiBlack#D3CBDF
terminal.ansiBlue#0369A1
terminal.ansiBrightBlack#C4B9D2
terminal.ansiBrightBlue#38BDF8
terminal.ansiBrightCyan#38BDF8
terminal.ansiBrightGreen#059669
terminal.ansiBrightMagenta#A78BFA
terminal.ansiBrightRed#B91C1C
terminal.ansiBrightWhite#2E1065
terminal.ansiBrightYellow#D97706
terminal.ansiCyan#0369A1
terminal.ansiGreen#047857
terminal.ansiMagenta#6D28D9
terminal.ansiRed#B91C1C
terminal.ansiWhite#2E1065
terminal.ansiYellow#B45309
terminal.background#E0DBEC
terminal.foreground#2E1065
testing.iconFailed#B91C1C
testing.iconPassed#047857
testing.iconQueued#B45309
testing.iconSkipped#64748B
testing.iconUnset#94A3B8
testing.peekBorder#E11D48
testing.runAction#10B981
textLink.activeForeground#5B21B6
textLink.foreground#6D28D9
titleBar.activeBackground#C4B9D2
titleBar.activeForeground#2E1065
titleBar.inactiveBackground#C4B9D2
titleBar.inactiveForeground#7C6C9F
tree.activeIndentGuidesStroke#6D28D9
tree.indentGuidesStroke#B0A3C5
welcomePage.tileBackground#D3CBDF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.line, comment.block, punctuation.definition.comment	#047857	italic
string.quoted.docstring.multi.python	#047857	italic
variable, variable.other, variable.other.readwrite, meta.block	#2E1065	—
variable.parameter, meta.parameter.type.variable, variable.parameter.function	#4C1D95	—
variable.other.constant, variable.other.readonly	#4C1D95	bold
keyword.control, keyword.control.conditional, keyword.control.repeat, keyword.control.flow, keyword.control.trycatch, keyword.control.import, keyword.control.export	#5B21B6	bold
keyword, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression	#6D28D9	bold
keyword.operator, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.logical	#4338CA	—
punctuation, punctuation.separator, punctuation.terminator, meta.delimiter, punctuation.section, punctuation.definition.parameters, punctuation.definition.block	#6D28D9	—
entity.name.function, entity.name.function.constructor	#B45309	bold
meta.function-call, variable.function	#92400E	—
support.function, support.function.builtin, support.function.console	#0369A1	—
support.function.react, support.function.builtin.react, entity.name.function.react	#B45309	italic
meta.decorator, entity.name.function.decorator, punctuation.decorator	#B45309	italic
entity.name.type.class, support.class	#5B21B6	bold
entity.name.type.interface, entity.name.type.type-parameter	#0284C7	italic
entity.name.type.enum, entity.name.type.struct	#4338CA	bold
entity.name.type, support.type	#5B21B6	—
string, string.quoted, string.quoted.double, string.quoted.single	#1E3A8A	—
string.template	#0284C7	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#4338CA	—
string.regexp, string.regexp.character-class, punctuation.definition.string.regexp	#0F766E	—
constant.numeric	#B91C1C	—
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined	#DC2626	bold
support.type.property-name.json, meta.object-key.json, meta.structure.dictionary.key.json	#6D28D9	—
string.quoted.double.json, string.quoted.single.json	#1E3A8A	—
entity.name.tag, entity.name.tag.html, entity.name.tag.xml, punctuation.definition.tag	#6D28D9	—
entity.other.attribute-name, entity.other.attribute-name.html	#B45309	—
string.quoted.double.html, string.quoted.single.html	#1E3A8A	—
entity.name.tag.jsx, entity.name.tag.tsx	#6D28D9	—
support.class.component.jsx, support.class.component.tsx, entity.name.tag.custom.jsx, entity.name.tag.custom.tsx	#5B21B6	bold
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.js, entity.other.attribute-name.ts	#B45309	—
entity.other.attribute-name.event.jsx, entity.other.attribute-name.event.tsx	#92400E	italic
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less	#6D28D9	—
support.constant.property-value.css, meta.property-value.css, support.constant.color.w3c-standard-color-name.css	#1E3A8A	—
keyword.other.unit.css, keyword.other.unit.scss, constant.numeric.css	#B91C1C	—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss	#5B21B6	—
entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss	#B45309	bold
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#0369A1	italic
variable.css, variable.argument.css, custom-property	#0369A1	—
keyword.control.at-rule.media, keyword.control.at-rule.keyframes, keyword.control.at-rule.import	#5B21B6	bold
entity.other.attribute-name.class.css.tailwindcss	#1E3A8A	—
entity.other.attribute-name.variant.tailwindcss	#6D28D9	italic
entity.name.tag.template.html.vue, entity.name.tag.script.html.vue, entity.name.tag.style.html.vue	#6D28D9	bold
entity.other.attribute-name.directive.vue	#047857	italic
entity.other.attribute-name.directive.svelte, punctuation.definition.reactive.svelte	#B45309	italic
markup.heading, entity.name.section.markdown	#2E1065	bold
markup.inline.raw, markup.fenced_code.block	#1E3A8A	—
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python	#5B21B6	italic
support.function.magic.python	#B45309	bold
storage.modifier.lifetime.rust, entity.name.type.lifetime.rust	#B45309	italic
support.macro.rust, entity.name.function.macro.rust	#C2410C	bold
entity.name.type.trait.rust	#0284C7	italic
keyword.channel.go, keyword.goroutine.go	#5B21B6	bold
keyword.other.DML.sql, keyword.other.DDL.create.sql	#6D28D9	bold
support.function.scalar.sql, support.function.aggregate.sql	#B45309	—
keyword.other.special-method.dockerfile, entity.name.instruction.dockerfile	#6D28D9	bold
entity.name.tag.yaml, support.type.property-name.yaml	#6D28D9	—
variable.other.normal.shell, variable.other.special.shell	#2E1065	—