Chroma Library

Name: Chroma Library
Author: Code with Bismillah

Publisher: Code with BismillahThemes in package: 11

Advanced theming extension with customizable neon-futuristic color palettes, gradient backgrounds, and specialized themes for developers

Open in VS Code GitHub

Color themes

VS Code preview

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

Chroma Library — Quantum Green

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#051005
activityBar.border#1a2e1a
activityBar.foreground#80ff80
activityBar.inactiveForeground#408040
activityBarBadge.background#00ff00
activityBarBadge.foreground#000000
button.background#00ff00
button.foreground#000000
button.hoverBackground#40ff40
descriptionForeground#c0ffc0
dropdown.background#1a2e1a
dropdown.border#336633
dropdown.foreground#e0ffe0
editor.background#0a1a0a
editor.findMatchBackground#00ff0060
editor.findMatchHighlightBackground#00ff0030
editor.foreground#e0ffe0
editor.lineHighlightBackground#1a2e1a
editor.selectionBackground#00ff0040
editor.selectionHighlightBackground#00ff0020
editorCursor.foreground#39ff14
editorGroupHeader.tabsBackground#0f200f
editorGroupHeader.tabsBorder#336633
editorIndentGuide.activeBackground#669966
editorIndentGuide.background#336633
editorLineNumber.activeForeground#39ff14
editorLineNumber.foreground#669966
editorWhitespace.foreground#336633
errorForeground#ff4040
focusBorder#00ff00
foreground#e0ffe0
icon.foreground#80ff80
input.background#1a2e1a
input.border#336633
input.foreground#e0ffe0
input.placeholderForeground#669966
list.activeSelectionBackground#00ff0040
list.activeSelectionForeground#ffffff
list.hoverBackground#1a2e1a
list.hoverForeground#ffffff
list.inactiveSelectionBackground#336633
list.inactiveSelectionForeground#e0ffe0
menu.background#1a2e1a
menu.foreground#e0ffe0
menu.selectionBackground#00ff0040
menu.selectionForeground#ffffff
menu.separatorBackground#336633
menubar.selectionBackground#00ff0040
menubar.selectionForeground#ffffff
panel.background#0f200f
panel.border#336633
panelTitle.activeBorder#00ff00
panelTitle.activeForeground#00ff00
panelTitle.inactiveForeground#80ff80
selection.background#00ff0040
sideBar.background#0f200f
sideBar.border#336633
sideBar.foreground#c0ffc0
sideBarSectionHeader.background#1a2e1a
sideBarSectionHeader.foreground#39ff14
sideBarTitle.foreground#00ff00
statusBar.background#1a2e1a
statusBar.border#336633
statusBar.debuggingBackground#00c000
statusBar.debuggingForeground#ffffff
statusBar.foreground#80ff80
statusBar.noFolderBackground#0a1a0a
tab.activeBackground#1a2e1a
tab.activeBorder#00ff00
tab.activeForeground#00ff00
tab.border#336633
tab.inactiveBackground#0f200f
tab.inactiveForeground#80ff80
terminal.ansiBlack#000000
terminal.ansiBlue#4040ff
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#6060ff
terminal.ansiBrightCyan#60ffff
terminal.ansiBrightGreen#40ff40
terminal.ansiBrightMagenta#ff60ff
terminal.ansiBrightRed#ff6060
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffff60
terminal.ansiCyan#40ffff
terminal.ansiGreen#00ff00
terminal.ansiMagenta#ff40ff
terminal.ansiRed#ff4040
terminal.ansiWhite#ffffff
terminal.ansiYellow#ffff40
terminal.background#0a1a0a
terminal.foreground#e0ffe0
titleBar.activeBackground#0a1a0a
titleBar.activeForeground#e0ffe0
titleBar.border#1a2e1a
titleBar.inactiveBackground#051005
titleBar.inactiveForeground#80ff80
tree.indentGuidesStroke#336633

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#669966	italic
keyword, storage.type, storage.modifier	#00ff00	bold
string, string.quoted	#7fff00	—
constant.numeric, constant.language	#adff2f	—
entity.name.function, support.function	#00ff7f	bold
variable, variable.other	#98fb98	—
entity.name.type, support.type, storage.type	#32cd32	bold
entity.name.class, support.class	#228b22	bold
entity.name.interface	#90ee90	bold
entity.name.enum	#9acd32	bold
keyword.operator	#7fff00	—
punctuation	#f0fff0	—
meta.brace, punctuation.section	#00ff7f	—
entity.name.tag	#32cd32	bold
entity.other.attribute-name	#90ee90	—
string.quoted.double.html, string.quoted.single.html	#adff2f	—
entity.name.section	#228b22	bold
support.constant	#9acd32	—
storage	#7fff00	—

