Naruto Shinobi Theme

Name: Naruto Shinobi Theme
Author: Kushal Raj G S

Publisher: Kushal Raj G SThemes in package: 25

Believe it! A vibrant VS Code theme inspired by Naruto Uzumaki and the ninja world. Features iconic orange, blue, and dark colors from the beloved anime.

Open in VS Code GitHub

Color themes

VS Code preview

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

Naruto Shinobi Theme — Naruto Kurama Nine-Tails

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#2a1500
activityBar.activeBorder#FFD700
activityBar.background#0f0600
activityBar.border#3a2010
activityBar.foreground#FF6B00
activityBar.inactiveForeground#8a5a30
activityBarBadge.background#DC143C
activityBarBadge.foreground#ffffff
badge.background#DC143C
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#FF6B00
breadcrumb.focusForeground#FFD700
breadcrumb.foreground#aa8860
button.background#FF6B00
button.foreground#000000
button.hoverBackground#FF8C00
button.secondaryBackground#4a3020
button.secondaryForeground#ffffff
button.secondaryHoverBackground#6a4030
debugExceptionWidget.background#2a0000
debugExceptionWidget.border#DC143C
debugToolBar.background#2a1500
debugToolBar.border#FF6B00
diffEditor.border#3a2010
diffEditor.insertedTextBackground#FF6B0020
diffEditor.removedTextBackground#DC143C20
dropdown.background#2a1500
dropdown.border#FF6B00
dropdown.foreground#ffffff
editor.background#1a0a00
editor.findMatchBackground#FFD70080
editor.findMatchHighlightBackground#FFD70050
editor.foreground#fff5e6
editor.inactiveSelectionBackground#FF6B0050
editor.lineHighlightBackground#2a1500
editor.selectionBackground#FF6B0080
editor.selectionHighlightBackground#FF8C0040
editor.wordHighlightBackground#FFA50030
editor.wordHighlightStrongBackground#FFA50050
editorBracketMatch.background#FF8C0050
editorBracketMatch.border#FFA500
editorCursor.foreground#FF6B00
editorError.background#1a000080
editorError.border#DC143C
editorError.foreground#DC143C
editorGroupHeader.tabsBackground#0f0600
editorGroupHeader.tabsBorder#3a2010
editorHint.foreground#FF8C00
editorIndentGuide.activeBackground1#FF6B00
editorIndentGuide.background1#3a2010
editorInfo.foreground#FFA500
editorLineNumber.activeForeground#FFD700
editorLineNumber.foreground#8a5a30
editorSuggestWidget.background#2a1500
editorSuggestWidget.border#FF6B00
editorSuggestWidget.foreground#fff5e6
editorSuggestWidget.highlightForeground#FFD700
editorSuggestWidget.selectedBackground#FF6B0050
editorWarning.foreground#FFD700
editorWhitespace.foreground#3a2010
editorWidget.background#2a1500
editorWidget.border#FF6B00
editorWidget.foreground#fff5e6
focusBorder#FFD700
gitDecoration.conflictingResourceForeground#ff0000
gitDecoration.deletedResourceForeground#DC143C
gitDecoration.ignoredResourceForeground#6a4030
gitDecoration.modifiedResourceForeground#FF8C00
gitDecoration.untrackedResourceForeground#FFD700
input.background#2a1500
input.border#FF6B00
input.foreground#ffffff
input.placeholderForeground#8a5a30
inputOption.activeBorder#FFD700
inputValidation.errorBackground#2a0000
inputValidation.errorBorder#DC143C
inputValidation.warningBackground#3a2a00
inputValidation.warningBorder#FFD700
list.activeSelectionBackground#FF6B0070
list.activeSelectionForeground#ffffff
list.errorForeground#ff8888
list.focusBackground#FF6B0070
list.focusForeground#ffffff
list.highlightForeground#FFD700
list.hoverBackground#3a2010
list.hoverForeground#ffffff
list.inactiveSelectionBackground#4a3020
list.inactiveSelectionForeground#ffffff
list.warningForeground#FFD700
merge.border#FFD700
merge.currentContentBackground#FF6B0030
merge.currentHeaderBackground#FF6B0070
merge.incomingContentBackground#DC143C30
merge.incomingHeaderBackground#DC143C70
minimap.errorHighlight#DC143C
minimap.findMatchHighlight#FFD70080
minimap.selectionHighlight#FF6B0080
minimap.warningHighlight#FFD700
minimapGutter.addedBackground#FF8C00
minimapGutter.deletedBackground#DC143C
minimapGutter.modifiedBackground#FFA500
notificationCenter.border#3a2010
notificationCenterHeader.background#2a1500
notificationLink.foreground#FFD700
notifications.background#2a1500
notifications.border#FF6B00
notifications.foreground#ffffff
panel.background#1a0a00
panel.border#3a2010
panelTitle.activeBorder#FF6B00
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#aa8860
peekView.border#FF6B00
peekViewEditor.background#2a1500
peekViewEditor.matchHighlightBackground#FF8C0050
peekViewResult.background#150a00
peekViewResult.matchHighlightBackground#FF8C0050
peekViewResult.selectionBackground#FF6B0070
peekViewTitle.background#2a1500
peekViewTitleDescription.foreground#aa8860
peekViewTitleLabel.foreground#FFD700
progressBar.background#FF6B00
scrollbarSlider.activeBackground#FF8C00A0
scrollbarSlider.background#FF6B0050
scrollbarSlider.hoverBackground#FF6B0070
sideBar.background#150a00
sideBar.border#3a2010
sideBar.foreground#e8d4b8
sideBarSectionHeader.background#2a1500
sideBarSectionHeader.border#3a2010
sideBarSectionHeader.foreground#FF8C00
sideBarTitle.foreground#FFD700
statusBar.background#FF6B00
statusBar.border#3a2010
statusBar.debuggingBackground#DC143C
statusBar.debuggingForeground#ffffff
statusBar.foreground#000000
statusBar.noFolderBackground#3a2010
statusBarItem.errorBackground#DC143C
statusBarItem.errorForeground#ffffff
statusBarItem.prominentBackground#FFD700
statusBarItem.prominentHoverBackground#FFA500
statusBarItem.warningBackground#FFD700
statusBarItem.warningForeground#000000
tab.activeBackground#2a1500
tab.activeBorder#0f0600
tab.activeBorderTop#FF6B00
tab.activeForeground#ffffff
tab.border#1a1a1a
tab.hoverBackground#2a1500
tab.hoverBorder#FFA500
tab.hoverForeground#ffffff
tab.inactiveBackground#150a00
tab.inactiveForeground#aa8860
terminal.ansiBlack#1a1a1a
terminal.ansiBlue#FF8C00
terminal.ansiBrightBlack#4a3020
terminal.ansiBrightBlue#ffaa44
terminal.ansiBrightCyan#ffcc66
terminal.ansiBrightGreen#ccaa88
terminal.ansiBrightMagenta#ff8888
terminal.ansiBrightRed#ff4466
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffea00
terminal.ansiCyan#FFA500
terminal.ansiGreen#aa8860
terminal.ansiMagenta#ff6666
terminal.ansiRed#DC143C
terminal.ansiWhite#fff5e6
terminal.ansiYellow#FFD700
terminal.background#1a0a00
terminal.foreground#fff5e6
terminalCursor.foreground#FFD700
titleBar.activeBackground#0f0600
titleBar.activeForeground#FFD700
titleBar.border#3a2010
titleBar.inactiveBackground#0a0400
titleBar.inactiveForeground#8a5a30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6a4030	italic
keyword, storage.type, storage.modifier	#DC143C	bold
keyword.control, keyword.operator	#ff4466	bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as	#FF8C00
string, string.quoted	#FFA500	—
string.template, string.quoted.template	#ffaa44	—
constant.character.escape	#FFD700	bold
string.regexp	#ffcc66	—
constant.numeric, constant.language	#FFD700	—
constant.language.boolean	#ff8888	bold
variable, variable.other	#FF6B00	bold
variable.parameter	#ffaa66	italic
variable.other.property, support.variable.property	#e8d4b8	—
entity.name.function, support.function	#FFD700	bold
meta.function-call	#ffea88	—
entity.name.type, entity.name.class, support.class	#DC143C
entity.other.inherited-class	#ff6666	italic
entity.name.tag	#FF6B00	bold
entity.other.attribute-name	#FFA500	italic
entity.name.tag.css, entity.other.attribute-name.class.css	#FF6B00	—
support.type.property-name.css	#FFA500	—
support.constant.property-value.css	#FFD700	—
support.type, support.class	#ffaa66	—
support.constant	#ff8888	—
support.type.property-name.json	#FF8C00	—
keyword.operator	#DC143C	—
punctuation	#cc9966	—
punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.array	#aa8860	—
meta.brace, punctuation.section	#e8d4b8	—
invalid	#ffffff	—
invalid.deprecated	#6a4030	strikethrough
markup.heading	#FF6B00	bold
markup.bold	#DC143C	bold
markup.italic	#FFA500	italic
markup.inline.raw	#FFD700	—
markup.underline.link	#ffaa44	underline
markup.list	#FF8C00	—
markup.inserted	#FFD700	—
markup.deleted	#DC143C	—
markup.changed	#FFA500	—
variable.language.this	#ff6666	italic
entity.name.type.ts, entity.name.type.tsx	#ff8888	—
meta.decorator, punctuation.decorator	#FF6B00	bold
variable.language.special.self.python	#DC143C	italic
entity.name.function.decorator.python	#FF8C00	—
keyword.control.conditional, keyword.control.loop	#ff4466	bold
entity.name.exception, support.class.exception	#DC143C	bold

