Haho Vs Code Premium

Name: Haho Vs Code Premium
Author: Haho Studio

Publisher: Haho StudioThemes in package: 20

Haho Vs Code Premium: animated RGB LED frame, Power Mode coding effects, keyboard sounds, 20 themes, and custom control panel for VS Code.

Open in VS Code

Color themes

VS Code preview

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

Haho Vs Code Premium — Haho Sunset 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.activeBorder#fb7185
activityBar.background#180c1a
activityBar.foreground#fff7ed
activityBar.inactiveForeground#fff7ed80
activityBarBadge.background#fb7185
activityBarBadge.foreground#001018
badge.background#f97316
badge.foreground#ffffff
button.background#fb7185
button.foreground#001018
button.hoverBackground#fc8b9b
button.secondaryBackground#4e2536
button.secondaryForeground#fff7ed
descriptionForeground#fff7edB5
dropdown.background#1a0e1c
dropdown.border#fb718565
dropdown.foreground#fff7ed
editor.background#120812
editor.findMatchBackground#fde04755
editor.findMatchHighlightBackground#f9731635
editor.foreground#fff7ed
editor.lineHighlightBackground#fb718512
editor.selectionBackground#fb718535
editor.selectionHighlightBackground#f9731622
editorBracketMatch.border#fde047
editorCursor.foreground#fde047
editorGroup.border#fb718528
editorGroupHeader.tabsBackground#150a16
editorGutter.addedBackground#f97316
editorGutter.background#120812
editorGutter.deletedBackground#ff4d6d
editorGutter.modifiedBackground#fb7185
editorHoverWidget.background#1d1020
editorHoverWidget.border#fb718580
editorIndentGuide.activeBackground1#fb718580
editorIndentGuide.background1#fff7ed14
editorLineNumber.activeForeground#fb7185
editorLineNumber.foreground#fff7ed55
editorSuggestWidget.background#1d1020
editorSuggestWidget.border#fb718580
editorSuggestWidget.foreground#fff7ed
editorSuggestWidget.selectedBackground#4e2536
editorWhitespace.foreground#fff7ed20
editorWidget.background#1d1020
editorWidget.border#fb718580
errorForeground#ff4d6d
focusBorder#fb7185
foreground#fff7ed
icon.foreground#fff7edD0
input.background#1a0e1c
input.border#fb718565
input.foreground#fff7ed
inputOption.activeBorder#fb7185
list.activeSelectionBackground#4e2536
list.activeSelectionForeground#fff7ed
list.focusOutline#fb7185
list.highlightForeground#fde047
list.hoverBackground#fb718514
list.inactiveSelectionBackground#fb718520
menu.background#1d1020
menu.border#fb718550
menu.foreground#fff7ed
menu.selectionBackground#4e2536
menu.selectionForeground#fff7ed
menubar.selectionBackground#fb718520
menubar.selectionForeground#fff7ed
minimap.background#120812
panel.background#2f1828
panel.border#fb718535
panelTitle.activeBorder#fb7185
panelTitle.activeForeground#fff7ed
panelTitle.inactiveForeground#fff7ed88
sash.hoverBorder#fb7185
scrollbarSlider.activeBackground#fb718575
scrollbarSlider.background#fb718530
scrollbarSlider.hoverBackground#fb718555
sideBar.background#2f1828
sideBar.border#fb718535
sideBar.foreground#fff7ed
sideBarSectionHeader.background#190d1b
sideBarSectionHeader.foreground#fff7ed
sideBarTitle.foreground#fff7ed
statusBar.background#4e2536
statusBar.border#fb718555
statusBar.foreground#fff7ed
statusBarItem.hoverBackground#fb718528
statusBarItem.remoteBackground#fb7185
statusBarItem.remoteForeground#001018
tab.activeBackground#29131e
tab.activeBorderTop#fb7185
tab.activeForeground#fff7ed
tab.hoverBackground#fb718516
tab.inactiveBackground#180c1a
tab.inactiveForeground#fff7edA0
terminal.ansiCyan#fb7185
terminal.ansiMagenta#f97316
terminal.ansiYellow#fde047
terminal.background#120812
terminal.foreground#fff7ed
terminalCursor.foreground#fde047
titleBar.activeBackground#180c1a
titleBar.activeForeground#fff7ed
titleBar.inactiveBackground#120812
titleBar.inactiveForeground#fff7ed80
window.activeBorder#fb7185
window.inactiveBorder#f9731660

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#fff7ed72	italic
string, constant.other.symbol	#f97316	—
constant.numeric, constant.language, support.constant	#fde047	—
keyword, storage.type, storage.modifier	#fb7185	bold
entity.name.function, support.function, meta.function-call	#fb7185	—
entity.name.type, support.type, entity.name.class	#fde047	—
variable, identifier	#fff7ed	—
variable.parameter	#feefb3	—
punctuation, meta.brace	#fff7edC0	—
invalid, invalid.illegal	#ffffff	—

