More Themes

Name: More Themes
Author: ISLEGAs

Publisher: ISLEGAsThemes in package: 5

Open in VS Code GitHub

Color themes

VS Code preview

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

More Themes — Coding Night

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#101722
activityBar.foreground#C7D1E0
activityBarBadge.background#3CFF91
activityBarBadge.foreground#0B0F14
button.background#4DA6FF
button.foreground#0B0F14
button.hoverBackground#6BB6FF
diffEditor.insertedTextBackground#3CFF9133
diffEditor.removedTextBackground#FF5C7033
dropdown.background#101722
editor.background#0B0F14
editor.findMatchBackground#4DA6FF66
editor.findMatchHighlightBackground#4DA6FF33
editor.foreground#C7D1E0
editor.inactiveSelectionBackground#16202E80
editor.lineHighlightBackground#121C29
editor.selectionBackground#16202E
editor.wordHighlightBackground#FFD16622
editor.wordHighlightStrongBackground#FFD16644
editorBracketMatch.border#5F6C80
editorCursor.foreground#4DA6FF
editorError.foreground#FF5C70
editorGroup.border#0B0F14
editorGroupHeader.noTabsBackground#0B0F14
editorGroupHeader.tabsBackground#0B0F14
editorGroupHeader.tabsBorder#0B0F14
editorHoverWidget.background#101722
editorIndentGuide.activeBackground1#5F6C80
editorIndentGuide.background1#16202E
editorLineNumber.activeForeground#C7D1E0
editorLineNumber.foreground#5F6C80
editorOverviewRuler.border#0B0F14
editorSuggestWidget.background#101722
editorSuggestWidget.highlightForeground#4DA6FF
editorSuggestWidget.selectedBackground#16202E
editorWarning.foreground#FFD166
editorWhitespace.foreground#16202E
icon.foreground#18c9ff
input.background#16202E
input.foreground#C7D1E0
list.activeSelectionBackground#16202E
list.hoverBackground#16202E
menu.background#101722
menu.foreground#C7D1E0
panel.background#101722
panel.border#0B0F14
quickInput.background#101722
quickInput.foreground#C7D1E0
scrollbarSlider.activeBackground#16202ED0
scrollbarSlider.background#16202E80
scrollbarSlider.hoverBackground#16202EB0
sideBar.background#101722
sideBar.foreground#C7D1E0
sideBarSectionHeader.background#16202E
statusBar.background#101722
statusBar.debuggingBackground#FF5C70
statusBar.debuggingForeground#0B0F14
statusBar.foreground#C7D1E0
tab.activeBackground#0B0F14
tab.activeBorder#3CFF91
tab.activeForeground#C7D1E0
tab.inactiveBackground#101722
tab.inactiveForeground#5F6C80
terminal.background#0B0F14
terminal.foreground#C7D1E0
terminalCursor.foreground#3CFF91
titleBar.activeBackground#0B0F14
titleBar.activeForeground#C7D1E0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#5F6C80	italic
string, constant.other.symbol	#FFD166	—
constant.numeric, constant.language.boolean	#A78BFA	—
keyword, storage.type	#4DA6FF	bold
entity.name.function	#63E6A7	—
entity.name.type.class, support.class	#7DD3FC	—
variable, entity.name.variable	#C7D1E0	—
invalid, invalid.deprecated	#FF5C70	underline
meta.import.python, support.type.python, entity.name.module.python	#7FB3FF	bold

VS Code preview

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

