Cyberpunk Samurai Theme

Name: Cyberpunk Samurai Theme
Author: Singularity Inc.

Publisher: Singularity Inc.Themes in package: 9

Cyberpunk 2077 / Night City themes — Arasaka, Samurai, Tyger Claw, Trauma Team, Maelstrom — built on One Dark comfort with neon accents.

Open in VS Code GitHub

Color themes

VS Code preview

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

Cyberpunk Samurai Theme — Cyberpunk Samurai: Samurai

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#fcee0a
activityBar.background#100d07
activityBar.foreground#e8e4cb
activityBar.inactiveForeground#736f50
activityBarBadge.background#fcee0a
activityBarBadge.foreground#15120a
badge.background#fcee0a
badge.foreground#15120a
breadcrumb.focusForeground#e8e4cb
breadcrumb.foreground#736f50
breadcrumbPicker.background#100d07
descriptionForeground#736f50
diffEditor.insertedTextBackground#b8e6001a
diffEditor.removedTextBackground#ff38641a
dropdown.background#1d1910
dropdown.foreground#e8e4cb
editor.background#15120a
editor.findMatchBackground#fcee0a55
editor.findMatchHighlightBackground#fcee0a33
editor.foreground#e8e4cb
editor.lineHighlightBackground#1d1910
editor.selectionBackground#ff38642e
editor.selectionHighlightBackground#fcee0a22
editor.wordHighlightBackground#00d7f222
editorBracketHighlight.foreground1#fcee0a
editorBracketHighlight.foreground2#00d7f2
editorBracketHighlight.foreground3#c8e64b
editorBracketHighlight.foreground4#ff5cae
editorBracketHighlight.foreground5#fcee0a
editorBracketHighlight.foreground6#fcee0a
editorBracketHighlight.unexpectedBracket.foreground#ff5c66
editorBracketMatch.background#fcee0a22
editorBracketMatch.border#fcee0a
editorCursor.foreground#fcee0a
editorGroupHeader.noTabsBackground#100d07
editorGroupHeader.tabsBackground#100d07
editorGutter.addedBackground#b8e600
editorGutter.deletedBackground#ff3864
editorGutter.modifiedBackground#00d7f2
editorHoverWidget.background#1d1910
editorIndentGuide.activeBackground1#736f50
editorIndentGuide.background1#1d1910
editorLineNumber.activeForeground#e8e4cb
editorLineNumber.foreground#736f50
editorSuggestWidget.background#1d1910
editorSuggestWidget.highlightForeground#fcee0a
editorSuggestWidget.selectedBackground#15120a
editorWhitespace.foreground#1d1910
editorWidget.background#1d1910
editorWidget.foreground#e8e4cb
errorForeground#ff5c66
focusBorder#fcee0a
foreground#e8e4cb
gitDecoration.deletedResourceForeground#ff3864
gitDecoration.ignoredResourceForeground#736f50
gitDecoration.modifiedResourceForeground#00d7f2
gitDecoration.untrackedResourceForeground#b8e600
icon.foreground#e8e4cb
input.background#1d1910
input.border#1d1910
input.foreground#e8e4cb
input.placeholderForeground#736f50
inputOption.activeBorder#fcee0a
list.activeSelectionBackground#1d1910
list.activeSelectionForeground#e8e4cb
list.highlightForeground#fcee0a
list.hoverBackground#1d1910aa
list.inactiveSelectionBackground#1d1910
notificationCenterHeader.background#100d07
notifications.background#1d1910
panel.background#100d07
panel.border#1d1910
panelTitle.activeBorder#fcee0a
panelTitle.activeForeground#e8e4cb
peekView.border#fcee0a
peekViewEditor.background#100d07
peekViewEditor.matchHighlightBackground#fcee0a44
peekViewResult.background#100d07
peekViewResult.selectionBackground#1d1910
peekViewTitle.background#100d07
pickerGroup.border#1d1910
pickerGroup.foreground#fcee0a
progressBar.background#fcee0a
quickInput.background#100d07
quickInputList.focusBackground#1d1910
scrollbarSlider.activeBackground#736f5088
scrollbarSlider.background#736f5044
scrollbarSlider.hoverBackground#736f5066
sideBar.background#100d07
sideBar.foreground#e8e4cb
sideBarSectionHeader.background#100d07
sideBarTitle.foreground#e8e4cb
statusBar.background#100d07
statusBar.border#fcee0a
statusBar.debuggingBackground#fcee0a
statusBar.debuggingForeground#15120a
statusBar.foreground#736f50
statusBar.noFolderBackground#100d07
statusBarItem.remoteBackground#fcee0a
statusBarItem.remoteForeground#15120a
tab.activeBackground#15120a
tab.activeBorderTop#fcee0a
tab.activeForeground#e8e4cb
tab.border#100d07
tab.inactiveBackground#100d07
tab.inactiveForeground#736f50
terminal.ansiBlack#1d1910
terminal.ansiBlue#4aa8ff
terminal.ansiBrightBlack#736f50
terminal.ansiBrightBlue#4aa8ff
terminal.ansiBrightCyan#00d7f2
terminal.ansiBrightGreen#b8e600
terminal.ansiBrightMagenta#ff5cae
terminal.ansiBrightRed#ff3864
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#fcee0a
terminal.ansiCyan#00d7f2
terminal.ansiGreen#b8e600
terminal.ansiMagenta#ff5cae
terminal.ansiRed#ff3864
terminal.ansiWhite#e8e4cb
terminal.ansiYellow#fcee0a
terminal.background#15120a
terminal.foreground#e8e4cb
terminalCursor.foreground#fcee0a
textLink.activeForeground#00d7f2
textLink.foreground#fcee0a
textPreformat.foreground#c8e64b
titleBar.activeBackground#100d07
titleBar.activeForeground#e8e4cb
titleBar.inactiveBackground#100d07
titleBar.inactiveForeground#736f50

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#736f50	italic
keyword, keyword.control, storage, storage.type, storage.modifier	#fcee0a	—
keyword.operator	#e8e4cb	—
string, string.quoted, string.template, punctuation.definition.string	#c8e64b	—
entity.name.function, support.function, meta.function-call, entity.other.attribute-name	#00d7f2	—
entity.name.type, entity.name.class, support.type, support.class, entity.name.tag	#ff5cae	—
variable.language.this, variable.other.property, support.variable.property, meta.object-literal.key, support.type.property-name	#fcee0a	—
constant.numeric, constant.language, constant.other	#fcee0a	—
variable, variable.other.readwrite, variable.parameter	#e8e4cb	—
markup.heading, entity.name.section	#fcee0a	bold
markup.bold	—	bold
markup.italic	—	italic
markup.inline.raw, markup.fenced_code	#c8e64b	—
markup.underline.link, string.other.link	#fcee0a	—
invalid, invalid.illegal	#ff5c66	—

