NovaTheme - Swazlll Edition

Name: NovaTheme - Swazlll Edition
Author: Nova Theme

Publisher: Nova ThemeThemes in package: 14

A collection of dark themes for VS Code: Ocean, Midnight, Neon, Aurora, Coral, Storm, Forest, Dracula, Synthwave, Matrix, Ember, Sakura, Monochrome, and Abyss.

Open in VS Code GitHub

Color themes

VS Code preview

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

NovaTheme - Swazlll Edition — Swazlll 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.activeBackground#001a1822
activityBar.activeBorder#00ffcc
activityBar.background#010306
activityBar.border#011410
activityBar.foreground#00ffcc
activityBar.inactiveForeground#0a2e2a
activityBarBadge.background#ff9966
activityBarBadge.foreground#020408
badge.background#ff9966
badge.foreground#020408
breadcrumb.activeSelectionForeground#00ddaa
breadcrumb.background#020408
breadcrumb.focusForeground#80c0c0
breadcrumb.foreground#1a4a44
breadcrumbPicker.background#020509
button.background#00aa88
button.foreground#000a08
button.hoverBackground#00ddaa
button.secondaryBackground#001a18
button.secondaryForeground#c0e8e8
descriptionForeground#80c0c0
diffEditor.diagonalFill#011410
diffEditor.insertedLineBackground#00ddaa12
diffEditor.insertedTextBackground#00ddaa20
diffEditor.removedLineBackground#ff556612
diffEditor.removedTextBackground#ff556620
disabledForeground#1a4a44
dropdown.background#010f0e
dropdown.border#001a18
dropdown.foreground#c0e8e8
editor.background#020408
editor.findMatchBackground#ff996638
editor.findMatchBorder#ff9966
editor.findMatchHighlightBackground#ff996622
editor.foldBackground#040c0e55
editor.foreground#c0e8e8
editor.inactiveSelectionBackground#00ddaa18
editor.lineHighlightBackground#040c0e
editor.lineHighlightBorder#040c0e00
editor.selectionBackground#00ddaa30
editor.selectionForeground#ffffff
editor.wordHighlightBackground#00ddaa22
editor.wordHighlightBorder#00ddaa50
editor.wordHighlightStrongBackground#00ddaa38
editor.wordHighlightStrongBorder#00ddaa68
editorBracketHighlight.foreground1#00ffcc
editorBracketHighlight.foreground2#00ddaa
editorBracketHighlight.foreground3#ff9966
editorBracketHighlight.foreground4#00bbee
editorBracketHighlight.foreground5#80e0ff
editorBracketHighlight.foreground6#44ffdd
editorBracketMatch.background#00ddaa28
editorBracketMatch.border#00ddaa
editorCodeLens.foreground#1a4a44
editorCursor.background#020408
editorCursor.foreground#00ffcc
editorError.foreground#ff5566
editorGhostText.foreground#1a4a44
editorGroup.border#011410
editorGroup.dropBackground#00ddaa18
editorGroupHeader.tabsBackground#010306
editorGroupHeader.tabsBorder#011410
editorGutter.addedBackground#00ddaa
editorGutter.background#020408
editorGutter.deletedBackground#ff5566
editorGutter.modifiedBackground#ff9966
editorHint.foreground#80e0ff
editorHoverWidget.background#020509
editorHoverWidget.border#001a18
editorHoverWidget.foreground#c0e8e8
editorIndentGuide.activeBackground1#003330
editorIndentGuide.background1#001a18
editorInfo.foreground#00ddaa
editorInlayHint.background#041010
editorInlayHint.foreground#0a2e2a
editorLineNumber.activeForeground#00ddaa
editorLineNumber.foreground#0a2e2a
editorOverviewRuler.addedForeground#00ddaa
editorOverviewRuler.bracketMatchForeground#00ffcc
editorOverviewRuler.deletedForeground#ff5566
editorOverviewRuler.errorForeground#ff5566
editorOverviewRuler.findMatchForeground#ff996688
editorOverviewRuler.modifiedForeground#ff9966
editorOverviewRuler.selectionHighlightForeground#00ddaa
editorOverviewRuler.warningForeground#ff9966
editorOverviewRuler.wordHighlightForeground#00aa88
editorRuler.foreground#001a18
editorStickyScroll.background#010306
editorStickyScrollHover.background#040c0e
editorSuggestWidget.background#020509
editorSuggestWidget.border#001a18
editorSuggestWidget.focusHighlightForeground#80e0ff
editorSuggestWidget.foreground#c0e8e8
editorSuggestWidget.highlightForeground#00ffcc
editorSuggestWidget.selectedBackground#001a18
editorSuggestWidget.selectedForeground#00ddaa
editorUnnecessaryCode.opacity#00000070
editorWarning.foreground#ff9966
editorWhitespace.foreground#0a2e2a
editorWidget.background#020509
editorWidget.border#001a18
editorWidget.foreground#c0e8e8
errorForeground#ff5566
extensionBadge.remoteBackground#00aa88
extensionBadge.remoteForeground#000a08
extensionButton.prominentBackground#00aa88
extensionButton.prominentForeground#000a08
extensionButton.prominentHoverBackground#00ddaa
focusBorder#00ddaa
foreground#c0e8e8
gitDecoration.addedResourceForeground#00ddaa
gitDecoration.conflictingResourceForeground#8877ff
gitDecoration.deletedResourceForeground#ff5566
gitDecoration.ignoredResourceForeground#0a2e2a
gitDecoration.modifiedResourceForeground#ff9966
gitDecoration.submoduleResourceForeground#00ffcc
gitDecoration.untrackedResourceForeground#80e0ff
icon.foreground#00ffcc
input.background#010f0e
input.border#001a18
input.foreground#c0e8e8
input.placeholderForeground#1a4a44
inputValidation.errorBackground#3a0a0a
inputValidation.errorBorder#ff5566
inputValidation.infoBackground#011a18
inputValidation.infoBorder#00ddaa
inputValidation.warningBackground#1a1a0a
inputValidation.warningBorder#ff9966
list.activeSelectionBackground#001a18
list.activeSelectionForeground#c0e8e8
list.activeSelectionIconForeground#00ddaa
list.deemphasizedForeground#1a4a44
list.errorForeground#ff5566
list.focusBackground#001a18
list.focusForeground#c0e8e8
list.highlightForeground#00ddaa
list.hoverBackground#040c0e
list.hoverForeground#c0e8e8
list.inactiveSelectionBackground#011410
list.inactiveSelectionForeground#80c0c0
list.warningForeground#ff9966
minimap.background#020509
minimap.errorHighlight#ff5566
minimap.findMatchHighlight#ff996680
minimap.selectionHighlight#00ddaa45
minimap.warningHighlight#ff9966
minimapSlider.activeBackground#00ddaa40
minimapSlider.background#00ddaa12
minimapSlider.hoverBackground#00ddaa25
notificationCenterHeader.background#010306
notificationCenterHeader.foreground#00ffcc
notificationLink.foreground#00ddaa
notifications.background#020509
notifications.border#001a18
notifications.foreground#c0e8e8
notificationToast.border#001a18
panel.background#020509
panel.border#011410
panel.dropBorder#00ddaa
panelSectionHeader.background#041010
panelSectionHeader.foreground#00ffcc
panelTitle.activeBorder#00ddaa
panelTitle.activeForeground#00ddaa
panelTitle.inactiveForeground#1a4a44
peekView.border#00aa88
peekViewEditor.background#02050980
peekViewEditor.matchHighlightBackground#ff996640
peekViewResult.background#020509
peekViewResult.fileForeground#80c0c0
peekViewResult.lineForeground#80c0c0
peekViewResult.matchHighlightBackground#ff996630
peekViewResult.selectionBackground#001a18
peekViewResult.selectionForeground#c0e8e8
peekViewTitle.background#010205
peekViewTitleDescription.foreground#1a4a44
peekViewTitleLabel.foreground#00ddaa
progressBar.background#00ddaa
quickInput.background#020509
quickInput.foreground#c0e8e8
quickInputList.focusBackground#001a18
quickInputList.focusForeground#c0e8e8
quickInputTitle.background#010306
scrollbar.shadow#00000099
scrollbarSlider.activeBackground#00ddaa48
scrollbarSlider.background#00ddaa18
scrollbarSlider.hoverBackground#00ddaa30
selection.background#00ddaa30
settings.checkboxBackground#041010
settings.dropdownBackground#041010
settings.headerForeground#00ffcc
settings.modifiedItemIndicator#ff9966
settings.numberInputBackground#041010
settings.textInputBackground#041010
sideBar.background#020509
sideBar.border#011410
sideBar.foreground#80c0c0
sideBarSectionHeader.background#041010
sideBarSectionHeader.border#011410
sideBarSectionHeader.foreground#00ddaa
sideBarTitle.foreground#00ffcc
statusBar.background#006655
statusBar.border#001a18
statusBar.debuggingBackground#ff9966
statusBar.debuggingForeground#020408
statusBar.foreground#c0e8e8
statusBar.noFolderBackground#010306
statusBar.noFolderForeground#1a4a44
statusBarItem.errorBackground#ff5566
statusBarItem.errorForeground#ffffff
statusBarItem.hoverBackground#ffffff15
statusBarItem.prominentBackground#00aa88
statusBarItem.prominentForeground#000a08
statusBarItem.prominentHoverBackground#00ddaa
statusBarItem.remoteBackground#00ffcc
statusBarItem.remoteForeground#020408
statusBarItem.warningBackground#ff9966
statusBarItem.warningForeground#020408
tab.activeBackground#020408
tab.activeBorder#00000000
tab.activeBorderTop#00ddaa
tab.activeForeground#c0e8e8
tab.activeModifiedBorder#ff9966
tab.border#011410
tab.hoverBackground#040c0e
tab.hoverForeground#80c0c0
tab.inactiveBackground#010306
tab.inactiveForeground#1a4a44
tab.inactiveModifiedBorder#ff996666
terminal.ansiBlack#011410
terminal.ansiBlue#00bbee
terminal.ansiBrightBlack#1a4a44
terminal.ansiBrightBlue#44ddff
terminal.ansiBrightCyan#80e0ff
terminal.ansiBrightGreen#44ffdd
terminal.ansiBrightMagenta#aa99ff
terminal.ansiBrightRed#ff7788
terminal.ansiBrightWhite#e0f8f8
terminal.ansiBrightYellow#ffbb88
terminal.ansiCyan#00ffcc
terminal.ansiGreen#00ddaa
terminal.ansiMagenta#8877ff
terminal.ansiRed#ff5566
terminal.ansiWhite#c0e8e8
terminal.ansiYellow#ff9966
terminal.background#020509
terminal.border#011410
terminal.foreground#c0e8e8
terminal.selectionBackground#00ddaa30
terminal.selectionForeground#ffffff
terminalCursor.background#020408
terminalCursor.foreground#00ffcc
textBlockQuote.background#040c0e
textBlockQuote.border#00aa88
textCodeBlock.background#040c0e
textLink.activeForeground#00ffcc
textLink.foreground#00ddaa
textPreformat.foreground#80e0ff
textSeparator.foreground#001a18
titleBar.activeBackground#010205
titleBar.activeForeground#80c0c0
titleBar.border#011410
titleBar.inactiveBackground#010306
titleBar.inactiveForeground#1a4a44
tree.indentGuidesStroke#0a2e2a
tree.tableColumnsBorder#011410
widget.border#001a18
widget.shadow#00000099

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.line, comment.block, comment.block.documentation	#1a4a44	italic
string, string.quoted, string.quoted.single, string.quoted.double, string.template	#80e0ff	—
constant.character.escape	#8877ff	—
string.regexp	#ffbb88	—
keyword, keyword.control, keyword.control.flow, keyword.control.return, keyword.control.conditional, keyword.control.loop, keyword.control.import, keyword.control.from, keyword.control.export	#00ddaa	—
keyword.operator	#44ffdd	—
storage.type, storage.type.function, storage.type.class, storage.type.let, storage.type.const, storage.type.var	#00ddaa	—
storage.modifier, storage.modifier.async, storage.modifier.static	#00ffcc	italic
entity.name.function, entity.name.function.member	#00ffcc	—
meta.function-call, support.function	#00ffcc	—
support.function.builtin, support.function.magic	#8877ff	—
variable, variable.other, variable.other.readwrite	#c0e8e8	—
variable.parameter	#e0f8f8	italic
variable.language, variable.language.this	#8877ff	italic
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum	#a0eeff	—
constant.numeric	#ff9966	—
constant.language, constant.language.boolean, constant.language.null	#44ffdd	—
meta.decorator, entity.name.function.decorator	#8877ff	italic
entity.name.tag	#00ddaa	—
entity.other.attribute-name	#80e0ff	—
support.type.property-name	#80e0ff	—
punctuation, punctuation.separator, punctuation.terminator	#80c0c0	—
entity.name.namespace, entity.name.module	#80e0ff	—
markup.heading	#00ddaa	bold
invalid, invalid.illegal	#ff5566	—

