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

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#0A0812
activityBar.border#0A0812
activityBar.foreground#E2D9F3
activityBar.inactiveForeground#4C3A7A
activityBarBadge.background#7C3AED
activityBarBadge.foreground#E2D9F3
badge.background#7C3AED
badge.foreground#E2D9F3
breadcrumb.activeSelectionForeground#E2D9F3
breadcrumb.focusForeground#E2D9F3
breadcrumb.foreground#C4B5FDCC
breadcrumbPicker.background#110D22
button.background#7C3AED
button.foreground#E2D9F3
button.hoverBackground#6D28D9
chat.avatarBackground#7C3AED
chat.avatarForeground#E2D9F3
chat.requestBackground#110D22
chat.requestBorder#2D1B69B3
chat.slashCommandBackground#7C3AED33
chat.slashCommandForeground#A78BFA
commandCenter.activeBackground#1A1535
commandCenter.activeForeground#FFFFFF
commandCenter.background#110D22
commandCenter.border#2D1B6980
commandCenter.foreground#E2E8F0
debugToolBar.background#110D22
diffEditor.diagonalFill#4755694D
diffEditor.insertedLineBackground#10B9811A
diffEditor.insertedTextBackground#10B98133
diffEditor.removedLineBackground#F43F5E1A
diffEditor.removedTextBackground#F43F5E33
dropdown.background#1A1535
dropdown.border#2D1B69
dropdown.foreground#E2D9F3
editor.background#0D0A1A
editor.bracketMatchBackground#7C3AED40
editor.bracketMatchBorder#A78BFA
editor.findMatchBackground#2D1B69EE
editor.findMatchHighlightBackground#2D1B6999
editor.foreground#E2D9F3
editor.inactiveSelectionBackground#2D1B6955
editor.lineHighlightBackground#6D28D940
editor.selectionBackground#2D1B69B3
editor.selectionHighlightBackground#2D1B6988
editor.wordHighlightBackground#7C3AED33
editor.wordHighlightStrongBackground#7C3AED55
editorBracketHighlight.foreground1#FBBF24
editorBracketHighlight.foreground2#38BDF8
editorBracketHighlight.foreground3#A78BFA
editorBracketHighlight.foreground4#F43F5E
editorBracketHighlight.foreground5#34D399
editorBracketHighlight.foreground6#818CF8
editorBracketHighlight.unexpectedBracket.foreground#EF4444
editorBracketPairGuide.activeBackground1#FBBF2438
editorBracketPairGuide.activeBackground2#38BDF838
editorBracketPairGuide.activeBackground3#A78BFA38
editorBracketPairGuide.activeBackground4#F43F5E38
editorBracketPairGuide.activeBackground5#34D39938
editorBracketPairGuide.activeBackground6#818CF838
editorBracketPairGuide.background1#FBBF2422
editorBracketPairGuide.background2#38BDF822
editorBracketPairGuide.background3#A78BFA22
editorBracketPairGuide.background4#F43F5E22
editorBracketPairGuide.background5#34D39922
editorBracketPairGuide.background6#818CF822
editorCodeLens.foreground#C4B5FD99
editorCursor.foreground#FBBF24
editorError.foreground#F43F5E
editorGhostText.background#00000000
editorGhostText.foreground#C4B5FD66
editorGroupHeader.tabsBackground#110D22
editorGuide.activeBackground#7C3AEDAA
editorGuide.activeBackground1#FBBF24AA
editorGuide.activeBackground2#38BDF8AA
editorGuide.activeBackground3#A78BFAAA
editorGuide.activeBackground4#F43F5EAA
editorGuide.activeBackground5#34D399AA
editorGuide.activeBackground6#818CF8AA
editorGuide.background#47556933
editorGuide.background1#FBBF2444
editorGuide.background2#38BDF844
editorGuide.background3#A78BFA44
editorGuide.background4#F43F5E44
editorGuide.background5#34D39944
editorGuide.background6#818CF844
editorGutter.addedBackground#10B981
editorGutter.deletedBackground#F43F5E
editorGutter.modifiedBackground#FBBF24
editorHoverWidget.background#110D22
editorHoverWidget.border#7C3AED80
editorHoverWidget.statusBarBackground#1A1535
editorIndentGuide.activeBackground#7C3AEDAA
editorIndentGuide.activeBackground1#FBBF24AA
editorIndentGuide.activeBackground2#38BDF8AA
editorIndentGuide.activeBackground3#A78BFAAA
editorIndentGuide.activeBackground4#F43F5EAA
editorIndentGuide.activeBackground5#34D399AA
editorIndentGuide.activeBackground6#818CF8AA
editorIndentGuide.background#47556933
editorIndentGuide.background1#FBBF2444
editorIndentGuide.background2#38BDF844
editorIndentGuide.background3#A78BFA44
editorIndentGuide.background4#F43F5E44
editorIndentGuide.background5#34D39944
editorIndentGuide.background6#818CF844
editorInfo.foreground#38BDF8
editorInlayHint.background#1A153580
editorInlayHint.foreground#C4B5FDAA
editorInlayHint.parameterForeground#93C5FDAA
editorInlayHint.typeForeground#A78BFAAA
editorLineNumber.activeForeground#FBBF24
editorLineNumber.foreground#C4B5FD4D
editorOverviewRuler.errorForeground#F43F5E
editorOverviewRuler.infoForeground#38BDF8
editorOverviewRuler.warningForeground#FBBF24
editorStickyScroll.background#110D22
editorStickyScroll.border#7C3AED40
editorStickyScrollHover.background#1A1535
editorWarning.foreground#FBBF24
editorWidget.background#110D22
editorWidget.border#7C3AED80
editorWidget.resizeBorder#7C3AED
focusBorder#7C3AED80
foreground#C4B5FD
gitDecoration.addedResourceForeground#10B981
gitDecoration.deletedResourceForeground#F43F5E
gitDecoration.ignoredResourceForeground#4C3A7A
gitDecoration.modifiedResourceForeground#FBBF24
gitDecoration.untrackedResourceForeground#38BDF8
input.background#1A1535
input.border#2D1B69
input.foreground#E2D9F3
inputOption.activeBorder#7C3AED
list.activeSelectionBackground#2D1B69CC
list.activeSelectionForeground#E2D9F3
list.activeSelectionIconForeground#FBBF24
list.errorForeground#F43F5E
list.focusAndSelectionOutline#7C3AED
list.focusOutline#7C3AED80
list.hoverBackground#1A153580
list.hoverForeground#FBBF24
list.inactiveSelectionBackground#2D1B6940
list.warningForeground#FBBF24
merge.border#7C3AED80
merge.currentHeaderBackground#10B98155
merge.incomingHeaderBackground#38BDF855
minimap.background#0A081280
minimap.errorHighlight#F43F5ECC
minimap.findMatchHighlight#FBBF24CC
minimap.selectionHighlight#7C3AED99
minimap.warningHighlight#FBBF24CC
notebook.cellBorderColor#2D1B69
notebook.focusedCellBorder#7C3AED
notificationCenterHeader.background#0A0812
notifications.background#110D22
notifications.border#2D1B69
notifications.foreground#E2D9F3
panel.background#110D22
panel.border#0A0812
panelTitle.activeBorder#7C3AED
panelTitle.activeForeground#E2D9F3
panelTitle.inactiveForeground#4C3A7A
peekView.border#7C3AED
peekViewEditor.background#0D0A1A
peekViewEditor.matchHighlightBackground#FBBF2444
peekViewResult.background#110D22
peekViewResult.matchHighlightBackground#FBBF2444
peekViewResult.selectionBackground#2D1B69CC
peekViewResult.selectionForeground#E2D9F3
peekViewTitle.background#110D22
progressBar.background#7C3AED
scrollbarSlider.activeBackground#7C3AED80
scrollbarSlider.background#2D1B6980
scrollbarSlider.hoverBackground#4C3A7A80
settings.headerForeground#E2D9F3
settings.modifiedItemIndicator#7C3AED
sideBar.background#0A0812
sideBar.border#2D1B69B3
sideBar.foreground#C4B5FD
sideBarSectionHeader.background#110D22
sideBarSectionHeader.border#2D1B6980
sideBarSectionHeader.foreground#C4B5FD
sideBarTitle.foreground#E2D9F3
statusBar.background#0A0812
statusBar.border#0A0812
statusBar.debuggingBackground#0A0812
statusBar.foreground#C4B5FD
statusBarItem.activeBackground#7C3AED
statusBarItem.hoverBackground#1A1535
symbolIcon.classForeground#C4B5FD
symbolIcon.functionForeground#FBBF24
symbolIcon.variableForeground#E2D9F3
tab.activeBackground#1A1535
tab.activeBorder#7C3AED
tab.activeForeground#E2D9F3
tab.border#0A0812
tab.inactiveBackground#110D22
tab.inactiveForeground#C4B5FD80
tab.lastPinnedBorder#7C3AED
terminal.ansiBlack#0A0812
terminal.ansiBlue#60A5FA
terminal.ansiBrightBlack#1A1535
terminal.ansiBrightBlue#60A5FA
terminal.ansiBrightCyan#38BDF8
terminal.ansiBrightGreen#34D399
terminal.ansiBrightMagenta#A78BFA
terminal.ansiBrightRed#F43F5E
terminal.ansiBrightWhite#E2D9F3
terminal.ansiBrightYellow#FBBF24
terminal.ansiCyan#38BDF8
terminal.ansiGreen#10B981
terminal.ansiMagenta#7C3AED
terminal.ansiRed#F43F5E
terminal.ansiWhite#C4B5FD
terminal.ansiYellow#FBBF24
terminal.background#0D0A1A
terminal.foreground#E2D9F3
testing.iconFailed#F43F5E
testing.iconPassed#10B981
testing.iconQueued#FBBF24
testing.iconSkipped#64748B
testing.iconUnset#94A3B8
testing.peekBorder#E11D48
testing.runAction#10B981
textLink.activeForeground#C4B5FD
textLink.foreground#A78BFA
titleBar.activeBackground#0A0812
titleBar.activeForeground#E2D9F3
titleBar.inactiveBackground#0A0812
titleBar.inactiveForeground#4C3A7A
tree.activeIndentGuidesStroke#7C3AED
tree.indentGuidesStroke#4C3A7A99
welcomePage.tileBackground#1A1535

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.line, comment.block, punctuation.definition.comment	#10B981	italic
string.quoted.docstring.multi.python	#10B981	italic
variable, variable.other, variable.other.readwrite, meta.block	#E2D9F3	—
variable.parameter, meta.parameter.type.variable, variable.parameter.function	#CBD5E1	—
variable.other.constant, variable.other.readonly	#C4B5FD	bold
keyword.control, keyword.control.conditional, keyword.control.repeat, keyword.control.flow, keyword.control.trycatch, keyword.control.import, keyword.control.export	#C084FC	bold
keyword, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression	#A78BFA	bold
keyword.operator, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.logical	#818CF8	—
punctuation, punctuation.separator, punctuation.terminator, meta.delimiter, punctuation.section, punctuation.definition.parameters, punctuation.definition.block	#C4B5FD	—
entity.name.function, entity.name.function.constructor	#FBBF24	bold
meta.function-call, variable.function	#F59E0B	—
support.function, support.function.builtin, support.function.console	#06B6D4	—
support.function.react, support.function.builtin.react, entity.name.function.react	#FBBF24	italic
meta.decorator, entity.name.function.decorator, punctuation.decorator	#FBBF24	italic
entity.name.type.class, support.class	#8B5CF6	bold
entity.name.type.interface, entity.name.type.type-parameter	#22D3EE	italic
entity.name.type.enum, entity.name.type.struct	#818CF8	bold
entity.name.type, support.type	#8B5CF6	—
string, string.quoted, string.quoted.double, string.quoted.single	#38BDF8	—
string.template	#60A5FA	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#818CF8	—
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	#A78BFA	—
string.quoted.double.json, string.quoted.single.json	#38BDF8	—
entity.name.tag, entity.name.tag.html, entity.name.tag.xml, punctuation.definition.tag	#C084FC	—
entity.other.attribute-name, entity.other.attribute-name.html	#FBBF24	—
string.quoted.double.html, string.quoted.single.html	#38BDF8	—
entity.name.tag.jsx, entity.name.tag.tsx	#C084FC	—
support.class.component.jsx, support.class.component.tsx, entity.name.tag.custom.jsx, entity.name.tag.custom.tsx	#A855F7	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	#F59E0B	italic
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less	#A78BFA	—
support.constant.property-value.css, meta.property-value.css, support.constant.color.w3c-standard-color-name.css	#38BDF8	—
keyword.other.unit.css, keyword.other.unit.scss, constant.numeric.css	#F43F5E	—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss	#C4B5FD	—
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	#22D3EE	italic
variable.css, variable.argument.css, custom-property	#06B6D4	—
keyword.control.at-rule.media, keyword.control.at-rule.keyframes, keyword.control.at-rule.import	#C084FC	bold
entity.other.attribute-name.class.css.tailwindcss	#38BDF8	—
entity.other.attribute-name.variant.tailwindcss	#C084FC	italic
entity.name.tag.template.html.vue, entity.name.tag.script.html.vue, entity.name.tag.style.html.vue	#C084FC	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	#E2D9F3	bold
markup.inline.raw, markup.fenced_code.block	#38BDF8	—
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python	#C084FC	italic
support.function.magic.python	#FBBF24	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	#22D3EE	italic
keyword.channel.go, keyword.goroutine.go	#C084FC	bold
keyword.other.DML.sql, keyword.other.DDL.create.sql	#A78BFA	bold
support.function.scalar.sql, support.function.aggregate.sql	#FBBF24	—
keyword.other.special-method.dockerfile, entity.name.instruction.dockerfile	#A78BFA	bold
entity.name.tag.yaml, support.type.property-name.yaml	#A78BFA	—
variable.other.normal.shell, variable.other.special.shell	#E2D9F3	—