VS Code preview

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

Cyberpunk Samurai Theme — Cyberpunk Samurai: Samurai Dim

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#d6c93a
activityBar.background#120f08
activityBar.foreground#cfccb4
activityBar.inactiveForeground#635f47
activityBarBadge.background#d6c93a
activityBarBadge.foreground#17140c
badge.background#d6c93a
badge.foreground#17140c
breadcrumb.focusForeground#cfccb4
breadcrumb.foreground#635f47
breadcrumbPicker.background#120f08
descriptionForeground#635f47
diffEditor.insertedTextBackground#a8c0501a
diffEditor.removedTextBackground#d95f7a1a
dropdown.background#1f1b12
dropdown.foreground#cfccb4
editor.background#17140c
editor.findMatchBackground#d6c93a55
editor.findMatchHighlightBackground#d6c93a33
editor.foreground#cfccb4
editor.lineHighlightBackground#1f1b12
editor.selectionBackground#d95f7a26
editor.selectionHighlightBackground#d6c93a22
editor.wordHighlightBackground#4eaebd22
editorBracketHighlight.foreground1#d6c93a
editorBracketHighlight.foreground2#4eaebd
editorBracketHighlight.foreground3#a8c050
editorBracketHighlight.foreground4#d97aa6
editorBracketHighlight.foreground5#c9aa48
editorBracketHighlight.foreground6#c9aa48
editorBracketHighlight.unexpectedBracket.foreground#ff5c66
editorBracketMatch.background#d6c93a22
editorBracketMatch.border#d6c93a
editorCursor.foreground#fcee0a
editorGroupHeader.noTabsBackground#120f08
editorGroupHeader.tabsBackground#120f08
editorGutter.addedBackground#a8c050
editorGutter.deletedBackground#d95f7a
editorGutter.modifiedBackground#4eaebd
editorHoverWidget.background#1f1b12
editorIndentGuide.activeBackground1#635f47
editorIndentGuide.background1#1f1b12
editorLineNumber.activeForeground#cfccb4
editorLineNumber.foreground#635f47
editorSuggestWidget.background#1f1b12
editorSuggestWidget.highlightForeground#d6c93a
editorSuggestWidget.selectedBackground#17140c
editorWhitespace.foreground#1f1b12
editorWidget.background#1f1b12
editorWidget.foreground#cfccb4
errorForeground#ff5c66
focusBorder#d6c93a
foreground#cfccb4
gitDecoration.deletedResourceForeground#d95f7a
gitDecoration.ignoredResourceForeground#635f47
gitDecoration.modifiedResourceForeground#4eaebd
gitDecoration.untrackedResourceForeground#a8c050
icon.foreground#cfccb4
input.background#1f1b12
input.border#1f1b12
input.foreground#cfccb4
input.placeholderForeground#635f47
inputOption.activeBorder#d6c93a
list.activeSelectionBackground#1f1b12
list.activeSelectionForeground#cfccb4
list.highlightForeground#d6c93a
list.hoverBackground#1f1b12aa
list.inactiveSelectionBackground#1f1b12
notificationCenterHeader.background#120f08
notifications.background#1f1b12
panel.background#120f08
panel.border#1f1b12
panelTitle.activeBorder#d6c93a
panelTitle.activeForeground#cfccb4
peekView.border#d6c93a
peekViewEditor.background#120f08
peekViewEditor.matchHighlightBackground#d6c93a44
peekViewResult.background#120f08
peekViewResult.selectionBackground#1f1b12
peekViewTitle.background#120f08
pickerGroup.border#1f1b12
pickerGroup.foreground#d6c93a
progressBar.background#d6c93a
quickInput.background#120f08
quickInputList.focusBackground#1f1b12
scrollbarSlider.activeBackground#635f4788
scrollbarSlider.background#635f4744
scrollbarSlider.hoverBackground#635f4766
sideBar.background#120f08
sideBar.foreground#cfccb4
sideBarSectionHeader.background#120f08
sideBarTitle.foreground#cfccb4
statusBar.background#120f08
statusBar.border#d6c93a
statusBar.debuggingBackground#d6c93a
statusBar.debuggingForeground#17140c
statusBar.foreground#635f47
statusBar.noFolderBackground#120f08
statusBarItem.remoteBackground#d6c93a
statusBarItem.remoteForeground#17140c
tab.activeBackground#17140c
tab.activeBorderTop#d6c93a
tab.activeForeground#cfccb4
tab.border#120f08
tab.inactiveBackground#120f08
tab.inactiveForeground#635f47
terminal.ansiBlack#1f1b12
terminal.ansiBlue#5a96cc
terminal.ansiBrightBlack#635f47
terminal.ansiBrightBlue#5a96cc
terminal.ansiBrightCyan#4eaebd
terminal.ansiBrightGreen#a8c050
terminal.ansiBrightMagenta#d97aa6
terminal.ansiBrightRed#d95f7a
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#d6c93a
terminal.ansiCyan#4eaebd
terminal.ansiGreen#a8c050
terminal.ansiMagenta#d97aa6
terminal.ansiRed#d95f7a
terminal.ansiWhite#cfccb4
terminal.ansiYellow#d6c93a
terminal.background#17140c
terminal.foreground#cfccb4
terminalCursor.foreground#fcee0a
textLink.activeForeground#4eaebd
textLink.foreground#d6c93a
textPreformat.foreground#a8c050
titleBar.activeBackground#120f08
titleBar.activeForeground#cfccb4
titleBar.inactiveBackground#120f08
titleBar.inactiveForeground#635f47

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#635f47	italic
keyword, keyword.control, storage, storage.type, storage.modifier	#d6c93a	—
keyword.operator	#cfccb4	—
string, string.quoted, string.template, punctuation.definition.string	#a8c050	—
entity.name.function, support.function, meta.function-call, entity.other.attribute-name	#4eaebd	—
entity.name.type, entity.name.class, support.type, support.class, entity.name.tag	#d97aa6	—
variable.language.this, variable.other.property, support.variable.property, meta.object-literal.key, support.type.property-name	#c9aa48	—
constant.numeric, constant.language, constant.other	#c9aa48	—
variable, variable.other.readwrite, variable.parameter	#cfccb4	—
markup.heading, entity.name.section	#d6c93a	bold
markup.bold	—	bold
markup.italic	—	italic
markup.inline.raw, markup.fenced_code	#a8c050	—
markup.underline.link, string.other.link	#d6c93a	—
invalid, invalid.illegal	#ff5c66	—