VS Code preview

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

Haho Vs Code Premium — Haho Synthwave 84

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.activeBorder#ff2bd6
activityBar.background#140c23
activityBar.foreground#fff3ff
activityBar.inactiveForeground#fff3ff80
activityBarBadge.background#ff2bd6
activityBarBadge.foreground#001018
badge.background#7c3aed
badge.foreground#ffffff
button.background#ff2bd6
button.foreground#001018
button.hoverBackground#ff51dd
button.secondaryBackground#4c1651
button.secondaryForeground#fff3ff
descriptionForeground#fff3ffB5
dropdown.background#160d26
dropdown.border#ff2bd665
dropdown.foreground#fff3ff
editor.background#0e0619
editor.findMatchBackground#ff8a0055
editor.findMatchHighlightBackground#7c3aed35
editor.foreground#fff3ff
editor.lineHighlightBackground#ff2bd612
editor.selectionBackground#ff2bd635
editor.selectionHighlightBackground#7c3aed22
editorBracketMatch.border#ff8a00
editorCursor.foreground#ff8a00
editorGroup.border#ff2bd628
editorGroupHeader.tabsBackground#11091e
editorGutter.addedBackground#7c3aed
editorGutter.background#0e0619
editorGutter.deletedBackground#ff4d6d
editorGutter.modifiedBackground#ff2bd6
editorHoverWidget.background#19102b
editorHoverWidget.border#ff2bd680
editorIndentGuide.activeBackground1#ff2bd680
editorIndentGuide.background1#fff3ff14
editorLineNumber.activeForeground#ff2bd6
editorLineNumber.foreground#fff3ff55
editorSuggestWidget.background#19102b
editorSuggestWidget.border#ff2bd680
editorSuggestWidget.foreground#fff3ff
editorSuggestWidget.selectedBackground#4c1651
editorWhitespace.foreground#fff3ff20
editorWidget.background#19102b
editorWidget.border#ff2bd680
errorForeground#ff4d6d
focusBorder#ff2bd6
foreground#fff3ff
icon.foreground#fff3ffD0
input.background#160d26
input.border#ff2bd665
input.foreground#fff3ff
inputOption.activeBorder#ff2bd6
list.activeSelectionBackground#4c1651
list.activeSelectionForeground#fff3ff
list.focusOutline#ff2bd6
list.highlightForeground#ff8a00
list.hoverBackground#ff2bd614
list.inactiveSelectionBackground#ff2bd620
menu.background#19102b
menu.border#ff2bd650
menu.foreground#fff3ff
menu.selectionBackground#4c1651
menu.selectionForeground#fff3ff
menubar.selectionBackground#ff2bd620
menubar.selectionForeground#fff3ff
minimap.background#0e0619
panel.background#2b1239
panel.border#ff2bd635
panelTitle.activeBorder#ff2bd6
panelTitle.activeForeground#fff3ff
panelTitle.inactiveForeground#fff3ff88
sash.hoverBorder#ff2bd6
scrollbarSlider.activeBackground#ff2bd675
scrollbarSlider.background#ff2bd630
scrollbarSlider.hoverBackground#ff2bd655
sideBar.background#2b1239
sideBar.border#ff2bd635
sideBar.foreground#fff3ff
sideBarSectionHeader.background#150d25
sideBarSectionHeader.foreground#fff3ff
sideBarTitle.foreground#fff3ff
statusBar.background#4c1651
statusBar.border#ff2bd655
statusBar.foreground#fff3ff
statusBarItem.hoverBackground#ff2bd628
statusBarItem.remoteBackground#ff2bd6
statusBarItem.remoteForeground#001018
tab.activeBackground#260a2c
tab.activeBorderTop#ff2bd6
tab.activeForeground#fff3ff
tab.hoverBackground#ff2bd616
tab.inactiveBackground#140c23
tab.inactiveForeground#fff3ffA0
terminal.ansiCyan#ff2bd6
terminal.ansiMagenta#7c3aed
terminal.ansiYellow#ff8a00
terminal.background#0e0619
terminal.foreground#fff3ff
terminalCursor.foreground#ff8a00
titleBar.activeBackground#140c23
titleBar.activeForeground#fff3ff
titleBar.inactiveBackground#0e0619
titleBar.inactiveForeground#fff3ff80
window.activeBorder#ff2bd6
window.inactiveBorder#7c3aed60

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#fff3ff72	italic
string, constant.other.symbol	#7c3aed	—
constant.numeric, constant.language, support.constant	#ff8a00	—
keyword, storage.type, storage.modifier	#ff2bd6	bold
entity.name.function, support.function, meta.function-call	#ff2bd6	—
entity.name.type, support.type, entity.name.class	#ff8a00	—
variable, identifier	#fff3ff	—
variable.parameter	#ffcea6	—
punctuation, meta.brace	#fff3ffC0	—
invalid, invalid.illegal	#ffffff	—

