Syn Themes — Syn-Agentic Cyberpunk Glass Design Presets

Name: Syn Themes — Syn-Agentic Cyberpunk Glass Design Presets
Author: jenninexus

Publisher: jenninexusThemes in package: 6

Six cyberpunk glass color themes for VS Code / Cursor — WCAG AA contrast, semantic highlighting, and tuned terminal colors.

Open in VS Code GitHub

Color themes

VS Code preview

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

Syn Themes — Syn-Agentic Cyberpunk Glass Design Presets — Synagraphic: Acid Rain

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#040807
activityBar.border#081410
activityBar.foreground#90e848
activityBar.inactiveForeground#5a8870
activityBarBadge.background#90e848
activityBarBadge.foreground#040807
badge.background#90e848
badge.foreground#040807
breadcrumb.activeSelectionForeground#90e848
breadcrumb.focusForeground#c8dcd0
breadcrumb.foreground#5a8870
breadcrumbPicker.background#080e0c
button.background#90e848
button.foreground#040807
button.hoverBackground#a0f050
button.secondaryBackground#102018
button.secondaryForeground#c8dcd0
descriptionForeground#6a9878
dropdown.background#080e0c
dropdown.border#102018
dropdown.foreground#c8dcd0
editor.background#050908
editor.findMatchBackground#90e84830
editor.findMatchHighlightBackground#90e84818
editor.foreground#c8dcd0
editor.inactiveSelectionBackground#90e84815
editor.lineHighlightBackground#0c140e08
editor.selectionBackground#90e84828
editor.wordHighlightBackground#c0c0c018
editorBracketMatch.background#90e84818
editorBracketMatch.border#90e84844
editorCursor.foreground#90e848
editorGroupHeader.tabsBackground#040807
editorGroupHeader.tabsBorder#081410
editorGutter.addedBackground#90e84866
editorGutter.deletedBackground#a8b82066
editorGutter.modifiedBackground#c8b03066
editorIndentGuide.activeBackground1#182e24
editorIndentGuide.background1#0c1a14
editorLineNumber.activeForeground#6e8a7e
editorLineNumber.foreground#78837f
editorOverviewRuler.border#081410
editorWhitespace.foreground#102018
errorForeground#a8b820
focusBorder#90e84844
foreground#c8dcd0
gitDecoration.addedResourceForeground#90e848
gitDecoration.conflictingResourceForeground#c8b030
gitDecoration.deletedResourceForeground#a8b820
gitDecoration.ignoredResourceForeground#66726d
gitDecoration.modifiedResourceForeground#c8b030
gitDecoration.untrackedResourceForeground#7ab050
input.background#080e0c
input.border#102018
input.foreground#c8dcd0
input.placeholderForeground#406858
inputOption.activeBorder#90e848
list.activeSelectionBackground#90e84822
list.activeSelectionForeground#d8ece4
list.focusBackground#90e84818
list.highlightForeground#90e848
list.hoverBackground#081210
list.inactiveSelectionBackground#90e84812
minimap.findMatchHighlight#90e84860
minimap.selectionHighlight#90e84844
notifications.background#080e0c
notifications.border#102018
notifications.foreground#c8dcd0
panel.background#050908
panel.border#102018
panelTitle.activeBorder#90e848
panelTitle.activeForeground#c8dcd0
panelTitle.inactiveForeground#5a8870
peekView.border#90e84844
peekViewEditor.background#060b09
peekViewResult.background#060b09
peekViewTitle.background#080e0c
scrollbar.shadow#00000040
scrollbarSlider.activeBackground#90e84844
scrollbarSlider.background#90e84818
scrollbarSlider.hoverBackground#90e84830
selection.background#90e84833
sideBar.background#060b09
sideBar.border#081410
sideBar.foreground#c8dcd0
sideBarSectionHeader.background#080e0c
sideBarSectionHeader.foreground#6a9878
sideBarTitle.foreground#90e848
statusBar.background#040807
statusBar.border#081410
statusBar.debuggingBackground#90e848
statusBar.debuggingForeground#040807
statusBar.foreground#90e848
statusBar.noFolderBackground#040807
statusBarItem.hoverBackground#90e84822
statusBarItem.remoteBackground#90e848
statusBarItem.remoteForeground#040807
tab.activeBackground#081210
tab.activeBorderTop#90e848
tab.activeForeground#d8ece4
tab.border#081410
tab.hoverBackground#0a1410
tab.inactiveBackground#040807
tab.inactiveForeground#5a8870
terminal.ansiBlack#101c14
terminal.ansiBlue#7ab050
terminal.ansiBrightBlack#2e4438
terminal.ansiBrightBlue#98c868
terminal.ansiBrightCyan#b8f878
terminal.ansiBrightGreen#a8f060
terminal.ansiBrightMagenta#d8d8d8
terminal.ansiBrightRed#c8d040
terminal.ansiBrightWhite#d8ece4
terminal.ansiBrightYellow#e0c848
terminal.ansiCyan#68c030
terminal.ansiGreen#90e848
terminal.ansiMagenta#c0c0c0
terminal.ansiRed#a8b820
terminal.ansiWhite#c8dcd0
terminal.ansiYellow#c8b030
terminal.background#040807
terminal.foreground#c8dcd0
terminalCursor.foreground#90e848
titleBar.activeBackground#040807
titleBar.activeForeground#90e848
titleBar.inactiveBackground#040807
titleBar.inactiveForeground#406858
widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#707f77	italic
string, string.quoted	#90e848	—
constant.numeric	#c8b030	—
constant.language, constant.other	#a8b820	—
keyword, storage.type, storage.modifier	#68c030	—
keyword.control, keyword.operator.logical	#40e8b8	—
keyword.operator	#7ab050	—
entity.name.function, support.function, meta.function-call	#7ab050	—
entity.name.type, entity.name.class, support.class, support.type	#c0c0c0	—
entity.name.type.interface	#68c030	—
variable, variable.other	#c8dcd0	—
variable.parameter	#d0d0d0	—
variable.other.property, variable.other.object.property	#8ab8a8	—
entity.name.tag	#68c030	—
entity.other.attribute-name	#c0c0c0	italic
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#90e848	—
support.type.property-name.css	#7ab050	—
variable.scss, variable.css	#d0d0d0	—
string.regexp	#a8b820	—
constant.character.escape	#68c030	—
punctuation	#677e71	—
support.type.property-name.json	#8ab8a8	—
markup.heading, entity.name.section.markdown	#90e848	bold
markup.bold	#d8ece4	bold
markup.italic	#d0d0d0	italic
markup.underline.link	#7ab050	—
markup.inline.raw, markup.fenced_code	#90e848	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#a8b820	—
variable.other.php	#d0d0d0	—
entity.name.tag.yaml	#8ab8a8	—
variable.language.this, variable.language.self	#a8b820	italic