VS Code preview

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

Cyberpunk Samurai Theme — Cyberpunk Samurai: Trauma Team

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#ef5346
activityBar.background#05181d
activityBar.foreground#eaf2f3
activityBar.inactiveForeground#648b93
activityBarBadge.background#ef5346
activityBarBadge.foreground#082228
badge.background#ef5346
badge.foreground#082228
breadcrumb.focusForeground#eaf2f3
breadcrumb.foreground#648b93
breadcrumbPicker.background#05181d
descriptionForeground#648b93
diffEditor.insertedTextBackground#74d6b41a
diffEditor.removedTextBackground#ef53461a
dropdown.background#103138
dropdown.foreground#eaf2f3
editor.background#082228
editor.findMatchBackground#ef534655
editor.findMatchHighlightBackground#ef534633
editor.foreground#eaf2f3
editor.lineHighlightBackground#103138
editor.selectionBackground#ef534633
editor.selectionHighlightBackground#ef534622
editor.wordHighlightBackground#5cc6e622
editorBracketHighlight.foreground1#ef5346
editorBracketHighlight.foreground2#5cc6e6
editorBracketHighlight.foreground3#74d6b4
editorBracketHighlight.foreground4#aee9f0
editorBracketHighlight.foreground5#f2c879
editorBracketHighlight.foreground6#f47b6f
editorBracketHighlight.unexpectedBracket.foreground#ff5c66
editorBracketMatch.background#ef534622
editorBracketMatch.border#ef5346
editorCursor.foreground#ef5346
editorGroupHeader.noTabsBackground#05181d
editorGroupHeader.tabsBackground#05181d
editorGutter.addedBackground#74d6b4
editorGutter.deletedBackground#ef5346
editorGutter.modifiedBackground#5cc6e6
editorHoverWidget.background#103138
editorIndentGuide.activeBackground1#648b93
editorIndentGuide.background1#103138
editorLineNumber.activeForeground#eaf2f3
editorLineNumber.foreground#648b93
editorSuggestWidget.background#103138
editorSuggestWidget.highlightForeground#ef5346
editorSuggestWidget.selectedBackground#082228
editorWhitespace.foreground#103138
editorWidget.background#103138
editorWidget.foreground#eaf2f3
errorForeground#ff5c66
focusBorder#ef5346
foreground#eaf2f3
gitDecoration.deletedResourceForeground#ef5346
gitDecoration.ignoredResourceForeground#648b93
gitDecoration.modifiedResourceForeground#5cc6e6
gitDecoration.untrackedResourceForeground#74d6b4
icon.foreground#eaf2f3
input.background#103138
input.border#103138
input.foreground#eaf2f3
input.placeholderForeground#648b93
inputOption.activeBorder#ef5346
list.activeSelectionBackground#103138
list.activeSelectionForeground#eaf2f3
list.highlightForeground#ef5346
list.hoverBackground#103138aa
list.inactiveSelectionBackground#103138
notificationCenterHeader.background#05181d
notifications.background#103138
panel.background#05181d
panel.border#103138
panelTitle.activeBorder#ef5346
panelTitle.activeForeground#eaf2f3
peekView.border#ef5346
peekViewEditor.background#05181d
peekViewEditor.matchHighlightBackground#ef534644
peekViewResult.background#05181d
peekViewResult.selectionBackground#103138
peekViewTitle.background#05181d
pickerGroup.border#103138
pickerGroup.foreground#ef5346
progressBar.background#ef5346
quickInput.background#05181d
quickInputList.focusBackground#103138
scrollbarSlider.activeBackground#648b9388
scrollbarSlider.background#648b9344
scrollbarSlider.hoverBackground#648b9366
sideBar.background#05181d
sideBar.foreground#eaf2f3
sideBarSectionHeader.background#05181d
sideBarTitle.foreground#eaf2f3
statusBar.background#05181d
statusBar.border#ef5346
statusBar.debuggingBackground#ef5346
statusBar.debuggingForeground#082228
statusBar.foreground#648b93
statusBar.noFolderBackground#05181d
statusBarItem.remoteBackground#ef5346
statusBarItem.remoteForeground#082228
tab.activeBackground#082228
tab.activeBorderTop#ef5346
tab.activeForeground#eaf2f3
tab.border#05181d
tab.inactiveBackground#05181d
tab.inactiveForeground#648b93
terminal.ansiBlack#103138
terminal.ansiBlue#5cc6e6
terminal.ansiBrightBlack#648b93
terminal.ansiBrightBlue#5cc6e6
terminal.ansiBrightCyan#aee9f0
terminal.ansiBrightGreen#74d6b4
terminal.ansiBrightMagenta#e88fa8
terminal.ansiBrightRed#ef5346
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#f2c879
terminal.ansiCyan#aee9f0
terminal.ansiGreen#74d6b4
terminal.ansiMagenta#e88fa8
terminal.ansiRed#ef5346
terminal.ansiWhite#eaf2f3
terminal.ansiYellow#f2c879
terminal.background#082228
terminal.foreground#eaf2f3
terminalCursor.foreground#ef5346
textLink.activeForeground#5cc6e6
textLink.foreground#ef5346
textPreformat.foreground#74d6b4
titleBar.activeBackground#05181d
titleBar.activeForeground#eaf2f3
titleBar.inactiveBackground#05181d
titleBar.inactiveForeground#648b93

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#648b93	italic
keyword, keyword.control, storage, storage.type, storage.modifier	#ef5346	—
keyword.operator	#eaf2f3	—
string, string.quoted, string.template, punctuation.definition.string	#74d6b4	—
entity.name.function, support.function, meta.function-call, entity.other.attribute-name	#5cc6e6	—
entity.name.type, entity.name.class, support.type, support.class, entity.name.tag	#aee9f0	—
variable.language.this, variable.other.property, support.variable.property, meta.object-literal.key, support.type.property-name	#f47b6f	—
constant.numeric, constant.language, constant.other	#f2c879	—
variable, variable.other.readwrite, variable.parameter	#eaf2f3	—
markup.heading, entity.name.section	#ef5346	bold
markup.bold	—	bold
markup.italic	—	italic
markup.inline.raw, markup.fenced_code	#74d6b4	—
markup.underline.link, string.other.link	#ef5346	—
invalid, invalid.illegal	#ff5c66	—