VS Code preview

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

Naruto Shinobi Theme — Naruto Kushina Uzumaki - Red Hot-Blooded Habanero

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#2a0a0a
activityBar.activeBorder#FFD700
activityBar.background#0a0000
activityBar.border#3a1a1a
activityBar.foreground#FFD700
activityBar.inactiveForeground#6a3a3a
activityBarBadge.background#FF4500
activityBarBadge.foreground#ffffff
badge.background#FF4500
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#FF6347
breadcrumb.focusForeground#DC143C
breadcrumb.foreground#9a7a7a
button.background#DC143C
button.foreground#ffffff
button.hoverBackground#FF6347
button.secondaryBackground#3a1a1a
button.secondaryForeground#ffffff
button.secondaryHoverBackground#4a2a2a
debugExceptionWidget.background#3a0000
debugExceptionWidget.border#8B0000
debugToolBar.background#2a0a0a
debugToolBar.border#DC143C
diffEditor.border#3a1a1a
diffEditor.insertedTextBackground#DC143C30
diffEditor.removedTextBackground#8B000030
dropdown.background#2a0a0a
dropdown.border#DC143C
dropdown.foreground#ffffff
editor.background#1a0505
editor.findMatchBackground#FFD70080
editor.findMatchHighlightBackground#FFD70050
editor.foreground#fff0e6
editor.inactiveSelectionBackground#DC143C50
editor.lineHighlightBackground#2a0a0a
editor.selectionBackground#DC143C80
editor.selectionHighlightBackground#FF634740
editor.wordHighlightBackground#FF450030
editor.wordHighlightStrongBackground#FF450050
editorBracketMatch.background#DC143C50
editorBracketMatch.border#FF6347
editorCursor.foreground#FF6347
editorError.background#8B000080
editorError.border#B22222
editorError.foreground#8B0000
editorGroupHeader.tabsBackground#0a0000
editorGroupHeader.tabsBorder#3a1a1a
editorHint.foreground#FFA500
editorIndentGuide.activeBackground1#DC143C
editorIndentGuide.background1#3a1a1a
editorInfo.foreground#FFD700
editorLineNumber.activeForeground#FF6347
editorLineNumber.foreground#6a3a3a
editorSuggestWidget.background#2a0a0a
editorSuggestWidget.border#DC143C
editorSuggestWidget.foreground#fff0e6
editorSuggestWidget.highlightForeground#FF6347
editorSuggestWidget.selectedBackground#DC143C60
editorWarning.foreground#FF8C00
editorWhitespace.foreground#3a1a1a
editorWidget.background#2a0a0a
editorWidget.border#DC143C
editorWidget.foreground#fff0e6
focusBorder#FF6347
gitDecoration.conflictingResourceForeground#FF4500
gitDecoration.deletedResourceForeground#8B0000
gitDecoration.ignoredResourceForeground#6a3a3a
gitDecoration.modifiedResourceForeground#DC143C
gitDecoration.untrackedResourceForeground#FF8C00
input.background#2a0a0a
input.border#DC143C
input.foreground#ffffff
input.placeholderForeground#6a3a3a
inputOption.activeBorder#FF6347
inputValidation.errorBackground#3a0000
inputValidation.errorBorder#8B0000
inputValidation.warningBackground#3a1a00
inputValidation.warningBorder#FF8C00
list.activeSelectionBackground#DC143C80
list.activeSelectionForeground#ffffff
list.errorForeground#ff8888
list.focusBackground#DC143C80
list.focusForeground#ffffff
list.highlightForeground#FF6347
list.hoverBackground#2a0a0a
list.hoverForeground#ffffff
list.inactiveSelectionBackground#3a1a1a
list.inactiveSelectionForeground#ffffff
list.warningForeground#FF8C00
merge.border#FF6347
merge.currentContentBackground#DC143C30
merge.currentHeaderBackground#DC143C70
merge.incomingContentBackground#FF8C0030
merge.incomingHeaderBackground#FF8C0070
minimap.errorHighlight#8B0000
minimap.findMatchHighlight#FFD70080
minimap.selectionHighlight#DC143C80
minimap.warningHighlight#FF8C00
minimapGutter.addedBackground#DC143C
minimapGutter.deletedBackground#8B0000
minimapGutter.modifiedBackground#FF6347
notificationCenter.border#3a1a1a
notificationCenterHeader.background#2a0a0a
notificationLink.foreground#FFA500
notifications.background#2a0a0a
notifications.border#DC143C
notifications.foreground#ffffff
panel.background#1a0505
panel.border#3a1a1a
panelTitle.activeBorder#DC143C
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#9a7a7a
peekView.border#DC143C
peekViewEditor.background#2a0a0a
peekViewEditor.matchHighlightBackground#DC143C50
peekViewResult.background#1a0505
peekViewResult.matchHighlightBackground#DC143C50
peekViewResult.selectionBackground#DC143C80
peekViewTitle.background#2a0a0a
peekViewTitleDescription.foreground#9a7a7a
peekViewTitleLabel.foreground#FF6347
progressBar.background#DC143C
scrollbarSlider.activeBackground#FF6347A0
scrollbarSlider.background#DC143C60
scrollbarSlider.hoverBackground#DC143C80
sideBar.background#1a0505
sideBar.border#3a1a1a
sideBar.foreground#f5e0d0
sideBarSectionHeader.background#2a0a0a
sideBarSectionHeader.border#3a1a1a
sideBarSectionHeader.foreground#DC143C
sideBarTitle.foreground#FF6347
statusBar.background#DC143C
statusBar.border#3a1a1a
statusBar.debuggingBackground#FF4500
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#3a1a1a
statusBarItem.errorBackground#8B0000
statusBarItem.errorForeground#ffffff
statusBarItem.prominentBackground#FF6347
statusBarItem.prominentHoverBackground#FF4500
statusBarItem.warningBackground#FF8C00
statusBarItem.warningForeground#ffffff
tab.activeBackground#2a0a0a
tab.activeBorder#0a0000
tab.activeBorderTop#FF6347
tab.activeForeground#ffffff
tab.border#1a0505
tab.hoverBackground#2a0a0a
tab.hoverBorder#DC143C
tab.hoverForeground#ffffff
tab.inactiveBackground#1a0505
tab.inactiveForeground#9a7a7a
terminal.ansiBlack#1a0a0a
terminal.ansiBlue#FF8C00
terminal.ansiBrightBlack#5a3a3a
terminal.ansiBrightBlue#FFA500
terminal.ansiBrightCyan#FF4500
terminal.ansiBrightGreen#FFEA00
terminal.ansiBrightMagenta#FF8C00
terminal.ansiBrightRed#FF6347
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#FFD700
terminal.ansiCyan#FF4500
terminal.ansiGreen#FFD700
terminal.ansiMagenta#FF6347
terminal.ansiRed#DC143C
terminal.ansiWhite#fff0e6
terminal.ansiYellow#FFA500
terminal.background#1a0505
terminal.foreground#fff0e6
terminalCursor.foreground#FF6347
titleBar.activeBackground#0a0000
titleBar.activeForeground#DC143C
titleBar.border#3a1a1a
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#6a3a3a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6a3a3a	italic
keyword, storage.type, storage.modifier	#FF4500	bold
keyword.control, keyword.operator	#FF6347	bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as	#FFA500
string, string.quoted	#FF8C00	—
string.template, string.quoted.template	#FFA500	—
constant.character.escape	#FFD700	bold
string.regexp	#FF6347	—
constant.numeric, constant.language	#FFEA00	bold
constant.language.boolean	#FF4500	bold
variable, variable.other	#DC143C	bold
variable.parameter	#FF6347	italic
variable.other.property, support.variable.property	#FF8C69	—
entity.name.function, support.function	#FFD700	bold
meta.function-call	#FFA500	—
entity.name.type, entity.name.class, support.class	#FF8C00
entity.other.inherited-class	#FFA500	italic
entity.name.tag	#DC143C	bold
entity.other.attribute-name	#FF6347	italic
entity.name.tag.css, entity.other.attribute-name.class.css	#DC143C	—
support.type.property-name.css	#FF6347	—
support.constant.property-value.css	#FF8C00	—
support.type, support.class	#FFA500	—
support.constant	#D3D3D3	—
support.type.property-name.json	#DC143C	—
keyword.operator	#FF6347	—
punctuation	#d0b0a0	—
punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.array	#b09080	—
meta.brace, punctuation.section	#FFD700	—
invalid	#ffffff	—
invalid.deprecated	#6a3a3a	strikethrough
markup.heading	#DC143C	bold
markup.bold	#FF4500	bold
markup.italic	#FF8C00	italic
markup.inline.raw	#FFD700	—
markup.underline.link	#FFA500	underline
markup.list	#FF6347	—
markup.inserted	#DC143C	—
markup.deleted	#8B0000	—
markup.changed	#FF6347	—
variable.language.this	#DC143C	italic
entity.name.type.ts, entity.name.type.tsx	#FF8C00	—
meta.decorator, punctuation.decorator	#FFD700	bold
variable.language.special.self.python	#DC143C	italic
entity.name.function.decorator.python	#FFD700	—
keyword.control.conditional, keyword.control.loop	#FF4500	bold
entity.name.exception, support.class.exception	#8B0000	bold
storage.type.annotation, punctuation.definition.annotation	#FFA500	italic
entity.name.namespace	#FF8C00	—
entity.name.tag	#DC143C	—