VS Code preview

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

Haho Vs Code Premium — Haho Toxic Lime

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.activeBorder#a3ff12
activityBar.background#09110c
activityBar.foreground#f0ffe7
activityBar.inactiveForeground#f0ffe780
activityBarBadge.background#a3ff12
activityBarBadge.foreground#001018
badge.background#00ff88
badge.foreground#ffffff
button.background#a3ff12
button.foreground#001018
button.hoverBackground#b4ff3d
button.secondaryBackground#2c4810
button.secondaryForeground#f0ffe7
descriptionForeground#f0ffe7B5
dropdown.background#0a120e
dropdown.border#a3ff1265
dropdown.foreground#f0ffe7
editor.background#060b08
editor.findMatchBackground#38ffca55
editor.findMatchHighlightBackground#00ff8835
editor.foreground#f0ffe7
editor.lineHighlightBackground#a3ff1212
editor.selectionBackground#a3ff1235
editor.selectionHighlightBackground#00ff8822
editorBracketMatch.border#38ffca
editorCursor.foreground#38ffca
editorGroup.border#a3ff1228
editorGroupHeader.tabsBackground#070e0a
editorGutter.addedBackground#00ff88
editorGutter.background#060b08
editorGutter.deletedBackground#ff4d6d
editorGutter.modifiedBackground#a3ff12
editorHoverWidget.background#0b1510
editorHoverWidget.border#a3ff1280
editorIndentGuide.activeBackground1#a3ff1280
editorIndentGuide.background1#f0ffe714
editorLineNumber.activeForeground#a3ff12
editorLineNumber.foreground#f0ffe755
editorSuggestWidget.background#0b1510
editorSuggestWidget.border#a3ff1280
editorSuggestWidget.foreground#f0ffe7
editorSuggestWidget.selectedBackground#2c4810
editorWhitespace.foreground#f0ffe720
editorWidget.background#0b1510
editorWidget.border#a3ff1280
errorForeground#ff4d6d
focusBorder#a3ff12
foreground#f0ffe7
icon.foreground#f0ffe7D0
input.background#0a120e
input.border#a3ff1265
input.foreground#f0ffe7
inputOption.activeBorder#a3ff12
list.activeSelectionBackground#2c4810
list.activeSelectionForeground#f0ffe7
list.focusOutline#a3ff12
list.highlightForeground#38ffca
list.hoverBackground#a3ff1214
list.inactiveSelectionBackground#a3ff1220
menu.background#0b1510
menu.border#a3ff1250
menu.foreground#f0ffe7
menu.selectionBackground#2c4810
menu.selectionForeground#f0ffe7
menubar.selectionBackground#a3ff1220
menubar.selectionForeground#f0ffe7
minimap.background#060b08
panel.background#172810
panel.border#a3ff1235
panelTitle.activeBorder#a3ff12
panelTitle.activeForeground#f0ffe7
panelTitle.inactiveForeground#f0ffe788
sash.hoverBorder#a3ff12
scrollbarSlider.activeBackground#a3ff1275
scrollbarSlider.background#a3ff1230
scrollbarSlider.hoverBackground#a3ff1255
sideBar.background#172810
sideBar.border#a3ff1235
sideBar.foreground#f0ffe7
sideBarSectionHeader.background#09120d
sideBarSectionHeader.foreground#f0ffe7
sideBarTitle.foreground#f0ffe7
statusBar.background#2c4810
statusBar.border#a3ff1255
statusBar.foreground#f0ffe7
statusBarItem.hoverBackground#a3ff1228
statusBarItem.remoteBackground#a3ff12
statusBarItem.remoteForeground#001018
tab.activeBackground#162309
tab.activeBorderTop#a3ff12
tab.activeForeground#f0ffe7
tab.hoverBackground#a3ff1216
tab.inactiveBackground#09110c
tab.inactiveForeground#f0ffe7A0
terminal.ansiCyan#a3ff12
terminal.ansiMagenta#00ff88
terminal.ansiYellow#38ffca
terminal.background#060b08
terminal.foreground#f0ffe7
terminalCursor.foreground#38ffca
titleBar.activeBackground#09110c
titleBar.activeForeground#f0ffe7
titleBar.inactiveBackground#060b08
titleBar.inactiveForeground#f0ffe780
window.activeBorder#a3ff12
window.inactiveBorder#00ff8860

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#f0ffe772	italic
string, constant.other.symbol	#00ff88	—
constant.numeric, constant.language, support.constant	#38ffca	—
keyword, storage.type, storage.modifier	#a3ff12	bold
entity.name.function, support.function, meta.function-call	#a3ff12	—
entity.name.type, support.type, entity.name.class	#38ffca	—
variable, identifier	#f0ffe7	—
variable.parameter	#b0ffdd	—
punctuation, meta.brace	#f0ffe7C0	—
invalid, invalid.illegal	#ffffff	—