VS Code preview

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

Chroma Library — Solar Flare

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#1a0a00
activityBar.activeBorder#ff4500
activityBar.background#050200
activityBar.border#ff8000
activityBar.foreground#ff4500
activityBar.inactiveForeground#664422
activityBarBadge.background#ff8000
activityBarBadge.foreground#000000
button.background#ff8000
button.border#ff8000
button.foreground#000000
button.hoverBackground#ffa040
dropdown.background#1a0a00
dropdown.border#ff8000
dropdown.foreground#ffaa40
editor.background#1a0a00
editor.findMatchBackground#ff800080
editor.findMatchHighlightBackground#ff800040
editor.foreground#ffaa40
editor.lineHighlightBackground#2d1400
editor.selectionBackground#ff800060
editor.selectionHighlightBackground#ff800030
editorCursor.foreground#ff4500
editorGroupHeader.tabsBackground#0d0500
editorGroupHeader.tabsBorder#ff8000
editorGutter.background#0d0500
editorIndentGuide.activeBackground#ff4500
editorIndentGuide.background#664422
editorLineNumber.activeForeground#ff4500
editorLineNumber.foreground#996633
editorWhitespace.foreground#664422
errorForeground#ff4040
focusBorder#ff8000
foreground#ffaa40
icon.foreground#ff4500
input.background#1a0a00
input.border#ff8000
input.foreground#ffaa40
input.placeholderForeground#996633
list.activeSelectionBackground#ff800060
list.activeSelectionForeground#000000
list.hoverBackground#2d1400
list.hoverForeground#ffffff
list.inactiveSelectionBackground#664422
list.inactiveSelectionForeground#ffaa40
menu.background#1a0a00
menu.border#ff8000
menu.foreground#ffaa40
menu.selectionBackground#ff800060
menu.selectionForeground#000000
menu.separatorBackground#ff8000
panel.background#0d0500
panel.border#ff8000
panelTitle.activeBorder#ff4500
panelTitle.activeForeground#ff4500
panelTitle.inactiveForeground#996633
selection.background#ff800060
sideBar.background#0d0500
sideBar.border#ff8000
sideBar.foreground#ffaa40
sideBarSectionHeader.background#1a0a00
sideBarSectionHeader.border#ff8000
sideBarSectionHeader.foreground#ffaa40
sideBarTitle.foreground#ff4500
statusBar.background#050200
statusBar.border#ff8000
statusBar.debuggingBackground#ff8000
statusBar.debuggingForeground#000000
statusBar.foreground#ffaa40
statusBar.noFolderBackground#050200
statusBarItem.activeBackground#2d1400
statusBarItem.hoverBackground#1a0a00
tab.activeBackground#1a0a00
tab.activeBorder#ff4500
tab.activeForeground#ff4500
tab.border#ff8000
tab.inactiveBackground#0d0500
tab.inactiveForeground#996633
terminal.ansiBlack#000000
terminal.ansiBlue#4040ff
terminal.ansiCyan#40ffff
terminal.ansiGreen#40ff40
terminal.ansiMagenta#ff40ff
terminal.ansiRed#ff4040
terminal.ansiWhite#ffffff
terminal.ansiYellow#ffff40
terminal.background#1a0a00
terminal.foreground#ffaa40
titleBar.activeBackground#050200
titleBar.activeForeground#ffaa40
titleBar.border#ff8000
titleBar.inactiveBackground#050200
titleBar.inactiveForeground#664422

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#996633	italic
keyword	#ff8000	bold
string	#ffaa40	—
constant.numeric	#ffd700	—
entity.name.function	#ff4500	bold
variable	#ffcc80	—
entity.name.type	#ff8000	bold
entity.name.class	#ff6600	bold