VS Code preview

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

NovaTheme - Swazlll Edition — Swazlll Aurora

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.activeBorder#00ffa3
activityBar.background#040d0a
activityBar.border#0a1e16
activityBar.foreground#00ffa3
activityBar.inactiveForeground#0a2e20
activityBarBadge.background#ff79c6
activityBarBadge.foreground#000000
badge.background#ff79c6
badge.foreground#000000
breadcrumb.activeSelectionForeground#00ffa3
breadcrumb.background#071215
breadcrumb.focusForeground#20c997
breadcrumb.foreground#2d5a4a
breadcrumbPicker.background#050e0a
button.background#00ffa3
button.foreground#001a0a
button.hoverBackground#00e591
button.secondaryBackground#0a2e20
button.secondaryForeground#c8ddd5
descriptionForeground#8abba8
diffEditor.insertedLineBackground#00ffa312
diffEditor.insertedTextBackground#00ffa320
diffEditor.removedLineBackground#ff6b9d12
diffEditor.removedTextBackground#ff6b9d20
disabledForeground#2d5a4a
dropdown.background#0c1f18
dropdown.border#0a2e20
dropdown.foreground#c8ddd5
editor.background#071215
editor.findMatchBackground#ffd16640
editor.findMatchBorder#ffd166
editor.findMatchHighlightBackground#ffd16622
editor.foldBackground#0c1f1855
editor.foreground#c8ddd5
editor.inactiveSelectionBackground#00ffa318
editor.lineHighlightBackground#0c1f18
editor.selectionBackground#00ffa335
editor.wordHighlightBackground#00ffa328
editorBracketHighlight.foreground1#00ffa3
editorBracketHighlight.foreground2#20c997
editorBracketHighlight.foreground3#ff79c6
editorBracketHighlight.foreground4#7fffd4
editorBracketHighlight.foreground5#a8e6cf
editorBracketHighlight.foreground6#ffd166
editorBracketMatch.background#00ffa328
editorBracketMatch.border#00ffa3
editorCodeLens.foreground#2d5a4a
editorCursor.foreground#00ffa3
editorError.foreground#ff6b9d
editorGhostText.foreground#2d5a4a
editorGroup.border#0a1e16
editorGroupHeader.tabsBackground#040d0a
editorGroupHeader.tabsBorder#0a1e16
editorGutter.addedBackground#00ffa3
editorGutter.background#071215
editorGutter.deletedBackground#ff6b9d
editorGutter.modifiedBackground#ffd166
editorHoverWidget.background#050e0a
editorHoverWidget.border#0a2e20
editorIndentGuide.activeBackground1#0a2e20
editorIndentGuide.background1#0a1e16
editorInfo.foreground#00ffa3
editorInlayHint.background#0c1a14
editorInlayHint.foreground#0a2e20
editorLineNumber.activeForeground#00ffa3
editorLineNumber.foreground#0a2e20
editorRuler.foreground#0a1e16
editorStickyScroll.background#050e0a
editorSuggestWidget.background#050e0a
editorSuggestWidget.highlightForeground#20c997
editorSuggestWidget.selectedBackground#0a2e20
editorSuggestWidget.selectedForeground#00ffa3
editorWarning.foreground#ffd166
editorWhitespace.foreground#0a2e20
editorWidget.background#050e0a
editorWidget.border#0a2e20
editorWidget.foreground#c8ddd5
errorForeground#ff6b9d
focusBorder#00ffa3
foreground#c8ddd5
gitDecoration.addedResourceForeground#00ffa3
gitDecoration.conflictingResourceForeground#ff79c6
gitDecoration.deletedResourceForeground#ff6b9d
gitDecoration.ignoredResourceForeground#0a2e20
gitDecoration.modifiedResourceForeground#ffd166
gitDecoration.untrackedResourceForeground#7fffd4
icon.foreground#20c997
input.background#0c1f18
input.border#0a2e20
input.foreground#c8ddd5
input.placeholderForeground#2d5a4a
inputValidation.errorBorder#ff6b9d
inputValidation.infoBorder#00ffa3
inputValidation.warningBorder#ffd166
list.activeSelectionBackground#0a2e20
list.activeSelectionForeground#c8ddd5
list.activeSelectionIconForeground#00ffa3
list.errorForeground#ff6b9d
list.focusBackground#0a2e20
list.highlightForeground#00ffa3
list.hoverBackground#0c1f18
list.inactiveSelectionBackground#0a1e16
list.warningForeground#ffd166
minimap.background#060f0c
minimap.errorHighlight#ff6b9d
minimap.selectionHighlight#00ffa360
minimap.warningHighlight#ffd166
minimapSlider.activeBackground#00ffa340
minimapSlider.background#00ffa315
minimapSlider.hoverBackground#00ffa325
panel.background#060f0c
panel.border#0a1e16
panelTitle.activeBorder#00ffa3
panelTitle.activeForeground#00ffa3
panelTitle.inactiveForeground#2d5a4a
peekView.border#00ffa3
peekViewEditor.background#050e0a80
peekViewResult.background#050e0a
peekViewTitle.background#030a08
peekViewTitleLabel.foreground#00ffa3
progressBar.background#00ffa3
scrollbarSlider.activeBackground#00ffa360
scrollbarSlider.background#00ffa320
scrollbarSlider.hoverBackground#00ffa340
selection.background#00ffa340
sideBar.background#060f0c
sideBar.border#0a1e16
sideBar.foreground#8abba8
sideBarSectionHeader.background#0a1510
sideBarSectionHeader.border#0a1e16
sideBarSectionHeader.foreground#20c997
sideBarTitle.foreground#00ffa3
statusBar.background#003d2e
statusBar.border#0a2e20
statusBar.debuggingBackground#ff79c6
statusBar.debuggingForeground#000000
statusBar.foreground#c8ddd5
statusBar.noFolderBackground#030a08
statusBarItem.errorBackground#ff6b9d
statusBarItem.errorForeground#ffffff
statusBarItem.hoverBackground#ffffff15
statusBarItem.remoteBackground#00ffa3
statusBarItem.remoteForeground#000000
statusBarItem.warningBackground#ffd166
statusBarItem.warningForeground#000000
tab.activeBackground#071215
tab.activeBorderTop#00ffa3
tab.activeForeground#c8ddd5
tab.activeModifiedBorder#ffd166
tab.border#0a1e16
tab.hoverBackground#0c1f18
tab.hoverForeground#20c997
tab.inactiveBackground#040d0a
tab.inactiveForeground#2d5a4a
terminal.ansiBlack#1a2e28
terminal.ansiBlue#20c997
terminal.ansiBrightBlack#2d5a4a
terminal.ansiBrightBlue#44e5b0
terminal.ansiBrightCyan#a8e6cf
terminal.ansiBrightGreen#44ffbb
terminal.ansiBrightMagenta#ff99d8
terminal.ansiBrightRed#ff99bb
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffdd88
terminal.ansiCyan#7fffd4
terminal.ansiGreen#00ffa3
terminal.ansiMagenta#ff79c6
terminal.ansiRed#ff6b9d
terminal.ansiWhite#c8ddd5
terminal.ansiYellow#ffd166
terminal.background#060f0c
terminal.border#0a1e16
terminal.foreground#c8ddd5
terminalCursor.foreground#00ffa3
textLink.activeForeground#20c997
textLink.foreground#00ffa3
titleBar.activeBackground#030a08
titleBar.activeForeground#8abba8
titleBar.inactiveBackground#040d0a
titleBar.inactiveForeground#2d5a4a
widget.border#0a2e20
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.line, comment.block	#2d5a4a	italic
string, string.quoted, string.template	#7fffd4	—
constant.character.escape	#ff79c6	—
string.regexp	#ffd166	—
keyword, keyword.control, storage.type	#00ffa3	—
storage.modifier	#00d4aa	italic
keyword.operator	#64dfb4	—
entity.name.function, support.function	#20c997	—
support.function.builtin, support.function.magic	#ff6b9d	—
variable, variable.other	#a8e6cf	—
variable.parameter	#c8ddd5	italic
variable.language	#ff6b9d	italic
entity.name.type, entity.name.class, support.class, support.type	#00d4aa	—
entity.name.type.interface	#7fffd4	italic
constant.numeric	#ff79c6	—
constant.language	#ff79c6	italic
constant, constant.other	#ffd166	—
entity.name.function.decorator, meta.decorator, storage.type.annotation	#ff79c6	italic
entity.name.tag	#00ffa3	—
entity.other.attribute-name	#00d4aa	—
support.type.property-name.css	#20c997	—
support.type.property-name.json	#00d4aa	—
markup.heading	#00ffa3	bold
markup.underline.link	#00ffa3	underline
invalid	#ff6b9d	strikethrough