VS Code preview

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

Cyberpunk Samurai Theme — Cyberpunk Samurai: Trauma Team Holo

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#ff4f6d
activityBar.background#05181d
activityBar.foreground#eaf2f3
activityBar.inactiveForeground#648b93
activityBarBadge.background#ff4f6d
activityBarBadge.foreground#082228
badge.background#ff4f6d
badge.foreground#082228
breadcrumb.focusForeground#eaf2f3
breadcrumb.foreground#648b93
breadcrumbPicker.background#05181d
descriptionForeground#648b93
diffEditor.insertedTextBackground#6ee0b01a
diffEditor.removedTextBackground#ff4f6d1a
dropdown.background#103138
dropdown.foreground#eaf2f3
editor.background#082228
editor.findMatchBackground#ff4f6d55
editor.findMatchHighlightBackground#ff4f6d33
editor.foreground#eaf2f3
editor.lineHighlightBackground#103138
editor.selectionBackground#ff4f6d33
editor.selectionHighlightBackground#ff4f6d22
editor.wordHighlightBackground#6aa8ff22
editorBracketHighlight.foreground1#ff4f6d
editorBracketHighlight.foreground2#6aa8ff
editorBracketHighlight.foreground3#5fe3d0
editorBracketHighlight.foreground4#c8b6ff
editorBracketHighlight.foreground5#ffe08a
editorBracketHighlight.foreground6#ff9e7a
editorBracketHighlight.unexpectedBracket.foreground#ff5c66
editorBracketMatch.background#ff4f6d22
editorBracketMatch.border#ff4f6d
editorCursor.foreground#ff4f6d
editorGroupHeader.noTabsBackground#05181d
editorGroupHeader.tabsBackground#05181d
editorGutter.addedBackground#6ee0b0
editorGutter.deletedBackground#ff4f6d
editorGutter.modifiedBackground#6aa8ff
editorHoverWidget.background#103138
editorIndentGuide.activeBackground1#648b93
editorIndentGuide.background1#103138
editorLineNumber.activeForeground#eaf2f3
editorLineNumber.foreground#648b93
editorSuggestWidget.background#103138
editorSuggestWidget.highlightForeground#ff4f6d
editorSuggestWidget.selectedBackground#082228
editorWhitespace.foreground#103138
editorWidget.background#103138
editorWidget.foreground#eaf2f3
errorForeground#ff5c66
focusBorder#ff4f6d
foreground#eaf2f3
gitDecoration.deletedResourceForeground#ff4f6d
gitDecoration.ignoredResourceForeground#648b93
gitDecoration.modifiedResourceForeground#6aa8ff
gitDecoration.untrackedResourceForeground#6ee0b0
icon.foreground#eaf2f3
input.background#103138
input.border#103138
input.foreground#eaf2f3
input.placeholderForeground#648b93
inputOption.activeBorder#ff4f6d
list.activeSelectionBackground#103138
list.activeSelectionForeground#eaf2f3
list.highlightForeground#ff4f6d
list.hoverBackground#103138aa
list.inactiveSelectionBackground#103138
notificationCenterHeader.background#05181d
notifications.background#103138
panel.background#05181d
panel.border#103138
panelTitle.activeBorder#ff4f6d
panelTitle.activeForeground#eaf2f3
peekView.border#ff4f6d
peekViewEditor.background#05181d
peekViewEditor.matchHighlightBackground#ff4f6d44
peekViewResult.background#05181d
peekViewResult.selectionBackground#103138
peekViewTitle.background#05181d
pickerGroup.border#103138
pickerGroup.foreground#ff4f6d
progressBar.background#ff4f6d
quickInput.background#05181d
quickInputList.focusBackground#103138
scrollbarSlider.activeBackground#648b9388
scrollbarSlider.background#648b9344
scrollbarSlider.hoverBackground#648b9366
sideBar.background#05181d
sideBar.foreground#eaf2f3
sideBarSectionHeader.background#05181d
sideBarTitle.foreground#eaf2f3
statusBar.background#05181d
statusBar.border#ff4f6d
statusBar.debuggingBackground#ff4f6d
statusBar.debuggingForeground#082228
statusBar.foreground#648b93
statusBar.noFolderBackground#05181d
statusBarItem.remoteBackground#ff4f6d
statusBarItem.remoteForeground#082228
tab.activeBackground#082228
tab.activeBorderTop#ff4f6d
tab.activeForeground#eaf2f3
tab.border#05181d
tab.inactiveBackground#05181d
tab.inactiveForeground#648b93
terminal.ansiBlack#103138
terminal.ansiBlue#6aa8ff
terminal.ansiBrightBlack#648b93
terminal.ansiBrightBlue#6aa8ff
terminal.ansiBrightCyan#5fe3d0
terminal.ansiBrightGreen#6ee0b0
terminal.ansiBrightMagenta#c8b6ff
terminal.ansiBrightRed#ff4f6d
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffe08a
terminal.ansiCyan#5fe3d0
terminal.ansiGreen#6ee0b0
terminal.ansiMagenta#c8b6ff
terminal.ansiRed#ff4f6d
terminal.ansiWhite#eaf2f3
terminal.ansiYellow#ffe08a
terminal.background#082228
terminal.foreground#eaf2f3
terminalCursor.foreground#ff4f6d
textLink.activeForeground#6aa8ff
textLink.foreground#ff4f6d
textPreformat.foreground#5fe3d0
titleBar.activeBackground#05181d
titleBar.activeForeground#eaf2f3
titleBar.inactiveBackground#05181d
titleBar.inactiveForeground#648b93

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#648b93	italic
keyword, keyword.control, storage, storage.type, storage.modifier	#ff4f6d	—
keyword.operator	#eaf2f3	—
string, string.quoted, string.template, punctuation.definition.string	#5fe3d0	—
entity.name.function, support.function, meta.function-call, entity.other.attribute-name	#6aa8ff	—
entity.name.type, entity.name.class, support.type, support.class, entity.name.tag	#c8b6ff	—
variable.language.this, variable.other.property, support.variable.property, meta.object-literal.key, support.type.property-name	#ff9e7a	—
constant.numeric, constant.language, constant.other	#ffe08a	—
variable, variable.other.readwrite, variable.parameter	#eaf2f3	—
markup.heading, entity.name.section	#ff4f6d	bold
markup.bold	—	bold
markup.italic	—	italic
markup.inline.raw, markup.fenced_code	#5fe3d0	—
markup.underline.link, string.other.link	#ff4f6d	—
invalid, invalid.illegal	#ff5c66	—