VS Code preview

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

Chroma Library — Toxic Waste

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#0a1a0a
activityBar.activeBorder#39ff14
activityBar.background#000500
activityBar.border#00ff00
activityBar.foreground#39ff14
activityBar.inactiveForeground#336633
activityBarBadge.background#00ff00
activityBarBadge.foreground#000000
button.background#00ff00
button.border#00ff00
button.foreground#000000
button.hoverBackground#40ff40
dropdown.background#0a1a0a
dropdown.border#00ff00
dropdown.foreground#80ff80
editor.background#0a1a0a
editor.findMatchBackground#00ff0080
editor.findMatchHighlightBackground#00ff0040
editor.foreground#80ff80
editor.lineHighlightBackground#142014
editor.selectionBackground#00ff0060
editor.selectionHighlightBackground#00ff0030
editorCursor.foreground#39ff14
editorGroupHeader.tabsBackground#051005
editorGroupHeader.tabsBorder#00ff00
editorGutter.background#051005
editorIndentGuide.activeBackground#39ff14
editorIndentGuide.background#336633
editorLineNumber.activeForeground#39ff14
editorLineNumber.foreground#669966
editorWhitespace.foreground#336633
errorForeground#ff4040
focusBorder#00ff00
foreground#80ff80
icon.foreground#39ff14
input.background#0a1a0a
input.border#00ff00
input.foreground#80ff80
input.placeholderForeground#669966
list.activeSelectionBackground#00ff0060
list.activeSelectionForeground#000000
list.hoverBackground#142014
list.hoverForeground#ffffff
list.inactiveSelectionBackground#336633
list.inactiveSelectionForeground#80ff80
menu.background#0a1a0a
menu.border#00ff00
menu.foreground#80ff80
menu.selectionBackground#00ff0060
menu.selectionForeground#000000
menu.separatorBackground#00ff00
panel.background#051005
panel.border#00ff00
panelTitle.activeBorder#39ff14
panelTitle.activeForeground#39ff14
panelTitle.inactiveForeground#669966
selection.background#00ff0060
sideBar.background#051005
sideBar.border#00ff00
sideBar.foreground#80ff80
sideBarSectionHeader.background#0a1a0a
sideBarSectionHeader.border#00ff00
sideBarSectionHeader.foreground#80ff80
sideBarTitle.foreground#39ff14
statusBar.background#000500
statusBar.border#00ff00
statusBar.debuggingBackground#00ff00
statusBar.debuggingForeground#000000
statusBar.foreground#80ff80
statusBar.noFolderBackground#000500
statusBarItem.activeBackground#142014
statusBarItem.hoverBackground#0a1a0a
tab.activeBackground#0a1a0a
tab.activeBorder#39ff14
tab.activeForeground#39ff14
tab.border#00ff00
tab.inactiveBackground#051005
tab.inactiveForeground#669966
terminal.ansiBlack#000000
terminal.ansiBlue#4040ff
terminal.ansiCyan#40ffff
terminal.ansiGreen#00ff00
terminal.ansiMagenta#ff40ff
terminal.ansiRed#ff4040
terminal.ansiWhite#ffffff
terminal.ansiYellow#ffff40
terminal.background#0a1a0a
terminal.foreground#80ff80
titleBar.activeBackground#000500
titleBar.activeForeground#80ff80
titleBar.border#00ff00
titleBar.inactiveBackground#000500
titleBar.inactiveForeground#336633

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#669966	italic
keyword	#00ff00	bold
string	#7fff00	—
constant.numeric	#adff2f	—
entity.name.function	#39ff14	bold
variable	#98fb98	—
entity.name.type	#32cd32	bold
entity.name.class	#228b22	bold