VS Code preview

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

NovaTheme - Swazlll Edition — Swazlll Coral

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.activeBorder#ff6b35
activityBar.background#120806
activityBar.border#2a1008
activityBar.foreground#ff6b35
activityBar.inactiveForeground#3a1a10
activityBarBadge.background#ef476f
activityBarBadge.foreground#ffffff
badge.background#ef476f
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#ff6b35
breadcrumb.background#1a0e0a
breadcrumb.focusForeground#ef476f
breadcrumb.foreground#5a3020
breadcrumbPicker.background#150a06
button.background#ff6b35
button.foreground#ffffff
button.hoverBackground#ff8055
button.secondaryBackground#2a1008
button.secondaryForeground#f0d5c8
descriptionForeground#c8a898
diffEditor.insertedLineBackground#06d6a012
diffEditor.insertedTextBackground#06d6a020
diffEditor.removedLineBackground#ff4d6d12
diffEditor.removedTextBackground#ff4d6d20
disabledForeground#5a3020
dropdown.background#1f1008
dropdown.border#2a1008
dropdown.foreground#f0d5c8
editor.background#1a0e0a
editor.findMatchBackground#ffd16640
editor.findMatchBorder#ffd166
editor.findMatchHighlightBackground#ffd16622
editor.foldBackground#1f100855
editor.foreground#f0d5c8
editor.inactiveSelectionBackground#ff6b3518
editor.lineHighlightBackground#1f1008
editor.selectionBackground#ff6b3535
editor.wordHighlightBackground#ff6b3528
editorBracketHighlight.foreground1#ff6b35
editorBracketHighlight.foreground2#ef476f
editorBracketHighlight.foreground3#06d6a0
editorBracketHighlight.foreground4#ff8c42
editorBracketHighlight.foreground5#f9c5b0
editorBracketHighlight.foreground6#ffd166
editorBracketMatch.background#ff6b3528
editorBracketMatch.border#ff6b35
editorCodeLens.foreground#5a3020
editorCursor.foreground#ff6b35
editorError.foreground#ff4d6d
editorGhostText.foreground#5a3020
editorGroup.border#2a1008
editorGroupHeader.tabsBackground#120806
editorGroupHeader.tabsBorder#2a1008
editorGutter.addedBackground#06d6a0
editorGutter.background#1a0e0a
editorGutter.deletedBackground#ff4d6d
editorGutter.modifiedBackground#ffd166
editorHoverWidget.background#150a06
editorHoverWidget.border#2a1008
editorIndentGuide.activeBackground1#3a1a10
editorIndentGuide.background1#2a1008
editorInfo.foreground#ff6b35
editorInlayHint.background#1f1208
editorInlayHint.foreground#3a1a10
editorLineNumber.activeForeground#ff6b35
editorLineNumber.foreground#3a1a10
editorRuler.foreground#2a1008
editorStickyScroll.background#150a06
editorSuggestWidget.background#150a06
editorSuggestWidget.highlightForeground#ef476f
editorSuggestWidget.selectedBackground#2a1008
editorSuggestWidget.selectedForeground#ff6b35
editorWarning.foreground#ffd166
editorWhitespace.foreground#2a1008
editorWidget.background#150a06
editorWidget.border#2a1008
editorWidget.foreground#f0d5c8
errorForeground#ff4d6d
focusBorder#ff6b35
foreground#f0d5c8
gitDecoration.addedResourceForeground#06d6a0
gitDecoration.conflictingResourceForeground#ef476f
gitDecoration.deletedResourceForeground#ff4d6d
gitDecoration.ignoredResourceForeground#3a1a10
gitDecoration.modifiedResourceForeground#ffd166
gitDecoration.untrackedResourceForeground#ff8c42
icon.foreground#ef476f
input.background#1f1008
input.border#2a1008
input.foreground#f0d5c8
input.placeholderForeground#5a3020
inputValidation.errorBorder#ff4d6d
inputValidation.infoBorder#ff6b35
inputValidation.warningBorder#ffd166
list.activeSelectionBackground#2a1008
list.activeSelectionForeground#f0d5c8
list.activeSelectionIconForeground#ff6b35
list.errorForeground#ff4d6d
list.focusBackground#2a1008
list.highlightForeground#ff6b35
list.hoverBackground#1f1008
list.inactiveSelectionBackground#200e08
list.warningForeground#ffd166
minimap.background#150a06
minimap.errorHighlight#ff4d6d
minimap.selectionHighlight#ff6b3560
minimap.warningHighlight#ffd166
minimapSlider.activeBackground#ff6b3540
minimapSlider.background#ff6b3515
minimapSlider.hoverBackground#ff6b3525
panel.background#150a06
panel.border#2a1008
panelTitle.activeBorder#ff6b35
panelTitle.activeForeground#ff6b35
panelTitle.inactiveForeground#5a3020
peekView.border#ff6b35
peekViewEditor.background#150a0680
peekViewResult.background#150a06
peekViewTitle.background#100806
peekViewTitleLabel.foreground#ff6b35
progressBar.background#ff6b35
scrollbarSlider.activeBackground#ff6b3560
scrollbarSlider.background#ff6b3520
scrollbarSlider.hoverBackground#ff6b3540
selection.background#ff6b3540
sideBar.background#150a06
sideBar.border#2a1008
sideBar.foreground#c8a898
sideBarSectionHeader.background#1a0e08
sideBarSectionHeader.border#2a1008
sideBarSectionHeader.foreground#ff8c42
sideBarTitle.foreground#ff6b35
statusBar.background#7a2010
statusBar.border#2a1008
statusBar.debuggingBackground#ff4d6d
statusBar.debuggingForeground#ffffff
statusBar.foreground#f0d5c8
statusBar.noFolderBackground#100806
statusBarItem.errorBackground#ff4d6d
statusBarItem.errorForeground#ffffff
statusBarItem.hoverBackground#ffffff15
statusBarItem.remoteBackground#ff6b35
statusBarItem.remoteForeground#ffffff
statusBarItem.warningBackground#ffd166
statusBarItem.warningForeground#000000
tab.activeBackground#1a0e0a
tab.activeBorderTop#ff6b35
tab.activeForeground#f0d5c8
tab.activeModifiedBorder#ffd166
tab.border#2a1008
tab.hoverBackground#1f1008
tab.hoverForeground#ef476f
tab.inactiveBackground#120806
tab.inactiveForeground#5a3020
terminal.ansiBlack#2a1008
terminal.ansiBlue#ff8c42
terminal.ansiBrightBlack#5a3020
terminal.ansiBrightBlue#ffa870
terminal.ansiBrightCyan#55ddee
terminal.ansiBrightGreen#44e8b8
terminal.ansiBrightMagenta#ff7090
terminal.ansiBrightRed#ff7088
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffdd88
terminal.ansiCyan#26c6da
terminal.ansiGreen#06d6a0
terminal.ansiMagenta#ef476f
terminal.ansiRed#ff4d6d
terminal.ansiWhite#f0d5c8
terminal.ansiYellow#ffd166
terminal.background#150a06
terminal.border#2a1008
terminal.foreground#f0d5c8
terminalCursor.foreground#ff6b35
textLink.activeForeground#ff6b35
textLink.foreground#ff8c42
titleBar.activeBackground#100806
titleBar.activeForeground#c8a898
titleBar.inactiveBackground#120806
titleBar.inactiveForeground#5a3020
widget.border#2a1008
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.line, comment.block	#5a3020	italic
string, string.quoted, string.template	#ffd166	—
constant.character.escape	#ef476f	—
string.regexp	#ff8c42	—
keyword, keyword.control, storage.type	#ff6b35	—
storage.modifier	#ff8c42	italic
keyword.operator	#ffaa80	—
entity.name.function, support.function	#ef476f	—
support.function.builtin, support.function.magic	#ff4d6d	—
variable, variable.other	#f9c5b0	—
variable.parameter	#f0d5c8	italic
variable.language	#ff4d6d	italic
entity.name.type, entity.name.class, support.class, support.type	#ff8c42	—
entity.name.type.interface	#06d6a0	italic
constant.numeric	#06d6a0	—
constant.language	#06d6a0	italic
constant, constant.other	#ffb347	—
entity.name.function.decorator, meta.decorator, storage.type.annotation	#ff4d6d	italic
entity.name.tag	#ff6b35	—
entity.other.attribute-name	#ff8c42	—
support.type.property-name.css	#ef476f	—
support.type.property-name.json	#ff8c42	—
markup.heading	#ff6b35	bold
markup.underline.link	#ff8c42	underline
invalid	#ff4d6d	strikethrough