VS Code preview

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

Syn Themes — Syn-Agentic Cyberpunk Glass Design Presets — Synagraphic: Ghost Protocol

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#030508
activityBar.border#0a1018
activityBar.foreground#5a9ce8
activityBar.inactiveForeground#507898
activityBarBadge.background#5a9ce8
activityBarBadge.foreground#030508
badge.background#5a9ce8
badge.foreground#030508
breadcrumb.activeSelectionForeground#5a9ce8
breadcrumb.focusForeground#b8c8d8
breadcrumb.foreground#6888a8
breadcrumbPicker.background#080c14
button.background#5a9ce8
button.foreground#030508
button.hoverBackground#60a0e0
button.secondaryBackground#101828
button.secondaryForeground#b8c8d8
descriptionForeground#6888a8
dropdown.background#080c14
dropdown.border#101828
dropdown.foreground#b8c8d8
editor.background#040610
editor.findMatchBackground#5a9ce830
editor.findMatchHighlightBackground#5a9ce818
editor.foreground#b8c8d8
editor.inactiveSelectionBackground#5a9ce815
editor.lineHighlightBackground#0c101808
editor.selectionBackground#5a9ce828
editor.wordHighlightBackground#5a9ce818
editorBracketMatch.background#5a9ce818
editorBracketMatch.border#5a9ce844
editorCursor.foreground#88c8ff
editorGroupHeader.tabsBackground#030508
editorGroupHeader.tabsBorder#0a1018
editorGutter.addedBackground#50a87866
editorGutter.deletedBackground#d8585866
editorGutter.modifiedBackground#5a9ce866
editorIndentGuide.activeBackground1#182030
editorIndentGuide.background1#0c1420
editorLineNumber.activeForeground#657a88
editorLineNumber.foreground#72828d
editorOverviewRuler.border#0a1018
editorWhitespace.foreground#101828
errorForeground#d85858
focusBorder#5a9ce844
foreground#b8c8d8
gitDecoration.addedResourceForeground#50a878
gitDecoration.conflictingResourceForeground#c8b850
gitDecoration.deletedResourceForeground#d85858
gitDecoration.ignoredResourceForeground#666d77
gitDecoration.modifiedResourceForeground#5a9ce8
gitDecoration.untrackedResourceForeground#50a8b8
input.background#080c14
input.border#101828
input.foreground#b8c8d8
input.placeholderForeground#576573
inputOption.activeBorder#5a9ce8
list.activeSelectionBackground#5a9ce822
list.activeSelectionForeground#d0dce8
list.focusBackground#5a9ce818
list.highlightForeground#88c8ff
list.hoverBackground#080c16
list.inactiveSelectionBackground#5a9ce812
minimap.findMatchHighlight#88c8ff44
minimap.selectionHighlight#5a9ce844
notifications.background#080c14
notifications.border#101828
notifications.foreground#b8c8d8
panel.background#040610
panel.border#101828
panelTitle.activeBorder#5a9ce8
panelTitle.activeForeground#b8c8d8
panelTitle.inactiveForeground#7898b0
peekView.border#5a9ce844
peekViewEditor.background#06080e
peekViewResult.background#06080e
peekViewTitle.background#080c14
scrollbar.shadow#00000040
scrollbarSlider.activeBackground#5a9ce844
scrollbarSlider.background#5a9ce818
scrollbarSlider.hoverBackground#5a9ce830
selection.background#5a9ce833
sideBar.background#050810
sideBar.border#0a1018
sideBar.foreground#b8c8d8
sideBarSectionHeader.background#080c14
sideBarSectionHeader.foreground#7898b0
sideBarTitle.foreground#5a9ce8
statusBar.background#030508
statusBar.border#0a1018
statusBar.debuggingBackground#5a9ce8
statusBar.debuggingForeground#030508
statusBar.foreground#5a9ce8
statusBar.noFolderBackground#030508
statusBarItem.hoverBackground#5a9ce822
statusBarItem.remoteBackground#5a9ce8
statusBarItem.remoteForeground#030508
tab.activeBackground#080c16
tab.activeBorderTop#5a9ce8
tab.activeForeground#d0dce8
tab.border#0a1018
tab.hoverBackground#0a1018
tab.inactiveBackground#030508
tab.inactiveForeground#5878a0
terminal.ansiBlack#101828
terminal.ansiBlue#5a9ce8
terminal.ansiBrightBlack#384858
terminal.ansiBrightBlue#68a8e8
terminal.ansiBrightCyan#68c0d0
terminal.ansiBrightGreen#68c090
terminal.ansiBrightMagenta#a890d0
terminal.ansiBrightRed#f07070
terminal.ansiBrightWhite#d0dce8
terminal.ansiBrightYellow#e0d068
terminal.ansiCyan#50a8b8
terminal.ansiGreen#50a878
terminal.ansiMagenta#8878b8
terminal.ansiRed#d85858
terminal.ansiWhite#b8c8d8
terminal.ansiYellow#c8b850
terminal.background#030508
terminal.foreground#b8c8d8
terminalCursor.foreground#88c8ff
titleBar.activeBackground#030508
titleBar.activeForeground#5a9ce8
titleBar.inactiveBackground#030508
titleBar.inactiveForeground#5878a0
widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#747d93	italic
string, string.quoted	#58c8b0	—
constant.numeric	#c8b850	—
constant.language, constant.other	#d85858	—
keyword, storage.type, storage.modifier	#5a9ce8	—
keyword.control, keyword.operator.logical	#70a8f0	—
keyword.operator	#88c8ff	—
entity.name.function, support.function, meta.function-call	#88c8ff	—
entity.name.type, entity.name.class, support.class, support.type	#c8b850	—
entity.name.type.interface	#50a8b8	—
variable, variable.other	#b8c8d8	—
variable.parameter	#90a8c0	—
variable.other.property, variable.other.object.property	#7098c0	—
entity.name.tag	#5a9ce8	—
entity.other.attribute-name	#50a8b8	italic
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#70a8f0	—
support.type.property-name.css	#7098c0	—
variable.scss, variable.css	#90a8c0	—
string.regexp	#d85858	—
constant.character.escape	#50a8b8	—
punctuation	#737e8a	—
support.type.property-name.json	#7098c0	—
markup.heading, entity.name.section.markdown	#5a9ce8	bold
markup.bold	#d0dce8	bold
markup.italic	#90a8c0	italic
markup.underline.link	#50a8b8	—
markup.inline.raw, markup.fenced_code	#58c8b0	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#d85858	—
variable.other.php	#90a8c0	—
entity.name.tag.yaml	#7098c0	—
variable.language.this, variable.language.self	#d07898	italic