VS Code preview

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

Shadow Monarch Abyss — Shadow Monarch Abyss

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#030206
activityBar.border#030206
activityBar.foreground#E2D9F3
activityBar.inactiveForeground#4C3A7A
activityBarBadge.background#C084FC
activityBarBadge.foreground#E2D9F3
badge.background#C084FC
badge.foreground#E2D9F3
breadcrumb.activeSelectionForeground#E2D9F3
breadcrumb.focusForeground#E2D9F3
breadcrumb.foreground#C4B5FDCC
breadcrumbPicker.background#0B0813
button.background#C084FC
button.foreground#E2D9F3
button.hoverBackground#A855F7
chat.avatarBackground#7C3AED
chat.avatarForeground#E2D9F3
chat.requestBackground#08061A
chat.requestBorder#2D1B69B3
chat.slashCommandBackground#7C3AED33
chat.slashCommandForeground#C4B5FD
commandCenter.activeBackground#150D26
commandCenter.activeForeground#FFFFFF
commandCenter.background#0B0813
commandCenter.border#2D1B6980
commandCenter.foreground#E2E8F0
debugToolBar.background#0B0813
diffEditor.diagonalFill#4755694D
diffEditor.insertedLineBackground#10B9811A
diffEditor.insertedTextBackground#10B98133
diffEditor.removedLineBackground#F43F5E1A
diffEditor.removedTextBackground#E11D4833
dropdown.background#150D26
dropdown.border#2D1B69
dropdown.foreground#E2D9F3
editor.background#05040B
editor.bracketMatchBackground#C084FC40
editor.bracketMatchBorder#C084FC
editor.findMatchBackground#2D1B69EE
editor.findMatchHighlightBackground#2D1B6999
editor.foreground#E2D9F3
editor.inactiveSelectionBackground#2D1B6955
editor.lineHighlightBackground#C084FC22
editor.selectionBackground#2D1B69B3
editor.selectionHighlightBackground#2D1B6988
editor.wordHighlightBackground#C084FC33
editor.wordHighlightStrongBackground#C084FC55
editorBracketHighlight.foreground1#F59E0B
editorBracketHighlight.foreground2#22D3EE
editorBracketHighlight.foreground3#C084FC
editorBracketHighlight.foreground4#FB7185
editorBracketHighlight.foreground5#2DD4BF
editorBracketHighlight.foreground6#A5B4FC
editorBracketHighlight.unexpectedBracket.foreground#EF4444
editorBracketPairGuide.activeBackground1#F59E0B38
editorBracketPairGuide.activeBackground2#22D3EE38
editorBracketPairGuide.activeBackground3#C084FC38
editorBracketPairGuide.activeBackground4#FB718538
editorBracketPairGuide.activeBackground5#2DD4BF38
editorBracketPairGuide.activeBackground6#A5B4FC38
editorBracketPairGuide.background1#F59E0B22
editorBracketPairGuide.background2#22D3EE22
editorBracketPairGuide.background3#C084FC22
editorBracketPairGuide.background4#FB718522
editorBracketPairGuide.background5#2DD4BF22
editorBracketPairGuide.background6#A5B4FC22
editorCodeLens.foreground#C4B5FD99
editorCursor.foreground#06B6D4
editorError.foreground#E11D48
editorGhostText.background#00000000
editorGhostText.foreground#C4B5FD66
editorGroupHeader.tabsBackground#0B0813
editorGuide.activeBackground#C084FCAA
editorGuide.activeBackground1#F59E0BAA
editorGuide.activeBackground2#22D3EEAA
editorGuide.activeBackground3#C084FCAA
editorGuide.activeBackground4#FB7185AA
editorGuide.activeBackground5#2DD4BFAA
editorGuide.activeBackground6#A5B4FCAA
editorGuide.background#47556933
editorGuide.background1#F59E0B44
editorGuide.background2#22D3EE44
editorGuide.background3#C084FC44
editorGuide.background4#FB718544
editorGuide.background5#2DD4BF44
editorGuide.background6#A5B4FC44
editorGutter.addedBackground#10B981
editorGutter.deletedBackground#E11D48
editorGutter.modifiedBackground#C084FC
editorHoverWidget.background#0B0813
editorHoverWidget.border#C084FC80
editorHoverWidget.statusBarBackground#150D26
editorIndentGuide.activeBackground#C084FCAA
editorIndentGuide.activeBackground1#F59E0BAA
editorIndentGuide.activeBackground2#22D3EEAA
editorIndentGuide.activeBackground3#C084FCAA
editorIndentGuide.activeBackground4#FB7185AA
editorIndentGuide.activeBackground5#2DD4BFAA
editorIndentGuide.activeBackground6#A5B4FCAA
editorIndentGuide.background#47556933
editorIndentGuide.background1#F59E0B44
editorIndentGuide.background2#22D3EE44
editorIndentGuide.background3#C084FC44
editorIndentGuide.background4#FB718544
editorIndentGuide.background5#2DD4BF44
editorIndentGuide.background6#A5B4FC44
editorInfo.foreground#06B6D4
editorInlayHint.background#150D2680
editorInlayHint.foreground#C4B5FDAA
editorInlayHint.parameterForeground#38BDF8AA
editorInlayHint.typeForeground#C084FCAA
editorLineNumber.activeForeground#06B6D4
editorLineNumber.foreground#4C3A7A99
editorOverviewRuler.errorForeground#E11D48
editorOverviewRuler.infoForeground#06B6D4
editorOverviewRuler.warningForeground#F59E0B
editorStickyScroll.background#0B0813
editorStickyScroll.border#C084FC40
editorStickyScrollHover.background#150D26
editorWarning.foreground#F59E0B
editorWidget.background#0B0813
editorWidget.border#C084FC80
editorWidget.resizeBorder#C084FC
focusBorder#C084FC80
foreground#C4B5FD
gitDecoration.addedResourceForeground#10B981
gitDecoration.deletedResourceForeground#F43F5E
gitDecoration.ignoredResourceForeground#4C3A7A
gitDecoration.modifiedResourceForeground#C084FC
gitDecoration.untrackedResourceForeground#06B6D4
input.background#150D26
input.border#2D1B69
input.foreground#E2D9F3
inputOption.activeBorder#C084FC
list.activeSelectionBackground#2D1B69CC
list.activeSelectionForeground#E2D9F3
list.activeSelectionIconForeground#06B6D4
list.errorForeground#F43F5E
list.focusAndSelectionOutline#C084FC
list.focusOutline#C084FC80
list.hoverBackground#150D2680
list.hoverForeground#06B6D4
list.inactiveSelectionBackground#2D1B6940
list.warningForeground#FBBF24
merge.border#C084FC80
merge.currentHeaderBackground#10B98155
merge.incomingHeaderBackground#06B6D455
minimap.background#03020680
minimap.errorHighlight#E11D48CC
minimap.findMatchHighlight#F59E0BCC
minimap.selectionHighlight#C084FC99
minimap.warningHighlight#F59E0BCC
notebook.cellBorderColor#2D1B69
notebook.focusedCellBorder#C084FC
notificationCenterHeader.background#030206
notifications.background#0B0813
notifications.border#2D1B69
notifications.foreground#E2D9F3
panel.background#0B0813
panel.border#030206
panelTitle.activeBorder#C084FC
panelTitle.activeForeground#E2D9F3
panelTitle.inactiveForeground#4C3A7A
peekView.border#C084FC
peekViewEditor.background#05040B
peekViewEditor.matchHighlightBackground#F59E0B44
peekViewResult.background#0B0813
peekViewResult.matchHighlightBackground#F59E0B44
peekViewResult.selectionBackground#2D1B69CC
peekViewResult.selectionForeground#E2D9F3
peekViewTitle.background#0B0813
progressBar.background#C084FC
scrollbarSlider.activeBackground#C084FC80
scrollbarSlider.background#2D1B6980
scrollbarSlider.hoverBackground#4C3A7A80
settings.headerForeground#E2D9F3
settings.modifiedItemIndicator#C084FC
sideBar.background#0A0812
sideBar.border#2D1B69B3
sideBar.foreground#C4B5FD
sideBarSectionHeader.background#0B0813
sideBarSectionHeader.border#2D1B6980
sideBarSectionHeader.foreground#C4B5FD
sideBarTitle.foreground#E2D9F3
statusBar.background#030206
statusBar.border#030206
statusBar.debuggingBackground#030206
statusBar.foreground#C4B5FD
statusBarItem.activeBackground#C084FC
statusBarItem.hoverBackground#150D26
symbolIcon.classForeground#C4B5FD
symbolIcon.functionForeground#06B6D4
symbolIcon.variableForeground#E2D9F3
tab.activeBackground#150D26
tab.activeBorder#C084FC
tab.activeForeground#E2D9F3
tab.border#030206
tab.inactiveBackground#0B0813
tab.inactiveForeground#C4B5FD80
tab.lastPinnedBorder#C084FC
terminal.ansiBlack#030206
terminal.ansiBlue#38BDF8
terminal.ansiBrightBlack#150D26
terminal.ansiBrightBlue#38BDF8
terminal.ansiBrightCyan#06B6D4
terminal.ansiBrightGreen#34D399
terminal.ansiBrightMagenta#C084FC
terminal.ansiBrightRed#E11D48
terminal.ansiBrightWhite#E2D9F3
terminal.ansiBrightYellow#FBBF24
terminal.ansiCyan#06B6D4
terminal.ansiGreen#10B981
terminal.ansiMagenta#C084FC
terminal.ansiRed#E11D48
terminal.ansiWhite#C4B5FD
terminal.ansiYellow#FBBF24
terminal.background#05040B
terminal.foreground#E2D9F3
testing.iconFailed#E11D48
testing.iconPassed#10B981
testing.iconQueued#F59E0B
testing.iconSkipped#64748B
testing.iconUnset#94A3B8
testing.peekBorder#E11D48
testing.runAction#10B981
textLink.activeForeground#C4B5FD
textLink.foreground#C084FC
titleBar.activeBackground#030206
titleBar.activeForeground#E2D9F3
titleBar.inactiveBackground#030206
titleBar.inactiveForeground#4C3A7A
tree.activeIndentGuidesStroke#C084FC
tree.indentGuidesStroke#4C3A7A99
welcomePage.tileBackground#150D26

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.line, comment.block, punctuation.definition.comment	#10B981	italic
string.quoted.docstring.multi.python	#10B981	italic
variable, variable.other, variable.other.readwrite, meta.block	#E2D9F3	—
variable.parameter, meta.parameter.type.variable, variable.parameter.function	#CBD5E1	—
variable.other.constant, variable.other.readonly	#C4B5FD	bold
keyword.control, keyword.control.conditional, keyword.control.repeat, keyword.control.flow, keyword.control.trycatch, keyword.control.import, keyword.control.export	#F472B6	bold
keyword, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression	#E081F9	bold
keyword.operator, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.logical	#818CF8	—
punctuation, punctuation.separator, punctuation.terminator, meta.delimiter, punctuation.section, punctuation.definition.parameters, punctuation.definition.block	#C4B5FD	—
entity.name.function, entity.name.function.constructor	#06B6D4	bold
meta.function-call, variable.function	#22D3EE	—
support.function, support.function.builtin, support.function.console	#C084FC	—
support.function.react, support.function.builtin.react, entity.name.function.react	#06B6D4	italic
meta.decorator, entity.name.function.decorator, punctuation.decorator	#F59E0B	italic
entity.name.type.class, support.class	#A855F7	bold
entity.name.type.interface, entity.name.type.type-parameter	#A5B4FC	italic
entity.name.type.enum, entity.name.type.struct	#C084FC	bold
entity.name.type, support.type	#A855F7	—
string, string.quoted, string.quoted.double, string.quoted.single	#38BDF8	—
string.template	#60A5FA	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#818CF8	—
string.regexp, string.regexp.character-class, punctuation.definition.string.regexp	#2DD4BF	—
constant.numeric	#FB7185	—
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined	#F43F5E	bold
support.type.property-name.json, meta.object-key.json, meta.structure.dictionary.key.json	#E081F9	—
string.quoted.double.json, string.quoted.single.json	#38BDF8	—
entity.name.tag, entity.name.tag.html, entity.name.tag.xml, punctuation.definition.tag	#C084FC	—
entity.other.attribute-name, entity.other.attribute-name.html	#F59E0B	—
string.quoted.double.html, string.quoted.single.html	#38BDF8	—
entity.name.tag.jsx, entity.name.tag.tsx	#C084FC	—
support.class.component.jsx, support.class.component.tsx, entity.name.tag.custom.jsx, entity.name.tag.custom.tsx	#C084FC	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	#E081F9	—
support.constant.property-value.css, meta.property-value.css, support.constant.color.w3c-standard-color-name.css	#22D3EE	—
keyword.other.unit.css, keyword.other.unit.scss, constant.numeric.css	#FB7185	—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss	#A5B4FC	—
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	#06B6D4	italic
variable.css, variable.argument.css, custom-property	#22D3EE	—
keyword.control.at-rule.media, keyword.control.at-rule.keyframes, keyword.control.at-rule.import	#F472B6	bold
entity.other.attribute-name.class.css.tailwindcss	#38BDF8	—
entity.other.attribute-name.variant.tailwindcss	#E081F9	italic
entity.name.tag.template.html.vue, entity.name.tag.script.html.vue, entity.name.tag.style.html.vue	#C084FC	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	#E2D9F3	bold
markup.inline.raw, markup.fenced_code.block	#38BDF8	—
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python	#F472B6	italic
support.function.magic.python	#06B6D4	bold
storage.modifier.lifetime.rust, entity.name.type.lifetime.rust	#F59E0B	italic
support.macro.rust, entity.name.function.macro.rust	#FB923C	bold
entity.name.type.trait.rust	#A5B4FC	italic
keyword.channel.go, keyword.goroutine.go	#F472B6	bold
keyword.other.DML.sql, keyword.other.DDL.create.sql	#E081F9	bold
support.function.scalar.sql, support.function.aggregate.sql	#06B6D4	—
keyword.other.special-method.dockerfile, entity.name.instruction.dockerfile	#E081F9	bold
entity.name.tag.yaml, support.type.property-name.yaml	#E081F9	—
variable.other.normal.shell, variable.other.special.shell	#E2D9F3	—

