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 Crimson Dark

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#0A0507
activityBar.foreground#FF4D6D
activityBar.inactiveForeground#9A3A4D
editor.background#0A0507
editor.foreground#FFE4E6
editor.inactiveSelectionBackground#260A11
editor.lineHighlightBackground#16090D
editor.selectionBackground#3A0F18
editorCursor.foreground#FF4D6D
panel.background#0A0507
sideBar.background#10070A
sideBar.border#2A0D14
sideBar.foreground#FFD1D6
statusBar.background#10070A
statusBar.foreground#FF4D6D
terminal.ansiBlack#1A0B10
terminal.ansiBlue#E11D48
terminal.ansiCyan#FF9FB3
terminal.ansiGreen#FF758F
terminal.ansiMagenta#BE123C
terminal.ansiRed#FF4D6D
terminal.ansiWhite#FFE4E6
terminal.ansiYellow#FF8FA3
terminal.background#0A0507
terminal.foreground#FFE4E6
titleBar.activeBackground#10070A
titleBar.activeForeground#FFD1D6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#8A4A55	italic
string	#FF758F	—
keyword	#FF4D6D	bold
entity.name.function	#FF6B81	—
variable	#FFE4E6	—
constant.numeric	#FF8FA3	—
entity.name.type	#FB7185	—

VS Code preview

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

Night-Stack Theme Pack — Night-Stack Deep Work

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#0C1117
activityBar.foreground#7AA2F7
activityBar.inactiveForeground#4C6FAE
editor.background#0C1117
editor.foreground#D4DAE3
editor.inactiveSelectionBackground#1E2633
editor.lineHighlightBackground#161B22
editor.selectionBackground#263042
editorCursor.foreground#7AA2F7
panel.background#0C1117
sideBar.background#11161D
sideBar.border#263042
sideBar.foreground#C0CAF5
statusBar.background#11161D
statusBar.foreground#7AA2F7
terminal.ansiBlack#1A1F2B
terminal.ansiBlue#5DA9FF
terminal.ansiCyan#7DCFFF
terminal.ansiGreen#9ECE6A
terminal.ansiMagenta#BB9AF7
terminal.ansiRed#7AA2F7
terminal.ansiWhite#D4DAE3
terminal.ansiYellow#E0AF68
terminal.background#0C1117
terminal.foreground#D4DAE3
titleBar.activeBackground#11161D
titleBar.activeForeground#C0CAF5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#5C6370	italic
string	#9ECE6A	—
keyword	#7AA2F7	bold
entity.name.function	#7DCFFF	—
variable	#D4DAE3	—
constant.numeric	#E0AF68	—
entity.name.type	#BB9AF7	—

VS Code preview

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

Night-Stack Theme Pack — Night-Stack Desert Dusk

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#0D0804
activityBar.foreground#F59E0B
activityBar.inactiveForeground#A16207
editor.background#0D0804
editor.foreground#FFECDD
editor.inactiveSelectionBackground#26180A
editor.lineHighlightBackground#1A1208
editor.selectionBackground#3A240E
editorCursor.foreground#F59E0B
panel.background#0D0804
sideBar.background#140C06
sideBar.border#2A1A0B
sideBar.foreground#FFDDBB
statusBar.background#140C06
statusBar.foreground#FBBF24
terminal.ansiBlack#1A120A
terminal.ansiBlue#C97C5D
terminal.ansiCyan#FFD166
terminal.ansiGreen#F4A261
terminal.ansiMagenta#D97706
terminal.ansiRed#E76F51
terminal.ansiWhite#FFECDD
terminal.ansiYellow#FBBF24
terminal.background#0D0804
terminal.foreground#FFECDD
titleBar.activeBackground#140C06
titleBar.activeForeground#FFDDBB

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#8A6A4A	italic
string	#F4A261	—
keyword	#F59E0B	bold
entity.name.function	#FBBF24	—
variable	#FFECDD	—
constant.numeric	#FFD166	—
entity.name.type	#E76F51	—

VS Code preview

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

Night-Stack Theme Pack — Night-Stack DOS Blue

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#000080
activityBar.foreground#FFFFFF
activityBar.inactiveForeground#C0C0C0
editor.background#000080
editor.foreground#FFFFFF
editor.inactiveSelectionBackground#0000A0
editor.lineHighlightBackground#000099
editor.selectionBackground#0000CC
editorCursor.foreground#FFFF00
panel.background#000080
sideBar.background#000090
sideBar.border#0000CC
sideBar.foreground#FFFFFF
statusBar.background#000090
statusBar.foreground#FFFF00
terminal.ansiBlack#000066
terminal.ansiBlue#0000FF
terminal.ansiCyan#00FFFF
terminal.ansiGreen#00FF00
terminal.ansiMagenta#FF00FF
terminal.ansiRed#FF0000
terminal.ansiWhite#FFFFFF
terminal.ansiYellow#FFFF00
terminal.background#000080
terminal.foreground#FFFFFF
titleBar.activeBackground#000090
titleBar.activeForeground#FFFFFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#C0C0C0	italic
string	#00FFFF	—
keyword	#FFFF00	bold
entity.name.function	#00FF00	—
variable	#FFFFFF	—
constant.numeric	#FF00FF	—
entity.name.type	#FFFF00	—