VS Code preview

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

NovaTheme - Swazlll Edition — Swazlll Dracula

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.activeBackground#2d1b5e22
activityBar.activeBorder#bd93f9
activityBar.background#12081f
activityBar.border#2a1855
activityBar.foreground#bd93f9
activityBar.inactiveForeground#44305a
activityBarBadge.background#ff79c6
activityBarBadge.foreground#1a0c2e
badge.background#ff79c6
badge.foreground#1a0c2e
breadcrumb.activeSelectionForeground#bd93f9
breadcrumb.background#1a0c2e
breadcrumb.focusForeground#c3b8e8
breadcrumb.foreground#6272a4
breadcrumbPicker.background#160a28
button.background#9d4edd
button.foreground#ffffff
button.hoverBackground#bd93f9
button.secondaryBackground#2d1b5e
button.secondaryForeground#f8f8f2
descriptionForeground#c3b8e8
diffEditor.diagonalFill#2a1855
diffEditor.insertedLineBackground#50fa7b12
diffEditor.insertedTextBackground#50fa7b20
diffEditor.removedLineBackground#ff555512
diffEditor.removedTextBackground#ff555520
disabledForeground#6272a4
dropdown.background#1a0f33
dropdown.border#2d1b5e
dropdown.foreground#f8f8f2
editor.background#1a0c2e
editor.findMatchBackground#f1fa8c40
editor.findMatchBorder#f1fa8c
editor.findMatchHighlightBackground#f1fa8c25
editor.foldBackground#24143c55
editor.foreground#f8f8f2
editor.inactiveSelectionBackground#bd93f920
editor.lineHighlightBackground#24143c
editor.lineHighlightBorder#24143c00
editor.selectionBackground#bd93f940
editor.selectionForeground#ffffff
editor.wordHighlightBackground#bd93f930
editor.wordHighlightBorder#bd93f960
editor.wordHighlightStrongBackground#bd93f950
editor.wordHighlightStrongBorder#bd93f980
editorBracketHighlight.foreground1#bd93f9
editorBracketHighlight.foreground2#ff79c6
editorBracketHighlight.foreground3#f1fa8c
editorBracketHighlight.foreground4#8be9fd
editorBracketHighlight.foreground5#50fa7b
editorBracketHighlight.foreground6#ffb86c
editorBracketMatch.background#bd93f930
editorBracketMatch.border#bd93f9
editorCodeLens.foreground#6272a4
editorCursor.background#1a0c2e
editorCursor.foreground#ff79c6
editorError.foreground#ff5555
editorGhostText.foreground#6272a4
editorGroup.border#2a1855
editorGroup.dropBackground#bd93f920
editorGroupHeader.tabsBackground#12081f
editorGroupHeader.tabsBorder#2a1855
editorGutter.addedBackground#50fa7b
editorGutter.background#1a0c2e
editorGutter.deletedBackground#ff5555
editorGutter.modifiedBackground#f1fa8c
editorHint.foreground#8be9fd
editorHoverWidget.background#160a28
editorHoverWidget.border#2d1b5e
editorHoverWidget.foreground#f8f8f2
editorIndentGuide.activeBackground1#44305a
editorIndentGuide.background1#2d1b5e
editorInfo.foreground#bd93f9
editorInlayHint.background#1e1130
editorInlayHint.foreground#44305a
editorLineNumber.activeForeground#bd93f9
editorLineNumber.foreground#44305a
editorOverviewRuler.addedForeground#50fa7b
editorOverviewRuler.bracketMatchForeground#ff79c6
editorOverviewRuler.deletedForeground#ff5555
editorOverviewRuler.errorForeground#ff5555
editorOverviewRuler.findMatchForeground#f1fa8c88
editorOverviewRuler.modifiedForeground#ffb86c
editorOverviewRuler.selectionHighlightForeground#bd93f9
editorOverviewRuler.warningForeground#ffb86c
editorOverviewRuler.wordHighlightForeground#bd93f9
editorRuler.foreground#2d1b5e
editorStickyScroll.background#160a28
editorStickyScrollHover.background#24143c
editorSuggestWidget.background#160a28
editorSuggestWidget.border#2d1b5e
editorSuggestWidget.focusHighlightForeground#8be9fd
editorSuggestWidget.foreground#f8f8f2
editorSuggestWidget.highlightForeground#ff79c6
editorSuggestWidget.selectedBackground#2d1b5e
editorSuggestWidget.selectedForeground#bd93f9
editorUnnecessaryCode.opacity#00000070
editorWarning.foreground#ffb86c
editorWhitespace.foreground#44305a
editorWidget.background#160a28
editorWidget.border#2d1b5e
editorWidget.foreground#f8f8f2
errorForeground#ff5555
extensionBadge.remoteBackground#9d4edd
extensionBadge.remoteForeground#ffffff
extensionButton.prominentBackground#9d4edd
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#bd93f9
focusBorder#bd93f9
foreground#f8f8f2
gitDecoration.addedResourceForeground#50fa7b
gitDecoration.conflictingResourceForeground#ff79c6
gitDecoration.deletedResourceForeground#ff5555
gitDecoration.ignoredResourceForeground#44305a
gitDecoration.modifiedResourceForeground#ffb86c
gitDecoration.submoduleResourceForeground#bd93f9
gitDecoration.untrackedResourceForeground#8be9fd
icon.foreground#bd93f9
input.background#1a0f33
input.border#2d1b5e
input.foreground#f8f8f2
input.placeholderForeground#6272a4
inputValidation.errorBackground#3a0a0a
inputValidation.errorBorder#ff5555
inputValidation.infoBackground#1a1040
inputValidation.infoBorder#bd93f9
inputValidation.warningBackground#2a1a00
inputValidation.warningBorder#f1fa8c
list.activeSelectionBackground#2d1b5e
list.activeSelectionForeground#f8f8f2
list.activeSelectionIconForeground#bd93f9
list.deemphasizedForeground#6272a4
list.errorForeground#ff5555
list.focusBackground#2d1b5e
list.focusForeground#f8f8f2
list.highlightForeground#bd93f9
list.hoverBackground#24143c
list.hoverForeground#f8f8f2
list.inactiveSelectionBackground#2a1855
list.inactiveSelectionForeground#c3b8e8
list.warningForeground#ffb86c
minimap.background#160a28
minimap.errorHighlight#ff5555
minimap.findMatchHighlight#f1fa8c80
minimap.selectionHighlight#bd93f960
minimap.warningHighlight#ffb86c
minimapSlider.activeBackground#bd93f940
minimapSlider.background#bd93f915
minimapSlider.hoverBackground#bd93f925
notificationCenterHeader.background#12081f
notificationCenterHeader.foreground#ff79c6
notificationLink.foreground#bd93f9
notifications.background#160a28
notifications.border#2d1b5e
notifications.foreground#f8f8f2
notificationToast.border#2d1b5e
panel.background#160a28
panel.border#2a1855
panel.dropBorder#bd93f9
panelSectionHeader.background#1e1130
panelSectionHeader.foreground#ff79c6
panelTitle.activeBorder#bd93f9
panelTitle.activeForeground#bd93f9
panelTitle.inactiveForeground#6272a4
peekView.border#9d4edd
peekViewEditor.background#1e113080
peekViewEditor.matchHighlightBackground#f1fa8c40
peekViewResult.background#160a28
peekViewResult.fileForeground#c3b8e8
peekViewResult.lineForeground#c3b8e8
peekViewResult.matchHighlightBackground#f1fa8c30
peekViewResult.selectionBackground#2d1b5e
peekViewResult.selectionForeground#f8f8f2
peekViewTitle.background#0e0618
peekViewTitleDescription.foreground#6272a4
peekViewTitleLabel.foreground#bd93f9
progressBar.background#bd93f9
quickInput.background#160a28
quickInput.foreground#f8f8f2
quickInputList.focusBackground#2d1b5e
quickInputList.focusForeground#f8f8f2
quickInputTitle.background#12081f
scrollbar.shadow#00000066
scrollbarSlider.activeBackground#bd93f960
scrollbarSlider.background#bd93f920
scrollbarSlider.hoverBackground#bd93f940
selection.background#bd93f940
settings.checkboxBackground#1e1130
settings.dropdownBackground#1e1130
settings.headerForeground#ff79c6
settings.modifiedItemIndicator#ffb86c
settings.numberInputBackground#1e1130
settings.textInputBackground#1e1130
sideBar.background#160a28
sideBar.border#2a1855
sideBar.foreground#c3b8e8
sideBarSectionHeader.background#1e1130
sideBarSectionHeader.border#2a1855
sideBarSectionHeader.foreground#ff79c6
sideBarTitle.foreground#bd93f9
statusBar.background#5c2d91
statusBar.border#2d1b5e
statusBar.debuggingBackground#ff79c6
statusBar.debuggingForeground#1a0c2e
statusBar.foreground#f8f8f2
statusBar.noFolderBackground#12081f
statusBar.noFolderForeground#6272a4
statusBarItem.errorBackground#ff5555
statusBarItem.errorForeground#ffffff
statusBarItem.hoverBackground#ffffff15
statusBarItem.prominentBackground#9d4edd
statusBarItem.prominentForeground#ffffff
statusBarItem.prominentHoverBackground#bd93f9
statusBarItem.remoteBackground#ff79c6
statusBarItem.remoteForeground#1a0c2e
statusBarItem.warningBackground#ffb86c
statusBarItem.warningForeground#1a0c2e
tab.activeBackground#1a0c2e
tab.activeBorder#00000000
tab.activeBorderTop#bd93f9
tab.activeForeground#f8f8f2
tab.activeModifiedBorder#ffb86c
tab.border#2a1855
tab.hoverBackground#24143c
tab.hoverForeground#c3b8e8
tab.inactiveBackground#12081f
tab.inactiveForeground#6272a4
tab.inactiveModifiedBorder#ffb86c66
terminal.ansiBlack#22144a
terminal.ansiBlue#bd93f9
terminal.ansiBrightBlack#6272a4
terminal.ansiBrightBlue#d6acff
terminal.ansiBrightCyan#a4ffff
terminal.ansiBrightGreen#69ff94
terminal.ansiBrightMagenta#ff92df
terminal.ansiBrightRed#ff7777
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffffa5
terminal.ansiCyan#8be9fd
terminal.ansiGreen#50fa7b
terminal.ansiMagenta#ff79c6
terminal.ansiRed#ff5555
terminal.ansiWhite#f8f8f2
terminal.ansiYellow#f1fa8c
terminal.background#160a28
terminal.border#2a1855
terminal.foreground#f8f8f2
terminal.selectionBackground#bd93f940
terminal.selectionForeground#ffffff
terminalCursor.background#1a0c2e
terminalCursor.foreground#ff79c6
textBlockQuote.background#24143c
textBlockQuote.border#9d4edd
textCodeBlock.background#24143c
textLink.activeForeground#ff79c6
textLink.foreground#bd93f9
textPreformat.foreground#8be9fd
textSeparator.foreground#2d1b5e
titleBar.activeBackground#0e0618
titleBar.activeForeground#c3b8e8
titleBar.border#2a1855
titleBar.inactiveBackground#12081f
titleBar.inactiveForeground#6272a4
tree.indentGuidesStroke#44305a
tree.tableColumnsBorder#2a1855
widget.border#2d1b5e
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.line, comment.block, comment.block.documentation	#6272a4	italic
string, string.quoted, string.quoted.single, string.quoted.double, string.template	#f1fa8c	—
constant.character.escape	#ff79c6	—
string.regexp	#ffb86c	—
keyword, keyword.control, keyword.control.flow, keyword.control.return, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch, keyword.control.import, keyword.control.from, keyword.control.export, keyword.control.default	#ff79c6	—
keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.type, keyword.operator.new	#ff79c6	—
storage.type, storage.type.function, storage.type.class, storage.type.let, storage.type.const, storage.type.var	#ff79c6	—
storage.modifier, storage.modifier.async, storage.modifier.static, storage.modifier.abstract	#bd93f9	italic
entity.name.function, entity.name.function.member, meta.definition.method entity.name.function	#50fa7b	—
meta.function-call, meta.function-call entity.name.function, support.function	#50fa7b	—
support.function.builtin, support.function.console, support.function.magic	#8be9fd	—
variable, variable.other, variable.other.readwrite, variable.other.local	#f8f8f2	—
variable.other.constant, variable.other.constant.property	#f8f8f2	—
variable.parameter	#ffb86c	italic
variable.language, variable.language.this, variable.language.self	#bd93f9	italic
entity.name.type, entity.name.class, entity.name.interface, entity.name.struct, entity.name.enum	#cfc3ff	—
constant.numeric, constant.numeric.integer, constant.numeric.float	#bd93f9	—
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined	#bd93f9	—
meta.decorator, entity.name.function.decorator	#ff79c6	italic
entity.name.tag	#ff79c6	—
entity.other.attribute-name	#50fa7b	—
support.type.property-name	#8be9fd	—
punctuation, punctuation.separator, punctuation.terminator	#f8f8f2	—
entity.name.namespace, entity.name.module	#8be9fd	—
markup.heading, entity.name.section.markdown	#bd93f9	bold
markup.bold	#f8f8f2	bold
markup.italic	#8be9fd	italic
markup.inline.raw	#f1fa8c	—
invalid, invalid.illegal	#ff5555	—