Night-Stack Theme Pack

Name: Night-Stack Theme Pack
Author: Saragam Ghimire

Publisher: Saragam GhimireThemes in package: 43

Green-first hacker inspired dark theme pack with neon, pure hacker, eye-friendly, and stack-specific variants.

Open in VS Code GitHub

Color themes

VS Code preview

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

Night-Stack Theme Pack — Night-Stack Graphite

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#0C0D10
activityBar.foreground#B4B4BB
activityBar.inactiveForeground#6B6B73
editor.background#0C0D10
editor.foreground#D8D9DC
editor.inactiveSelectionBackground#1F2127
editor.lineHighlightBackground#16171C
editor.selectionBackground#2A2C33
editorCursor.foreground#A1A1AA
panel.background#0C0D10
sideBar.background#111217
sideBar.border#23252D
sideBar.foreground#C9CAD1
statusBar.background#111217
statusBar.foreground#B4B4BB
terminal.ansiBlack#1A1B21
terminal.ansiBlue#71717A
terminal.ansiCyan#AFAFB6
terminal.ansiGreen#B4B4BB
terminal.ansiMagenta#8B8B94
terminal.ansiRed#A1A1AA
terminal.ansiWhite#D8D9DC
terminal.ansiYellow#C9CAD1
terminal.background#0C0D10
terminal.foreground#D8D9DC
titleBar.activeBackground#111217
titleBar.activeForeground#C9CAD1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#6B6B73	italic
string	#AFAFB6	—
keyword	#B4B4BB	bold
entity.name.function	#C9CAD1	—
variable	#D8D9DC	—
constant.numeric	#E4E4E7	—
entity.name.type	#B4B4BB	—

VS Code preview

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

Night-Stack Theme Pack — Night-Stack Green Neon

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#0A0F0A
activityBar.foreground#39FF14
activityBar.inactiveForeground#2E8B57
editor.background#0A0F0A
editor.foreground#C8FFC8
editor.inactiveSelectionBackground#163016
editor.lineHighlightBackground#112211
editor.selectionBackground#1F3F1F
editorCursor.foreground#39FF14
panel.background#0A0F0A
sideBar.background#0C120C
sideBar.border#1A2A1A
sideBar.foreground#7CFC00
statusBar.background#0C120C
statusBar.foreground#39FF14
terminal.ansiBlack#000000
terminal.ansiBlue#00FFFF
terminal.ansiCyan#00FFFF
terminal.ansiGreen#39FF14
terminal.ansiMagenta#C586FF
terminal.ansiRed#FF5555
terminal.ansiWhite#FFFFFF
terminal.ansiYellow#F1FA8C
terminal.background#0A0F0A
terminal.foreground#39FF14
titleBar.activeBackground#0C120C
titleBar.activeForeground#7CFC00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#2E8B57	italic
string	#7CFC00	—
keyword	#39FF14	bold
entity.name.function	#00FFFF	—
variable	#C8FFC8	—
constant.numeric	#F1FA8C	—
entity.name.type	#C586FF	—

VS Code preview

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

Night-Stack Theme Pack — Night-Stack Hacker Soft

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#0D1110
activityBar.foreground#9FD89F
activityBar.inactiveForeground#5F8F5F
editor.background#0D1110
editor.foreground#CFE8CF
editor.inactiveSelectionBackground#18241D
editor.lineHighlightBackground#16201A
editor.selectionBackground#1F2D24
editorCursor.foreground#7FBF7F
panel.background#0D1110
sideBar.background#0F1412
sideBar.border#1A221D
sideBar.foreground#A8D5A2
statusBar.background#0F1412
statusBar.foreground#9FD89F
terminal.ansiBlack#1A1A1A
terminal.ansiBlue#6CA0DC
terminal.ansiCyan#6FBFBF
terminal.ansiGreen#7FBF7F
terminal.ansiMagenta#B084D6
terminal.ansiRed#D16969
terminal.ansiWhite#D4D4D4
terminal.ansiYellow#C5C56A
terminal.background#0D1110
terminal.foreground#CFE8CF
titleBar.activeBackground#0F1412
titleBar.activeForeground#A8D5A2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#5F8F5F	italic
string	#9FD89F	—
keyword	#7FBF7F	bold
entity.name.function	#A8D5A2	—
variable	#CFE8CF	—
constant.numeric	#C5C56A	—
entity.name.type	#8FBF9F	—

VS Code preview

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

Night-Stack Theme Pack — Night-Stack Hologram

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#090A14
activityBar.foreground#A855F7
activityBar.inactiveForeground#5B3B9A
editor.background#090A14
editor.foreground#E6E6FF
editor.inactiveSelectionBackground#1C143A
editor.lineHighlightBackground#151735
editor.selectionBackground#2A1F4F
editorCursor.foreground#7DF9FF
panel.background#090A14
sideBar.background#111122
sideBar.border#2A1F4F
sideBar.foreground#E9D5FF
statusBar.background#111122
statusBar.foreground#7DF9FF
terminal.ansiBlack#1A1C33
terminal.ansiBlue#6366F1
terminal.ansiCyan#7DF9FF
terminal.ansiGreen#7DF9FF
terminal.ansiMagenta#A855F7
terminal.ansiRed#A855F7
terminal.ansiWhite#E6E6FF
terminal.ansiYellow#C084FC
terminal.background#090A14
terminal.foreground#E6E6FF
titleBar.activeBackground#111122
titleBar.activeForeground#E9D5FF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#9F7AEA	italic
string	#7DF9FF	—
keyword	#A855F7	bold
entity.name.function	#C084FC	—
variable	#E6E6FF	—
constant.numeric	#6366F1	—
entity.name.type	#A855F7	—