VS Code preview

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

Syn Themes — Syn-Agentic Cyberpunk Glass Design Presets — Synagraphic: Martian

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#0a0a0e
activityBar.border#161320
activityBar.foreground#FF6B00
activityBar.inactiveForeground#6a6480
activityBarBadge.background#8B5CF6
activityBarBadge.foreground#ffffff
badge.background#8B5CF6
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#FF6B00
breadcrumb.focusForeground#ece8f4
breadcrumb.foreground#6a6480
breadcrumbPicker.background#161320
button.background#FF6B00
button.foreground#0a0a0e
button.hoverBackground#FF8533
button.secondaryBackground#211c2b
button.secondaryForeground#ece8f4
descriptionForeground#a89ccb
dropdown.background#161320
dropdown.border#211c2b
dropdown.foreground#ece8f4
editor.background#0c0a12
editor.findMatchBackground#FFAA0030
editor.findMatchHighlightBackground#FFAA0018
editor.foreground#ece8f4
editor.inactiveSelectionBackground#FF6B0012
editor.lineHighlightBackground#16132088
editor.selectionBackground#FF6B0025
editor.wordHighlightBackground#8B5CF618
editorBracketMatch.background#8B5CF618
editorBracketMatch.border#8B5CF644
editorCursor.foreground#FFAA00
editorGroupHeader.tabsBackground#0a0a0e
editorGroupHeader.tabsBorder#161320
editorGutter.addedBackground#42f4c866
editorGutter.deletedBackground#E53E3E66
editorGutter.modifiedBackground#FF6B0066
editorIndentGuide.activeBackground1#2a2438
editorIndentGuide.background1#1a1624
editorLineNumber.activeForeground#b8b0d0
editorLineNumber.foreground#8a8498
editorOverviewRuler.border#161320
editorWhitespace.foreground#211c2b
errorForeground#E53E3E
focusBorder#FF6B0044
foreground#ece8f4
gitDecoration.addedResourceForeground#42f4c8
gitDecoration.conflictingResourceForeground#FFAA00
gitDecoration.deletedResourceForeground#E53E3E
gitDecoration.ignoredResourceForeground#4a4658
gitDecoration.modifiedResourceForeground#FF6B00
gitDecoration.untrackedResourceForeground#63B3ED
input.background#161320
input.border#211c2b
input.foreground#ece8f4
input.placeholderForeground#6a6480
inputOption.activeBorder#FF6B00
list.activeSelectionBackground#FF6B0018
list.activeSelectionForeground#ece8f4
list.focusBackground#FF6B0015
list.highlightForeground#FFAA00
list.hoverBackground#161320
list.inactiveSelectionBackground#8B5CF612
minimap.findMatchHighlight#FFAA0040
minimap.selectionHighlight#FF6B0030
notifications.background#161320
notifications.border#211c2b
notifications.foreground#ece8f4
panel.background#0c0a12
panel.border#211c2b
panelTitle.activeBorder#FF6B00
panelTitle.activeForeground#ece8f4
panelTitle.inactiveForeground#6a6480
peekView.border#8B5CF644
peekViewEditor.background#121018
peekViewResult.background#121018
peekViewTitle.background#161320
scrollbar.shadow#00000060
scrollbarSlider.activeBackground#FF6B003c
scrollbarSlider.background#FF6B0015
scrollbarSlider.hoverBackground#FF6B0028
selection.background#FF6B0030
sideBar.background#121018
sideBar.border#161320
sideBar.foreground#ece8f4
sideBarSectionHeader.background#161320
sideBarSectionHeader.foreground#a89ccb
sideBarTitle.foreground#FF6B00
statusBar.background#0a0a0e
statusBar.border#161320
statusBar.debuggingBackground#E53E3E
statusBar.debuggingForeground#ffffff
statusBar.foreground#FF6B00
statusBar.noFolderBackground#0a0a0e
statusBarItem.hoverBackground#FF6B0018
statusBarItem.remoteBackground#8B5CF6
statusBarItem.remoteForeground#ffffff
tab.activeBackground#161320
tab.activeBorderTop#FF6B00
tab.activeForeground#ece8f4
tab.border#161320
tab.hoverBackground#1a1624
tab.inactiveBackground#0a0a0e
tab.inactiveForeground#6a6480
terminal.ansiBlack#161320
terminal.ansiBlue#63B3ED
terminal.ansiBrightBlack#6a6480
terminal.ansiBrightBlue#88ccff
terminal.ansiBrightCyan#70ffe8
terminal.ansiBrightGreen#70ffe8
terminal.ansiBrightMagenta#a78bfa
terminal.ansiBrightRed#ff5c5c
terminal.ansiBrightWhite#f8f6ff
terminal.ansiBrightYellow#ffc840
terminal.ansiCyan#42f4c8
terminal.ansiGreen#42f4c8
terminal.ansiMagenta#8B5CF6
terminal.ansiRed#E53E3E
terminal.ansiWhite#ece8f4
terminal.ansiYellow#FFAA00
terminal.background#0a0a0e
terminal.foreground#ece8f4
terminalCursor.foreground#FFAA00
titleBar.activeBackground#0a0a0e
titleBar.activeForeground#FF6B00
titleBar.inactiveBackground#0a0a0e
titleBar.inactiveForeground#6a6480
widget.shadow#00000070

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8a849e	italic
string, string.quoted	#42f4c8	—
constant.numeric	#FFAA00	—
constant.language, constant.other	#FF8533	—
keyword, storage.type, storage.modifier	#FF6B00	—
keyword.control, keyword.operator.logical	#FF8533	—
keyword.operator	#a89ccb	—
entity.name.function, support.function, meta.function-call	#63B3ED	—
entity.name.type, entity.name.class, support.class, support.type	#8B5CF6	—
entity.name.type.interface	#42f4c8	—
variable, variable.other	#ece8f4	—
variable.parameter	#a78bfa	—
variable.other.property, variable.other.object.property	#a89ccb	—
entity.name.tag	#FF6B00	—
entity.other.attribute-name	#8B5CF6	italic
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#42f4c8	—
support.type.property-name.css	#63B3ED	—
variable.scss, variable.css	#a78bfa	—
string.regexp	#FF8533	—
constant.character.escape	#FFAA00	—
punctuation	#8a849e	—
support.type.property-name.json	#a89ccb	—
markup.heading, entity.name.section.markdown	#FF6B00	bold
markup.bold	#ece8f4	bold
markup.italic	#a78bfa	italic
markup.underline.link	#63B3ED	—
markup.inline.raw, markup.fenced_code	#42f4c8	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#FF6B00	—
variable.other.php	#a78bfa	—
entity.name.tag.yaml	#a89ccb	—
variable.language.this, variable.language.self	#FF8533	italic