VS Code preview

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

Naruto Shinobi Theme — Naruto Madara Uchiha - 4th Great Ninja War

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#11172a
activityBar.activeBorder#DC143C
activityBar.background#070a12
activityBar.border#1a2031
activityBar.foreground#DC143C
activityBar.inactiveForeground#5f6f89
activityBarBadge.background#8B0000
activityBarBadge.foreground#ffffff
badge.background#DC143C
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#A9B7FF
breadcrumb.focusForeground#DC143C
breadcrumb.foreground#8b96ad
button.background#8B0000
button.foreground#ffffff
button.hoverBackground#b1112e
button.secondaryBackground#243045
button.secondaryForeground#e6e8ef
button.secondaryHoverBackground#30405f
diffEditor.border#1a2031
diffEditor.insertedTextBackground#7aa27a30
diffEditor.removedTextBackground#DC143C30
dropdown.background#141a2b
dropdown.border#30405f
dropdown.foreground#ffffff
editor.background#0b0d14
editor.findMatchBackground#DC143C80
editor.findMatchHighlightBackground#6a0dad60
editor.foreground#e6e8ef
editor.inactiveSelectionBackground#8B000050
editor.lineHighlightBackground#151b2d
editor.selectionBackground#8B000080
editor.selectionHighlightBackground#6a0dad40
editor.wordHighlightBackground#2f4f7f40
editor.wordHighlightStrongBackground#8B000050
editorBracketMatch.background#2f4f7f40
editorBracketMatch.border#4f79ff
editorCursor.foreground#DC143C
editorError.foreground#ff5a5a
editorGroupHeader.tabsBackground#070a12
editorGroupHeader.tabsBorder#1a2031
editorHint.foreground#8a7ed8
editorIndentGuide.activeBackground1#DC143C
editorIndentGuide.background1#243045
editorInfo.foreground#4f79ff
editorLineNumber.activeForeground#DC143C
editorLineNumber.foreground#5f6f89
editorWarning.foreground#f4c430
editorWhitespace.foreground#334055
focusBorder#DC143C
gitDecoration.conflictingResourceForeground#f4c430
gitDecoration.deletedResourceForeground#DC143C
gitDecoration.ignoredResourceForeground#5f6f89
gitDecoration.modifiedResourceForeground#4f79ff
gitDecoration.untrackedResourceForeground#7aa27a
input.background#141a2b
input.border#30405f
input.foreground#ffffff
input.placeholderForeground#647493
inputOption.activeBorder#DC143C
list.activeSelectionBackground#8B000080
list.activeSelectionForeground#ffffff
list.highlightForeground#DC143C
list.hoverBackground#151b2d
list.hoverForeground#ffffff
list.inactiveSelectionBackground#1d2436
list.inactiveSelectionForeground#d7dbea
minimap.errorHighlight#ff5a5a
minimap.findMatchHighlight#8B000080
minimap.selectionHighlight#2f4f7f80
minimap.warningHighlight#f4c430
minimapGutter.addedBackground#7aa27a
minimapGutter.deletedBackground#DC143C
minimapGutter.modifiedBackground#4f79ff
notificationCenter.border#1a2031
notificationCenterHeader.background#11172a
notificationLink.foreground#A9B7FF
notifications.background#11172a
notifications.border#30405f
notifications.foreground#e6e8ef
panel.background#0b0d14
panel.border#1a2031
panelTitle.activeBorder#DC143C
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#8b96ad
peekView.border#DC143C
peekViewEditor.background#141a2b
peekViewEditor.matchHighlightBackground#8B000050
peekViewResult.background#0d101a
peekViewResult.matchHighlightBackground#8B000050
peekViewResult.selectionBackground#8B000080
peekViewTitle.background#141a2b
peekViewTitleDescription.foreground#8b96ad
peekViewTitleLabel.foreground#DC143C
scrollbarSlider.activeBackground#DC143CA0
scrollbarSlider.background#8B000060
scrollbarSlider.hoverBackground#8B000090
sideBar.background#0d101a
sideBar.border#1a2031
sideBar.foreground#d7dbea
sideBarSectionHeader.background#11172a
sideBarSectionHeader.border#1a2031
sideBarSectionHeader.foreground#A9B7FF
sideBarTitle.foreground#DC143C
statusBar.background#8B0000
statusBar.border#2a1220
statusBar.debuggingBackground#4f79ff
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBarItem.prominentBackground#DC143C
statusBarItem.prominentHoverBackground#ff335f
tab.activeBackground#11172a
tab.activeBorderTop#DC143C
tab.activeForeground#ffffff
tab.border#11172a
tab.hoverBackground#151b2d
tab.hoverBorder#4f79ff
tab.hoverForeground#ffffff
tab.inactiveBackground#0d101a
tab.inactiveForeground#8b96ad
terminal.ansiBlack#12141c
terminal.ansiBlue#4f79ff
terminal.ansiBrightBlack#5f6f89
terminal.ansiBrightBlue#7ca0ff
terminal.ansiBrightCyan#a8d0ff
terminal.ansiBrightGreen#9bcc9b
terminal.ansiBrightMagenta#b2a5ff
terminal.ansiBrightRed#ff5a5a
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffdc6e
terminal.ansiCyan#7db4ff
terminal.ansiGreen#7aa27a
terminal.ansiMagenta#8a7ed8
terminal.ansiRed#DC143C
terminal.ansiWhite#e6e8ef
terminal.ansiYellow#f4c430
terminal.background#0b0d14
terminal.foreground#e6e8ef
terminalCursor.foreground#DC143C
titleBar.activeBackground#070a12
titleBar.activeForeground#DC143C
titleBar.border#1a2031
titleBar.inactiveBackground#070a12
titleBar.inactiveForeground#5f6f89

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6e7690	italic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator	#DC143C	bold
string, string.quoted, string.template	#A9B7FF	—
constant.numeric, constant.language, support.constant	#f4c430	bold
variable, variable.other, variable.other.property	#e6e8ef	—
variable.parameter, variable.language.this	#b9c3dc	italic
entity.name.function, support.function, meta.function-call	#4f79ff	bold
entity.name.type, entity.name.class, support.class, entity.name.namespace	#8a7ed8	—
entity.name.tag, entity.other.attribute-name	#DC143C	—
punctuation, punctuation.section, meta.brace	#a3aec7	—
invalid, invalid.deprecated	#ffffff	—
markup.heading, markup.bold	#DC143C	bold
markup.italic, markup.inline.raw, markup.underline.link, markup.list	#A9B7FF	—
markup.inserted, markup.deleted, markup.changed	#f4c430	—
meta.decorator, punctuation.decorator, storage.type.annotation, punctuation.definition.annotation	#8a7ed8	italic