VS Code preview

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

Shadow Monarch Abyss — Shadow Monarch Dawn

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#F5ECD0
activityBar.border#F5ECD0
activityBar.foreground#1C1917
activityBar.inactiveForeground#A08060
activityBarBadge.background#B45309
activityBarBadge.foreground#FFFBF0
badge.background#B45309
badge.foreground#FFFBF0
breadcrumb.activeSelectionForeground#1C1917
breadcrumb.focusForeground#1C1917
breadcrumb.foreground#78350FCC
breadcrumbPicker.background#FAF3E0
button.background#B45309
button.foreground#FFFBF0
button.hoverBackground#92400E
chat.avatarBackground#B45309
chat.avatarForeground#FFFBF0
chat.requestBackground#FAF3E0
chat.requestBorder#E8D5B0
chat.slashCommandBackground#B453091A
chat.slashCommandForeground#92400E
commandCenter.activeBackground#F5ECD0
commandCenter.activeForeground#FFFFFF
commandCenter.background#FAF3E0
commandCenter.border#E8D5B080
commandCenter.foreground#E2E8F0
debugToolBar.background#FAF3E0
diffEditor.diagonalFill#4755694D
diffEditor.insertedLineBackground#10B9811A
diffEditor.insertedTextBackground#04785725
diffEditor.removedLineBackground#F43F5E1A
diffEditor.removedTextBackground#DC262625
dropdown.background#FFFBF0
dropdown.border#E8D5B0
dropdown.foreground#1C1917
editor.background#FFFBF0
editor.bracketMatchBackground#B4530925
editor.bracketMatchBorder#B45309
editor.findMatchBackground#F5ECD0E6
editor.findMatchHighlightBackground#F5ECD0A0
editor.foreground#1C1917
editor.inactiveSelectionBackground#D9A44140
editor.lineHighlightBackground#D9770610
editor.selectionBackground#D9A44180
editor.selectionHighlightBackground#D9A44150
editor.wordHighlightBackground#B4530922
editor.wordHighlightStrongBackground#B4530944
editorBracketHighlight.foreground1#B45309
editorBracketHighlight.foreground2#D97706
editorBracketHighlight.foreground3#0284C7
editorBracketHighlight.foreground4#DC2626
editorBracketHighlight.foreground5#047857
editorBracketHighlight.foreground6#78350F
editorBracketHighlight.unexpectedBracket.foreground#DC2626
editorBracketPairGuide.activeBackground1#B4530938
editorBracketPairGuide.activeBackground2#D9770638
editorBracketPairGuide.activeBackground3#0284C738
editorBracketPairGuide.activeBackground4#DC262638
editorBracketPairGuide.activeBackground5#04785738
editorBracketPairGuide.activeBackground6#78350F38
editorBracketPairGuide.background1#B4530922
editorBracketPairGuide.background2#D9770622
editorBracketPairGuide.background3#0284C722
editorBracketPairGuide.background4#DC262622
editorBracketPairGuide.background5#04785722
editorBracketPairGuide.background6#78350F22
editorCodeLens.foreground#A08060
editorCursor.foreground#D97706
editorError.foreground#DC2626
editorGhostText.background#00000000
editorGhostText.foreground#A0806080
editorGroupHeader.tabsBackground#FAF3E0
editorGuide.activeBackground#B45309AA
editorGuide.activeBackground1#B45309AA
editorGuide.activeBackground2#D97706AA
editorGuide.activeBackground3#0284C7AA
editorGuide.activeBackground4#DC2626AA
editorGuide.activeBackground5#047857AA
editorGuide.activeBackground6#78350FAA
editorGuide.background#47556933
editorGuide.background1#B4530944
editorGuide.background2#D9770644
editorGuide.background3#0284C744
editorGuide.background4#DC262644
editorGuide.background5#04785744
editorGuide.background6#78350F44
editorGutter.addedBackground#047857
editorGutter.deletedBackground#DC2626
editorGutter.modifiedBackground#B45309
editorHoverWidget.background#FAF3E0
editorHoverWidget.border#B4530980
editorHoverWidget.statusBarBackground#F5ECD0
editorIndentGuide.activeBackground#B45309AA
editorIndentGuide.activeBackground1#B45309AA
editorIndentGuide.activeBackground2#D97706AA
editorIndentGuide.activeBackground3#0284C7AA
editorIndentGuide.activeBackground4#DC2626AA
editorIndentGuide.activeBackground5#047857AA
editorIndentGuide.activeBackground6#78350FAA
editorIndentGuide.background#47556933
editorIndentGuide.background1#B4530944
editorIndentGuide.background2#D9770644
editorIndentGuide.background3#0284C744
editorIndentGuide.background4#DC262644
editorIndentGuide.background5#04785744
editorIndentGuide.background6#78350F44
editorInfo.foreground#0284C7
editorInlayHint.background#F5ECD080
editorInlayHint.foreground#78350FAA
editorInlayHint.parameterForeground#0284C7AA
editorInlayHint.typeForeground#B45309AA
editorLineNumber.activeForeground#D97706
editorLineNumber.foreground#A08060
editorOverviewRuler.errorForeground#DC2626
editorOverviewRuler.infoForeground#0284C7
editorOverviewRuler.warningForeground#B45309
editorStickyScroll.background#FAF3E0
editorStickyScroll.border#B4530940
editorStickyScrollHover.background#F5ECD0
editorWarning.foreground#B45309
editorWidget.background#FAF3E0
editorWidget.border#B4530980
editorWidget.resizeBorder#B45309
focusBorder#B4530980
foreground#78350F
gitDecoration.addedResourceForeground#047857
gitDecoration.deletedResourceForeground#DC2626
gitDecoration.ignoredResourceForeground#A08060
gitDecoration.modifiedResourceForeground#B45309
gitDecoration.untrackedResourceForeground#0284C7
input.background#FFFBF0
input.border#E8D5B0
input.foreground#1C1917
inputOption.activeBorder#B45309
list.activeSelectionBackground#E8D5B080
list.activeSelectionForeground#1C1917
list.activeSelectionIconForeground#B45309
list.errorForeground#DC2626
list.focusAndSelectionOutline#B45309
list.focusOutline#B4530980
list.hoverBackground#E8D5B050
list.hoverForeground#B45309
list.inactiveSelectionBackground#E8D5B033
list.warningForeground#B45309
merge.border#B4530980
merge.currentHeaderBackground#04785740
merge.incomingHeaderBackground#0284C740
minimap.background#FAF3E080
minimap.errorHighlight#DC2626CC
minimap.findMatchHighlight#B45309CC
minimap.selectionHighlight#B4530999
minimap.warningHighlight#B45309CC
notebook.cellBorderColor#E8D5B0
notebook.focusedCellBorder#B45309
notificationCenterHeader.background#FAF3E0
notifications.background#FFFBF0
notifications.border#E8D5B0
notifications.foreground#1C1917
panel.background#FAF3E0
panel.border#F5ECD0
panelTitle.activeBorder#B45309
panelTitle.activeForeground#1C1917
panelTitle.inactiveForeground#A08060
peekView.border#B45309
peekViewEditor.background#FFFBF0
peekViewEditor.matchHighlightBackground#B4530944
peekViewResult.background#FAF3E0
peekViewResult.matchHighlightBackground#B4530944
peekViewResult.selectionBackground#E8D5B080
peekViewResult.selectionForeground#1C1917
peekViewTitle.background#FAF3E0
progressBar.background#B45309
scrollbarSlider.activeBackground#B4530960
scrollbarSlider.background#E8D5B060
scrollbarSlider.hoverBackground#A0806060
settings.headerForeground#1C1917
settings.modifiedItemIndicator#B45309
sideBar.background#FAF3E0
sideBar.border#F5ECD0
sideBar.foreground#78350F
sideBarSectionHeader.background#F5ECD0
sideBarSectionHeader.border#E8D5B0
sideBarSectionHeader.foreground#78350F
sideBarTitle.foreground#1C1917
statusBar.background#F5ECD0
statusBar.border#F5ECD0
statusBar.debuggingBackground#F5ECD0
statusBar.foreground#78350F
statusBarItem.activeBackground#B45309
statusBarItem.hoverBackground#FAF3E0
symbolIcon.classForeground#B45309
symbolIcon.functionForeground#D97706
symbolIcon.variableForeground#1C1917
tab.activeBackground#FFFBF0
tab.activeBorder#B45309
tab.activeForeground#1C1917
tab.border#F5ECD0
tab.inactiveBackground#FAF3E0
tab.inactiveForeground#A08060
tab.lastPinnedBorder#B45309
terminal.ansiBlack#FAF3E0
terminal.ansiBlue#0284C7
terminal.ansiBrightBlack#F5ECD0
terminal.ansiBrightBlue#38BDF8
terminal.ansiBrightCyan#38BDF8
terminal.ansiBrightGreen#059669
terminal.ansiBrightMagenta#D97706
terminal.ansiBrightRed#DC2626
terminal.ansiBrightWhite#1C1917
terminal.ansiBrightYellow#D97706
terminal.ansiCyan#0284C7
terminal.ansiGreen#047857
terminal.ansiMagenta#B45309
terminal.ansiRed#DC2626
terminal.ansiWhite#78350F
terminal.ansiYellow#B45309
terminal.background#FFFBF0
terminal.foreground#1C1917
testing.iconFailed#DC2626
testing.iconPassed#047857
testing.iconQueued#B45309
testing.iconSkipped#64748B
testing.iconUnset#94A3B8
testing.peekBorder#E11D48
testing.runAction#10B981
textLink.activeForeground#92400E
textLink.foreground#B45309
titleBar.activeBackground#F5ECD0
titleBar.activeForeground#1C1917
titleBar.inactiveBackground#F5ECD0
titleBar.inactiveForeground#A08060
tree.activeIndentGuidesStroke#B45309
tree.indentGuidesStroke#E8D5B0
welcomePage.tileBackground#FAF3E0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.line, comment.block, punctuation.definition.comment	#854D0E	italic
string.quoted.docstring.multi.python	#854D0E	italic
variable, variable.other, variable.other.readwrite, meta.block	#1C1917	—
variable.parameter, meta.parameter.type.variable, variable.parameter.function	#78350F	—
variable.other.constant, variable.other.readonly	#78350F	bold
keyword.control, keyword.control.conditional, keyword.control.repeat, keyword.control.flow, keyword.control.trycatch, keyword.control.import, keyword.control.export	#92400E	bold
keyword, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression	#B45309	bold
keyword.operator, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.logical	#A08060	—
punctuation, punctuation.separator, punctuation.terminator, meta.delimiter, punctuation.section, punctuation.definition.parameters, punctuation.definition.block	#78350F	—
entity.name.function, entity.name.function.constructor	#D97706	bold
meta.function-call, variable.function	#92400E	—
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	#92400E	bold
entity.name.type.interface, entity.name.type.type-parameter	#0284C7	italic
entity.name.type.enum, entity.name.type.struct	#B45309	bold
entity.name.type, support.type	#92400E	—
string, string.quoted, string.quoted.double, string.quoted.single	#047857	—
string.template	#059669	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#A08060	—
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	#B91C1C	bold
support.type.property-name.json, meta.object-key.json, meta.structure.dictionary.key.json	#B45309	—
string.quoted.double.json, string.quoted.single.json	#047857	—
entity.name.tag, entity.name.tag.html, entity.name.tag.xml, punctuation.definition.tag	#B45309	—
entity.other.attribute-name, entity.other.attribute-name.html	#D97706	—
string.quoted.double.html, string.quoted.single.html	#047857	—
entity.name.tag.jsx, entity.name.tag.tsx	#B45309	—
support.class.component.jsx, support.class.component.tsx, entity.name.tag.custom.jsx, entity.name.tag.custom.tsx	#92400E	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	#92400E	italic
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less	#B45309	—
support.constant.property-value.css, meta.property-value.css, support.constant.color.w3c-standard-color-name.css	#047857	—
keyword.other.unit.css, keyword.other.unit.scss, constant.numeric.css	#DC2626	—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss	#92400E	—
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	#0284C7	—
keyword.control.at-rule.media, keyword.control.at-rule.keyframes, keyword.control.at-rule.import	#92400E	bold
entity.other.attribute-name.class.css.tailwindcss	#047857	—
entity.other.attribute-name.variant.tailwindcss	#B45309	italic
entity.name.tag.template.html.vue, entity.name.tag.script.html.vue, entity.name.tag.style.html.vue	#B45309	bold
entity.other.attribute-name.directive.vue	#047857	italic
entity.other.attribute-name.directive.svelte, punctuation.definition.reactive.svelte	#D97706	italic
markup.heading, entity.name.section.markdown	#1C1917	bold
markup.inline.raw, markup.fenced_code.block	#047857	—
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python	#92400E	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	#92400E	bold
keyword.other.DML.sql, keyword.other.DDL.create.sql	#B45309	bold
support.function.scalar.sql, support.function.aggregate.sql	#D97706	—
keyword.other.special-method.dockerfile, entity.name.instruction.dockerfile	#B45309	bold
entity.name.tag.yaml, support.type.property-name.yaml	#B45309	—
variable.other.normal.shell, variable.other.special.shell	#1C1917	—