VS Code preview

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

Haho Vs Code Premium — Haho Volcano Pro

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.activeBorder#ff3b30
activityBar.background#180909
activityBar.foreground#fff2e9
activityBar.inactiveForeground#fff2e980
activityBarBadge.background#ff3b30
activityBarBadge.foreground#001018
badge.background#ff8a00
badge.foreground#ffffff
button.background#ff3b30
button.foreground#001018
button.hoverBackground#ff5e55
button.secondaryBackground#4e1612
button.secondaryForeground#fff2e9
descriptionForeground#fff2e9B5
dropdown.background#190a09
dropdown.border#ff3b3065
dropdown.foreground#fff2e9
editor.background#120707
editor.findMatchBackground#ffd16655
editor.findMatchHighlightBackground#ff8a0035
editor.foreground#fff2e9
editor.lineHighlightBackground#ff3b3012
editor.selectionBackground#ff3b3035
editor.selectionHighlightBackground#ff8a0022
editorBracketMatch.border#ffd166
editorCursor.foreground#ffd166
editorGroup.border#ff3b3028
editorGroupHeader.tabsBackground#150808
editorGutter.addedBackground#ff8a00
editorGutter.background#120707
editorGutter.deletedBackground#ff4d6d
editorGutter.modifiedBackground#ff3b30
editorHoverWidget.background#1c0b0a
editorHoverWidget.border#ff3b3080
editorIndentGuide.activeBackground1#ff3b3080
editorIndentGuide.background1#fff2e914
editorLineNumber.activeForeground#ff3b30
editorLineNumber.foreground#fff2e955
editorSuggestWidget.background#1c0b0a
editorSuggestWidget.border#ff3b3080
editorSuggestWidget.foreground#fff2e9
editorSuggestWidget.selectedBackground#4e1612
editorWhitespace.foreground#fff2e920
editorWidget.background#1c0b0a
editorWidget.border#ff3b3080
errorForeground#ff4d6d
focusBorder#ff3b30
foreground#fff2e9
icon.foreground#fff2e9D0
input.background#190a09
input.border#ff3b3065
input.foreground#fff2e9
inputOption.activeBorder#ff3b30
list.activeSelectionBackground#4e1612
list.activeSelectionForeground#fff2e9
list.focusOutline#ff3b30
list.highlightForeground#ffd166
list.hoverBackground#ff3b3014
list.inactiveSelectionBackground#ff3b3020
menu.background#1c0b0a
menu.border#ff3b3050
menu.foreground#fff2e9
menu.selectionBackground#4e1612
menu.selectionForeground#fff2e9
menubar.selectionBackground#ff3b3020
menubar.selectionForeground#fff2e9
minimap.background#120707
panel.background#2e0f0d
panel.border#ff3b3035
panelTitle.activeBorder#ff3b30
panelTitle.activeForeground#fff2e9
panelTitle.inactiveForeground#fff2e988
sash.hoverBorder#ff3b30
scrollbarSlider.activeBackground#ff3b3075
scrollbarSlider.background#ff3b3030
scrollbarSlider.hoverBackground#ff3b3055
sideBar.background#2e0f0d
sideBar.border#ff3b3035
sideBar.foreground#fff2e9
sideBarSectionHeader.background#190a09
sideBarSectionHeader.foreground#fff2e9
sideBarTitle.foreground#fff2e9
statusBar.background#4e1612
statusBar.border#ff3b3055
statusBar.foreground#fff2e9
statusBarItem.hoverBackground#ff3b3028
statusBarItem.remoteBackground#ff3b30
statusBarItem.remoteForeground#001018
tab.activeBackground#2a0c0b
tab.activeBorderTop#ff3b30
tab.activeForeground#fff2e9
tab.hoverBackground#ff3b3016
tab.inactiveBackground#180909
tab.inactiveForeground#fff2e9A0
terminal.ansiCyan#ff3b30
terminal.ansiMagenta#ff8a00
terminal.ansiYellow#ffd166
terminal.background#120707
terminal.foreground#fff2e9
terminalCursor.foreground#ffd166
titleBar.activeBackground#180909
titleBar.activeForeground#fff2e9
titleBar.inactiveBackground#120707
titleBar.inactiveForeground#fff2e980
window.activeBorder#ff3b30
window.inactiveBorder#ff8a0060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#fff2e972	italic
string, constant.other.symbol	#ff8a00	—
constant.numeric, constant.language, support.constant	#ffd166	—
keyword, storage.type, storage.modifier	#ff3b30	bold
entity.name.function, support.function, meta.function-call	#ff3b30	—
entity.name.type, support.type, entity.name.class	#ffd166	—
variable, identifier	#fff2e9	—
variable.parameter	#ffe6bb	—
punctuation, meta.brace	#fff2e9C0	—
invalid, invalid.illegal	#ffffff	—