VS Code preview

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

Syn Themes — Syn-Agentic Cyberpunk Glass Design Presets — Synagraphic: Neon Decay

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#04060a
activityBar.border#0a0e16
activityBar.foreground#42f4c8
activityBar.inactiveForeground#5878a0
activityBarBadge.background#ff2d6f
activityBarBadge.foreground#ffffff
badge.background#ff2d6f
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#42f4c8
breadcrumb.focusForeground#b8c4d8
breadcrumb.foreground#6878a8
breadcrumbPicker.background#080c14
button.background#42f4c8
button.foreground#04060a
button.hoverBackground#5cfcd8
button.secondaryBackground#1a2238
button.secondaryForeground#b8c4d8
descriptionForeground#7381ab
dropdown.background#080c14
dropdown.border#141c30
dropdown.foreground#b8c4d8
editor.background#05070c
editor.findMatchBackground#ff2d6f30
editor.findMatchHighlightBackground#ff2d6f18
editor.foreground#b8c4d8
editor.inactiveSelectionBackground#42f4c812
editor.lineHighlightBackground#0c101a50
editor.selectionBackground#42f4c825
editor.wordHighlightBackground#b48eff18
editorBracketMatch.background#b48eff18
editorBracketMatch.border#b48eff44
editorCursor.foreground#42f4c8
editorGroupHeader.tabsBackground#04060a
editorGroupHeader.tabsBorder#0a0e16
editorGutter.addedBackground#42f4c866
editorGutter.deletedBackground#ff2d6f66
editorGutter.modifiedBackground#b48eff66
editorIndentGuide.activeBackground1#1a2238
editorIndentGuide.background1#0e1420
editorLineNumber.activeForeground#42f4c8
editorLineNumber.foreground#778498
editorOverviewRuler.border#0a0e16
editorWhitespace.foreground#121828
errorForeground#ff3860
focusBorder#42f4c844
foreground#b8c4d8
gitDecoration.addedResourceForeground#42f4c8
gitDecoration.conflictingResourceForeground#f0e050
gitDecoration.deletedResourceForeground#ff3860
gitDecoration.ignoredResourceForeground#666d7d
gitDecoration.modifiedResourceForeground#b48eff
gitDecoration.untrackedResourceForeground#5c8aff
input.background#080c14
input.border#141c30
input.foreground#b8c4d8
input.placeholderForeground#676e84
inputOption.activeBorder#42f4c8
list.activeSelectionBackground#42f4c818
list.activeSelectionForeground#e0e8f0
list.focusBackground#42f4c815
list.highlightForeground#42f4c8
list.hoverBackground#0a0e18
list.inactiveSelectionBackground#42f4c80c
minimap.findMatchHighlight#ff2d6f40
minimap.selectionHighlight#42f4c830
notifications.background#080c14
notifications.border#141c30
notifications.foreground#b8c4d8
panel.background#05070c
panel.border#0e1420
panelTitle.activeBorder#42f4c8
panelTitle.activeForeground#b8c4d8
panelTitle.inactiveForeground#6878a8
peekView.border#b48eff44
peekViewEditor.background#06080e
peekViewResult.background#06080e
peekViewTitle.background#080c14
scrollbar.shadow#00000060
scrollbarSlider.activeBackground#42f4c838
scrollbarSlider.background#42f4c812
scrollbarSlider.hoverBackground#42f4c825
selection.background#42f4c830
sideBar.background#06080e
sideBar.border#0a0e16
sideBar.foreground#b8c4d8
sideBarSectionHeader.background#080c14
sideBarSectionHeader.foreground#6070a0
sideBarTitle.foreground#42f4c8
statusBar.background#04060a
statusBar.border#0a0e16
statusBar.debuggingBackground#ff2d6f
statusBar.debuggingForeground#ffffff
statusBar.foreground#42f4c8aa
statusBar.noFolderBackground#04060a
statusBarItem.hoverBackground#42f4c818
statusBarItem.remoteBackground#b48eff
statusBarItem.remoteForeground#ffffff
tab.activeBackground#080c16
tab.activeBorderTop#42f4c8
tab.activeForeground#e0e8f0
tab.border#0a0e16
tab.hoverBackground#0c1020
tab.inactiveBackground#04060a
tab.inactiveForeground#6070a0
terminal.ansiBlack#0e1420
terminal.ansiBlue#5c8aff
terminal.ansiBrightBlack#2e3850
terminal.ansiBrightBlue#80a8ff
terminal.ansiBrightCyan#6afce0
terminal.ansiBrightGreen#6afce0
terminal.ansiBrightMagenta#d0aaff
terminal.ansiBrightRed#ff5c80
terminal.ansiBrightWhite#e0e8f0
terminal.ansiBrightYellow#f8f070
terminal.ansiCyan#42f4c8
terminal.ansiGreen#42f4c8
terminal.ansiMagenta#b48eff
terminal.ansiRed#ff3860
terminal.ansiWhite#b8c4d8
terminal.ansiYellow#f0e050
terminal.background#04060a
terminal.foreground#b8c4d8
terminalCursor.foreground#42f4c8
titleBar.activeBackground#04060a
titleBar.activeForeground#42f4c8
titleBar.inactiveBackground#04060a
titleBar.inactiveForeground#5070a0
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7f8695	italic
string, string.quoted	#42f4c8	—
constant.numeric	#f0e050	—
constant.language, constant.other	#ff6e9c	—
keyword, storage.type, storage.modifier	#ff2d6f	—
keyword.control, keyword.operator.logical	#ff5c80	—
keyword.operator	#8090b0	—
entity.name.function, support.function, meta.function-call	#5c8aff	—
entity.name.type, entity.name.class, support.class, support.type	#b48eff	—
entity.name.type.interface	#42f4c8	—
variable, variable.other	#b8c4d8	—
variable.parameter	#d0a0ff	—
variable.other.property, variable.other.object.property	#8090b0	—
entity.name.tag	#ff2d6f	—
entity.other.attribute-name	#b48eff	italic
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#42f4c8	—
support.type.property-name.css	#5c8aff	—
variable.scss, variable.css	#d0a0ff	—
string.regexp	#ff3860	—
constant.character.escape	#42f4c8	—
punctuation	#79879d	—
support.type.property-name.json	#8090b0	—
markup.heading, entity.name.section.markdown	#42f4c8	bold
markup.bold	#e0e8f0	bold
markup.italic	#d0a0ff	italic
markup.underline.link	#5c8aff	—
markup.inline.raw, markup.fenced_code	#42f4c8	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#ff2d6f	—
variable.other.php	#d0a0ff	—
entity.name.tag.yaml	#8090b0	—
variable.language.this, variable.language.self	#ff6e9c	italic