VS Code preview

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

Shadow Monarch Abyss — Shadow Monarch Ember

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#0A0606
activityBar.border#0A0606
activityBar.foreground#F3E2D9
activityBar.inactiveForeground#7A4A3A
activityBarBadge.background#D94A1A
activityBarBadge.foreground#F3E2D9
badge.background#D94A1A
badge.foreground#F3E2D9
breadcrumb.activeSelectionForeground#F3E2D9
breadcrumb.focusForeground#F3E2D9
breadcrumb.foreground#FDBA74CC
breadcrumbPicker.background#120E0E
button.background#D94A1A
button.foreground#F3E2D9
button.hoverBackground#C2410C
chat.avatarBackground#D94A1A
chat.avatarForeground#F3E2D9
chat.requestBackground#120E0E
chat.requestBorder#6B2A1AB3
chat.slashCommandBackground#D94A1A33
chat.slashCommandForeground#FB923C
commandCenter.activeBackground#1A0F0F
commandCenter.activeForeground#FFFFFF
commandCenter.background#120E0E
commandCenter.border#6B2A1A80
commandCenter.foreground#E2E8F0
debugToolBar.background#120E0E
diffEditor.diagonalFill#4755694D
diffEditor.insertedLineBackground#10B9811A
diffEditor.insertedTextBackground#10B98133
diffEditor.removedLineBackground#F43F5E1A
diffEditor.removedTextBackground#EF444433
dropdown.background#1A0F0F
dropdown.border#6B2A1A
dropdown.foreground#F3E2D9
editor.background#100A0A
editor.bracketMatchBackground#D94A1A40
editor.bracketMatchBorder#F97316
editor.findMatchBackground#6B2A1AEE
editor.findMatchHighlightBackground#6B2A1A99
editor.foreground#F3E2D9
editor.inactiveSelectionBackground#6B2A1A55
editor.lineHighlightBackground#D94A1A22
editor.selectionBackground#6B2A1AB3
editor.selectionHighlightBackground#6B2A1A88
editor.wordHighlightBackground#D94A1A33
editor.wordHighlightStrongBackground#D94A1A55
editorBracketHighlight.foreground1#F97316
editorBracketHighlight.foreground2#FBBF24
editorBracketHighlight.foreground3#EF4444
editorBracketHighlight.foreground4#38BDF8
editorBracketHighlight.foreground5#34D399
editorBracketHighlight.foreground6#FDBA74
editorBracketHighlight.unexpectedBracket.foreground#EF4444
editorBracketPairGuide.activeBackground1#F9731638
editorBracketPairGuide.activeBackground2#FBBF2438
editorBracketPairGuide.activeBackground3#EF444438
editorBracketPairGuide.activeBackground4#38BDF838
editorBracketPairGuide.activeBackground5#34D39938
editorBracketPairGuide.activeBackground6#FDBA7438
editorBracketPairGuide.background1#F9731622
editorBracketPairGuide.background2#FBBF2422
editorBracketPairGuide.background3#EF444422
editorBracketPairGuide.background4#38BDF822
editorBracketPairGuide.background5#34D39922
editorBracketPairGuide.background6#FDBA7422
editorCodeLens.foreground#FDBA7499
editorCursor.foreground#F97316
editorError.foreground#EF4444
editorGhostText.background#00000000
editorGhostText.foreground#FDBA7466
editorGroupHeader.tabsBackground#120E0E
editorGuide.activeBackground#D94A1AAA
editorGuide.activeBackground1#F97316AA
editorGuide.activeBackground2#FBBF24AA
editorGuide.activeBackground3#EF4444AA
editorGuide.activeBackground4#38BDF8AA
editorGuide.activeBackground5#34D399AA
editorGuide.activeBackground6#FDBA74AA
editorGuide.background#47556933
editorGuide.background1#F9731644
editorGuide.background2#FBBF2444
editorGuide.background3#EF444444
editorGuide.background4#38BDF844
editorGuide.background5#34D39944
editorGuide.background6#FDBA7444
editorGutter.addedBackground#10B981
editorGutter.deletedBackground#EF4444
editorGutter.modifiedBackground#F97316
editorHoverWidget.background#120E0E
editorHoverWidget.border#D94A1A80
editorHoverWidget.statusBarBackground#1A0F0F
editorIndentGuide.activeBackground#D94A1AAA
editorIndentGuide.activeBackground1#F97316AA
editorIndentGuide.activeBackground2#FBBF24AA
editorIndentGuide.activeBackground3#EF4444AA
editorIndentGuide.activeBackground4#38BDF8AA
editorIndentGuide.activeBackground5#34D399AA
editorIndentGuide.activeBackground6#FDBA74AA
editorIndentGuide.background#47556933
editorIndentGuide.background1#F9731644
editorIndentGuide.background2#FBBF2444
editorIndentGuide.background3#EF444444
editorIndentGuide.background4#38BDF844
editorIndentGuide.background5#34D39944
editorIndentGuide.background6#FDBA7444
editorInfo.foreground#38BDF8
editorInlayHint.background#1A0F0F80
editorInlayHint.foreground#FDBA74AA
editorInlayHint.parameterForeground#38BDF8AA
editorInlayHint.typeForeground#F97316AA
editorLineNumber.activeForeground#F97316
editorLineNumber.foreground#7A4A3A99
editorOverviewRuler.errorForeground#EF4444
editorOverviewRuler.infoForeground#38BDF8
editorOverviewRuler.warningForeground#FBBF24
editorStickyScroll.background#120E0E
editorStickyScroll.border#D94A1A40
editorStickyScrollHover.background#1A0F0F
editorWarning.foreground#FBBF24
editorWidget.background#120E0E
editorWidget.border#D94A1A80
editorWidget.resizeBorder#D94A1A
focusBorder#D94A1A80
foreground#FDBA74
gitDecoration.addedResourceForeground#10B981
gitDecoration.deletedResourceForeground#EF4444
gitDecoration.ignoredResourceForeground#7A4A3A
gitDecoration.modifiedResourceForeground#F97316
gitDecoration.untrackedResourceForeground#38BDF8
input.background#1A0F0F
input.border#6B2A1A
input.foreground#F3E2D9
inputOption.activeBorder#D94A1A
list.activeSelectionBackground#6B2A1ACC
list.activeSelectionForeground#F3E2D9
list.activeSelectionIconForeground#F97316
list.errorForeground#EF4444
list.focusAndSelectionOutline#D94A1A
list.focusOutline#D94A1A80
list.hoverBackground#1A0F0F80
list.hoverForeground#FBBF24
list.inactiveSelectionBackground#6B2A1A40
list.warningForeground#FBBF24
merge.border#D94A1A80
merge.currentHeaderBackground#10B98155
merge.incomingHeaderBackground#38BDF855
minimap.background#0A060680
minimap.errorHighlight#EF4444CC
minimap.findMatchHighlight#FBBF24CC
minimap.selectionHighlight#D94A1A99
minimap.warningHighlight#FBBF24CC
notebook.cellBorderColor#6B2A1A
notebook.focusedCellBorder#D94A1A
notificationCenterHeader.background#0A0606
notifications.background#120E0E
notifications.border#6B2A1A
notifications.foreground#F3E2D9
panel.background#120E0E
panel.border#0A0606
panelTitle.activeBorder#D94A1A
panelTitle.activeForeground#F3E2D9
panelTitle.inactiveForeground#7A4A3A
peekView.border#D94A1A
peekViewEditor.background#100A0A
peekViewEditor.matchHighlightBackground#F9731644
peekViewResult.background#120E0E
peekViewResult.matchHighlightBackground#F9731644
peekViewResult.selectionBackground#6B2A1ACC
peekViewResult.selectionForeground#F3E2D9
peekViewTitle.background#120E0E
progressBar.background#D94A1A
scrollbarSlider.activeBackground#D94A1A80
scrollbarSlider.background#6B2A1A80
scrollbarSlider.hoverBackground#7A4A3A80
settings.headerForeground#F3E2D9
settings.modifiedItemIndicator#D94A1A
sideBar.background#0C0808
sideBar.border#6B2A1AB3
sideBar.foreground#FDBA74
sideBarSectionHeader.background#120E0E
sideBarSectionHeader.border#6B2A1A80
sideBarSectionHeader.foreground#FDBA74
sideBarTitle.foreground#F3E2D9
statusBar.background#0A0606
statusBar.border#0A0606
statusBar.debuggingBackground#0A0606
statusBar.foreground#FDBA74
statusBarItem.activeBackground#D94A1A
statusBarItem.hoverBackground#1A0F0F
symbolIcon.classForeground#FDBA74
symbolIcon.functionForeground#FBBF24
symbolIcon.variableForeground#F3E2D9
tab.activeBackground#1A0F0F
tab.activeBorder#D94A1A
tab.activeForeground#F3E2D9
tab.border#0A0606
tab.inactiveBackground#120E0E
tab.inactiveForeground#FDBA7480
tab.lastPinnedBorder#D94A1A
terminal.ansiBlack#0A0606
terminal.ansiBlue#60A5FA
terminal.ansiBrightBlack#1A0F0F
terminal.ansiBrightBlue#60A5FA
terminal.ansiBrightCyan#38BDF8
terminal.ansiBrightGreen#34D399
terminal.ansiBrightMagenta#FB923C
terminal.ansiBrightRed#EF4444
terminal.ansiBrightWhite#F3E2D9
terminal.ansiBrightYellow#FBBF24
terminal.ansiCyan#38BDF8
terminal.ansiGreen#10B981
terminal.ansiMagenta#F97316
terminal.ansiRed#EF4444
terminal.ansiWhite#FDBA74
terminal.ansiYellow#FBBF24
terminal.background#100A0A
terminal.foreground#F3E2D9
testing.iconFailed#EF4444
testing.iconPassed#10B981
testing.iconQueued#FBBF24
testing.iconSkipped#64748B
testing.iconUnset#94A3B8
testing.peekBorder#E11D48
testing.runAction#10B981
textLink.activeForeground#FDBA74
textLink.foreground#F97316
titleBar.activeBackground#0A0606
titleBar.activeForeground#F3E2D9
titleBar.inactiveBackground#0A0606
titleBar.inactiveForeground#7A4A3A
tree.activeIndentGuidesStroke#D94A1A
tree.indentGuidesStroke#7A4A3A99
welcomePage.tileBackground#1A0F0F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.line, comment.block, punctuation.definition.comment	#10B981	italic
string.quoted.docstring.multi.python	#10B981	italic
variable, variable.other, variable.other.readwrite, meta.block	#F3E2D9	—
variable.parameter, meta.parameter.type.variable, variable.parameter.function	#FED7AA	—
variable.other.constant, variable.other.readonly	#FDBA74	bold
keyword.control, keyword.control.conditional, keyword.control.repeat, keyword.control.flow, keyword.control.trycatch, keyword.control.import, keyword.control.export	#FB923C	bold
keyword, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression	#F97316	bold
keyword.operator, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.logical	#7A4A3A	—
punctuation, punctuation.separator, punctuation.terminator, meta.delimiter, punctuation.section, punctuation.definition.parameters, punctuation.definition.block	#FDBA74	—
entity.name.function, entity.name.function.constructor	#FBBF24	bold
meta.function-call, variable.function	#F59E0B	—
support.function, support.function.builtin, support.function.console	#EF4444	—
support.function.react, support.function.builtin.react, entity.name.function.react	#FBBF24	italic
meta.decorator, entity.name.function.decorator, punctuation.decorator	#FBBF24	italic
entity.name.type.class, support.class	#EA580C	bold
entity.name.type.interface, entity.name.type.type-parameter	#38BDF8	italic
entity.name.type.enum, entity.name.type.struct	#F97316	bold
entity.name.type, support.type	#EA580C	—
string, string.quoted, string.quoted.double, string.quoted.single	#FDBA74	—
string.template	#FFEDD5	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#7A4A3A	—
string.regexp, string.regexp.character-class, punctuation.definition.string.regexp	#FB923C	—
constant.numeric	#DC2626	—
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined	#EF4444	bold
support.type.property-name.json, meta.object-key.json, meta.structure.dictionary.key.json	#F97316	—
string.quoted.double.json, string.quoted.single.json	#FDBA74	—
entity.name.tag, entity.name.tag.html, entity.name.tag.xml, punctuation.definition.tag	#F87171	—
entity.other.attribute-name, entity.other.attribute-name.html	#FBBF24	—
string.quoted.double.html, string.quoted.single.html	#FDBA74	—
entity.name.tag.jsx, entity.name.tag.tsx	#F87171	—
support.class.component.jsx, support.class.component.tsx, entity.name.tag.custom.jsx, entity.name.tag.custom.tsx	#EA580C	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	#F97316	italic
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less	#F97316	—
support.constant.property-value.css, meta.property-value.css, support.constant.color.w3c-standard-color-name.css	#FDBA74	—
keyword.other.unit.css, keyword.other.unit.scss, constant.numeric.css	#DC2626	—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss	#FB923C	—
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	#38BDF8	italic
variable.css, variable.argument.css, custom-property	#F97316	—
keyword.control.at-rule.media, keyword.control.at-rule.keyframes, keyword.control.at-rule.import	#FB923C	bold
entity.other.attribute-name.class.css.tailwindcss	#FDBA74	—
entity.other.attribute-name.variant.tailwindcss	#FB923C	italic
entity.name.tag.template.html.vue, entity.name.tag.script.html.vue, entity.name.tag.style.html.vue	#F87171	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	#F3E2D9	bold
markup.inline.raw, markup.fenced_code.block	#FDBA74	—
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python	#FB923C	italic
support.function.magic.python	#FBBF24	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	#38BDF8	italic
keyword.channel.go, keyword.goroutine.go	#FB923C	bold
keyword.other.DML.sql, keyword.other.DDL.create.sql	#F97316	bold
support.function.scalar.sql, support.function.aggregate.sql	#FBBF24	—
keyword.other.special-method.dockerfile, entity.name.instruction.dockerfile	#F97316	bold
entity.name.tag.yaml, support.type.property-name.yaml	#F97316	—
variable.other.normal.shell, variable.other.special.shell	#F3E2D9	—