VS Code preview

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

Naruto Shinobi Theme — Naruto Madara Uchiha - Ten Tails Jinchuriki

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#121221
activityBar.activeBorder#f2f2f2
activityBar.background#06060a
activityBar.border#181924
activityBar.foreground#f2f2f2
activityBar.inactiveForeground#6d6f86
activityBarBadge.background#8a7ed8
activityBarBadge.foreground#ffffff
badge.background#8a7ed8
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#cfd1ff
breadcrumb.focusForeground#f2f2f2
breadcrumb.foreground#8c8ea5
button.background#8a7ed8
button.foreground#ffffff
button.hoverBackground#7667d2
button.secondaryBackground#2b2c3d
button.secondaryForeground#e9e8f5
button.secondaryHoverBackground#37384a
diffEditor.border#181924
diffEditor.insertedTextBackground#9bb38d30
diffEditor.removedTextBackground#ff7a9a30
dropdown.background#161726
dropdown.border#37384a
dropdown.foreground#ffffff
editor.background#09090c
editor.findMatchBackground#cfd1ff90
editor.findMatchHighlightBackground#8a7ed860
editor.foreground#f0effa
editor.inactiveSelectionBackground#f2f2f240
editor.lineHighlightBackground#171526
editor.selectionBackground#f2f2f280
editor.selectionHighlightBackground#8a7ed840
editor.wordHighlightBackground#7f7f8a40
editor.wordHighlightStrongBackground#8a7ed860
editorBracketMatch.background#8a7ed840
editorBracketMatch.border#cfd1ff
editorCursor.foreground#f2f2f2
editorError.foreground#ff7a9a
editorGroupHeader.tabsBackground#06060a
editorGroupHeader.tabsBorder#181924
editorHint.foreground#8a7ed8
editorIndentGuide.activeBackground1#f2f2f2
editorIndentGuide.background1#2b2c3d
editorInfo.foreground#cfd1ff
editorLineNumber.activeForeground#d8d9e8
editorLineNumber.foreground#6d6f86
editorWarning.foreground#f4d58d
editorWhitespace.foreground#37384a
focusBorder#f2f2f2
gitDecoration.conflictingResourceForeground#f4d58d
gitDecoration.deletedResourceForeground#ff7a9a
gitDecoration.ignoredResourceForeground#6d6f86
gitDecoration.modifiedResourceForeground#cfd1ff
gitDecoration.untrackedResourceForeground#9bb38d
input.background#161726
input.border#37384a
input.foreground#ffffff
input.placeholderForeground#767891
inputOption.activeBorder#f2f2f2
list.activeSelectionBackground#dcdce380
list.activeSelectionForeground#121221
list.highlightForeground#f2f2f2
list.hoverBackground#171526
list.hoverForeground#ffffff
list.inactiveSelectionBackground#1b1c2a
list.inactiveSelectionForeground#e4e2f0
minimap.errorHighlight#ff7a9a
minimap.findMatchHighlight#f2f2f290
minimap.selectionHighlight#8a7ed880
minimap.warningHighlight#f4d58d
minimapGutter.addedBackground#9bb38d
minimapGutter.deletedBackground#ff7a9a
minimapGutter.modifiedBackground#cfd1ff
notificationCenter.border#181924
notificationCenterHeader.background#121221
notificationLink.foreground#cfd1ff
notifications.background#121221
notifications.border#37384a
notifications.foreground#f0effa
panel.background#09090c
panel.border#181924
panelTitle.activeBorder#f2f2f2
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#8c8ea5
peekView.border#f2f2f2
peekViewEditor.background#161726
peekViewEditor.matchHighlightBackground#f2f2f250
peekViewResult.background#0c0c12
peekViewResult.matchHighlightBackground#cfd1ff50
peekViewResult.selectionBackground#f2f2f280
peekViewTitle.background#161726
peekViewTitleDescription.foreground#8c8ea5
peekViewTitleLabel.foreground#f2f2f2
scrollbarSlider.activeBackground#cfd1ff90
scrollbarSlider.background#f2f2f250
scrollbarSlider.hoverBackground#f2f2f280
sideBar.background#0c0c12
sideBar.border#181924
sideBar.foreground#e4e2f0
sideBarSectionHeader.background#121221
sideBarSectionHeader.border#181924
sideBarSectionHeader.foreground#cfd1ff
sideBarTitle.foreground#f2f2f2
statusBar.background#f2f2f2
statusBar.border#d7d7df
statusBar.debuggingBackground#8a7ed8
statusBar.debuggingForeground#ffffff
statusBar.foreground#121221
statusBarItem.prominentBackground#cfd1ff
statusBarItem.prominentHoverBackground#b3b6ff
tab.activeBackground#121221
tab.activeBorderTop#f2f2f2
tab.activeForeground#ffffff
tab.border#121221
tab.hoverBackground#171526
tab.hoverBorder#8a7ed8
tab.hoverForeground#ffffff
tab.inactiveBackground#0c0c12
tab.inactiveForeground#8c8ea5
terminal.ansiBlack#14141d
terminal.ansiBlue#cfd1ff
terminal.ansiBrightBlack#6d6f86
terminal.ansiBrightBlue#e0e2ff
terminal.ansiBrightCyan#c5ddff
terminal.ansiBrightGreen#bdd1b3
terminal.ansiBrightMagenta#b8aef6
terminal.ansiBrightRed#ff9ab1
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffe0aa
terminal.ansiCyan#9fc8ff
terminal.ansiGreen#9bb38d
terminal.ansiMagenta#8a7ed8
terminal.ansiRed#ff7a9a
terminal.ansiWhite#f0effa
terminal.ansiYellow#f4d58d
terminal.background#09090c
terminal.foreground#f0effa
terminalCursor.foreground#f2f2f2
titleBar.activeBackground#06060a
titleBar.activeForeground#f2f2f2
titleBar.border#181924
titleBar.inactiveBackground#06060a
titleBar.inactiveForeground#6d6f86

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7b7d95	italic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator	#f2f2f2	bold
string, string.quoted, string.template	#d9d5ff	—
constant.numeric, constant.language, support.constant	#f4d58d	bold
variable, variable.other, variable.other.property	#f0effa	—
variable.parameter, variable.language.this	#c9cad9	italic
entity.name.function, support.function, meta.function-call	#cfd1ff	bold
entity.name.type, entity.name.class, support.class, entity.name.namespace	#8a7ed8	—
entity.name.tag, entity.other.attribute-name	#f2f2f2	—
punctuation, punctuation.section, meta.brace	#adb0c4	—
invalid, invalid.deprecated	#ffffff	—
markup.heading, markup.bold	#f2f2f2	bold
markup.italic, markup.inline.raw, markup.underline.link, markup.list	#cfd1ff	—
markup.inserted, markup.deleted, markup.changed	#f4d58d	—
meta.decorator, punctuation.decorator, storage.type.annotation, punctuation.definition.annotation	#8a7ed8	italic