More Themes — Doom Vibes

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#2b1a1a
activityBar.foreground#e0e0e0
activityBarBadge.background#ff4d4d
activityBarBadge.foreground#1a0e0e
button.background#ff4d4d
button.foreground#1a0e0e
button.hoverBackground#ff6666
commandCenter.activeBackground#3b1f1f
commandCenter.activeForeground#ffffff
commandCenter.background#2b1a1a
commandCenter.border#1a0e0e
commandCenter.foreground#e0e0e0
diffEditor.insertedTextBackground#50fa7b33
diffEditor.removedTextBackground#ff1a1a33
dropdown.background#2b1a1a
dropdown.foreground#ffffff
editor.background#1a0e0e
editor.findMatchBackground#ffae4266
editor.findMatchHighlightBackground#ffae4233
editor.foreground#e0e0e0
editor.inactiveSelectionBackground#6e2e2e40
editor.lineHighlightBackground#2b1a1a80
editor.selectionBackground#6e2e2e80
editor.wordHighlightBackground#da70d622
editor.wordHighlightStrongBackground#da70d644
editorBracketMatch.border#da70d6
editorCursor.foreground#ff4d4d
editorError.foreground#ff1a1a
editorGroup.border#1a0e0e
editorGroupHeader.noTabsBackground#1a0e0e
editorGroupHeader.tabsBackground#1a0e0e
editorGroupHeader.tabsBorder#1a0e0e
editorHoverWidget.background#2b1a1a
editorIndentGuide.activeBackground1#ff4d4d
editorIndentGuide.background1#3b3b3b
editorLineNumber.activeForeground#ffffff
editorLineNumber.foreground#6e2e2e
editorSuggestWidget.background#2b1a1a
editorSuggestWidget.highlightForeground#ffae42
editorSuggestWidget.selectedBackground#3b1f1f
editorWarning.foreground#ffae42
editorWhitespace.foreground#3b3b3b
icon.foreground#e0e0e0
input.background#3b1f1f
input.foreground#ffffff
input.placeholderForeground#a0a0a0
inputOption.activeBorder#ff4d4d
list.activeSelectionBackground#4d2a2a
list.activeSelectionForeground#ffffff
list.hoverBackground#3b1f1f
menu.background#2b1a1a
menu.foreground#e0e0e0
menu.selectionBackground#3b1f1f
menu.selectionForeground#ffffff
panel.background#2b1a1a
panel.border#1a0e0e
panelTitle.activeBorder#ff4d4d
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#a0a0a0
quickInput.background#2b1a1a
quickInput.foreground#ffffff
quickInputList.focusBackground#3b1f1f
quickInputList.focusForeground#ffffff
scrollbarSlider.activeBackground#4d2a2ad0
scrollbarSlider.background#4d2a2a80
scrollbarSlider.hoverBackground#4d2a2ab0
sideBar.background#2b1a1a
sideBar.foreground#e0e0e0
sideBarSectionHeader.background#2b1a1a
sideBarSectionHeader.foreground#ffffff
statusBar.background#2b1a1a
statusBar.debuggingBackground#ff1a1a
statusBar.debuggingForeground#1a0e0e
statusBar.foreground#e0e0e0
tab.activeBackground#1a0e0e
tab.activeBorder#ff4d4d
tab.activeForeground#ffffff
tab.inactiveBackground#2b1a1a
tab.inactiveForeground#a0a0a0
terminal.background#1a0e0e
terminal.foreground#e0e0e0
terminalCursor.foreground#ff4d4d
titleBar.activeBackground#1a0e0e
titleBar.activeForeground#e0e0e0
titleBar.inactiveBackground#2b1a1a
titleBar.inactiveForeground#a0a0a0
toolbar.activeBackground#4d2a2a
toolbar.hoverBackground#3b1f1f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6e2e2e	italic
string, constant.other.symbol	#f2d479	—
constant.numeric, constant.language.boolean	#ff884d	—
keyword, storage.type	#ff4d4d	bold
entity.name.function	#da70d6	—
entity.name.type.class, support.class	#ffb86c	—
variable, entity.name.variable	#7ec8e3	—
invalid, invalid.deprecated	#ff1a1a	underline
meta.import.python, support.type.python, entity.name.module.python	#ffae42	bold

VS Code preview

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

More Themes — Fallout Vibes

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#162616
activityBar.foreground#B9FFD9
activityBarBadge.background#D6FF7A
activityBarBadge.foreground#0B140B
breadcrumb.background#102010
breadcrumb.focusForeground#E0FFEF
breadcrumb.foreground#B9FFD9
button.background#D6FF7A
button.foreground#0B140B
button.hoverBackground#B9FFD9
diffEditor.insertedTextBackground#D6FF7A33
diffEditor.removedTextBackground#FF4D6D22
dropdown.background#102010
dropdown.foreground#E0FFEF
editor.background#1A2E1A
editor.findMatchBackground#D6FF7A55
editor.findMatchHighlightBackground#D6FF7A33
editor.findRangeHighlightBackground#D6FF7A22
editor.foreground#B9FFD9
editor.inactiveSelectionBackground#2E5A2E88
editor.lineHighlightBackground#244224
editor.selectionBackground#2E5A2E
editor.wordHighlightBackground#A4FFB833
editor.wordHighlightStrongBackground#A4FFB855
editorBracketMatch.background#6CFFB033
editorBracketMatch.border#D6FF7A
editorCursor.foreground#A4FFB8
editorError.foreground#FF4D6D
editorHoverWidget.background#102010
editorIndentGuide.activeBackground1#6CFFB0
editorIndentGuide.background1#395239
editorInfo.foreground#6CFFB0
editorLineNumber.activeForeground#E0FFEF
editorLineNumber.foreground#4AAE75
editorSuggestWidget.background#102010
editorSuggestWidget.highlightForeground#D6FF7A
editorSuggestWidget.selectedBackground#244224
editorWarning.foreground#FFD166
editorWhitespace.foreground#395239
icon.foreground#B9FFD9
input.background#102010
input.foreground#E0FFEF
input.placeholderForeground#6DAF86
inputOption.activeBorder#D6FF7A
list.activeSelectionBackground#2E5A2E
list.activeSelectionForeground#E0FFEF
list.hoverBackground#244224
menu.background#102010
menu.foreground#B9FFD9
menu.selectionBackground#244224
menu.selectionForeground#E0FFEF
panel.background#1C3A1C
panel.border#102010
panelTitle.activeBorder#D6FF7A
panelTitle.activeForeground#E0FFEF
panelTitle.inactiveForeground#6DAF86
quickInput.background#102010
quickInput.foreground#E0FFEF
quickInputList.focusBackground#244224
quickInputList.focusForeground#E0FFEF
scrollbarSlider.activeBackground#6CFFB077
scrollbarSlider.background#6CFFB033
scrollbarSlider.hoverBackground#6CFFB055
sideBar.background#152315
sideBar.foreground#B9FFD9
sideBarSectionHeader.background#102010
sideBarSectionHeader.foreground#E0FFEF
statusBar.background#102010
statusBar.debuggingBackground#FF4D6D
statusBar.debuggingForeground#0B140B
statusBar.foreground#B9FFD9
tab.activeBackground#102010
tab.activeBorder#D6FF7A
tab.activeForeground#E0FFEF
tab.inactiveBackground#1C2F1C
tab.inactiveForeground#6DAF86
terminal.background#0F1F0F
terminal.foreground#B9FFD9
terminalCursor.foreground#D6FF7A
titleBar.activeBackground#102010
titleBar.activeForeground#E0FFEF
toolbar.hoverBackground#244224

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6DAF86	italic
string, constant.other.symbol	#D6FF7A	—
constant.numeric, constant.language.boolean	#FFD166	—
keyword, storage.type	#6CFFB0	bold
entity.name.function	#6CFFB0	—
entity.name.type.class, support.class	#A4FFB8	—
variable, entity.name.variable	#B9FFD9	—
invalid, invalid.deprecated	#FF4D6D	underline
meta.import.python, support.type.python, entity.name.module.python	#A4FFB8	bold

VS Code preview

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

More Themes — Pink Party

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#21012b
activityBar.foreground#f6b4ff
activityBarBadge.background#af0ccf
activityBarBadge.foreground#fcc3fc
button.background#ff7aed
button.foreground#21012b
button.hoverBackground#ff9df3
diffEditor.insertedTextBackground#ff8fe333
diffEditor.removedTextBackground#fd002e33
dropdown.background#2f0235
editor.background#3a0e31f6
editor.findMatchBackground#ff18ff66
editor.findMatchHighlightBackground#ff18ff33
editor.foreground#dd61ee
editor.inactiveSelectionBackground#280a2b80
editor.lineHighlightBackground#4a1240
editor.selectionBackground#280a2b
editor.wordHighlightBackground#ff8fe322
editor.wordHighlightStrongBackground#ff8fe344
editorBracketMatch.border#fcb2d5
editorCursor.foreground#ff18ff
editorError.foreground#fd002e
editorHoverWidget.background#2f0235
editorIndentGuide.activeBackground1#ff00aa
editorIndentGuide.background1#66007a
editorLineNumber.activeForeground#f6b4ff
editorLineNumber.foreground#e699df
editorOverviewRuler.border#dd68f5
editorSuggestWidget.background#2f0235
editorSuggestWidget.highlightForeground#ff18ff
editorSuggestWidget.selectedBackground#3d0534
editorWarning.foreground#fbff00
editorWhitespace.foreground#7a4a73
icon.foreground#f6b4ff
input.background#2f0235
input.foreground#e8d2fc
list.activeSelectionBackground#3d0534
list.hoverBackground#2b0229
menu.background#2f0235
menu.foreground#e8d2fc
panel.background#580d6bb6
panel.border#8c25b4
quickInput.background#ffa4fa
quickInput.foreground#330026
scrollbarSlider.activeBackground#66007ad0
scrollbarSlider.background#66007a80
scrollbarSlider.hoverBackground#66007ab0
sideBar.background#21012b
sideBar.foreground#ffb2f9
sideBarSectionHeader.background#66007a
statusBar.background#2e1730
statusBar.debuggingBackground#ff00aa
statusBar.debuggingForeground#21012b
statusBar.foreground#e8d2fc
tab.activeBackground#3d0534
tab.activeBorder#ff7aed
tab.activeForeground#ffffff
tab.inactiveBackground#2b0229
tab.inactiveForeground#b58cc1
terminal.background#240f29
terminal.foreground#e9a1d7
terminalCursor.foreground#ff87b9
titleBar.activeBackground#562868
titleBar.activeForeground#f6b4ff
toolbar.hoverBackground#3d0534

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#b58cc1	italic
string, constant.other.symbol	#fdd1f4	—
constant.numeric, constant.language.boolean	#d6a6ff	—
keyword, storage.type	#ff8fe3	bold
entity.name.function	#ff7aed	—
entity.name.type.class, support.class	#f6b4ff	—
variable, entity.name.variable	#e2a4ff	—
invalid, invalid.deprecated	#fd002e	underline
meta.import.python, support.type.python, entity.name.module.python	#ff9df3	bold