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 Dracula 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#bd93f9
activityBar.background#110f1c
activityBar.foreground#f8f8f2
activityBar.inactiveForeground#f8f8f280
activityBarBadge.background#bd93f9
activityBarBadge.foreground#001018
badge.background#50fa7b
badge.foreground#ffffff
button.background#bd93f9
button.foreground#001018
button.hoverBackground#c9a6fa
button.secondaryBackground#3a2f52
button.secondaryForeground#f8f8f2
descriptionForeground#f8f8f2B5
dropdown.background#12101f
dropdown.border#bd93f965
dropdown.foreground#f8f8f2
editor.background#0b0a14
editor.findMatchBackground#ff79c655
editor.findMatchHighlightBackground#50fa7b35
editor.foreground#f8f8f2
editor.lineHighlightBackground#bd93f912
editor.selectionBackground#bd93f935
editor.selectionHighlightBackground#50fa7b22
editorBracketMatch.border#ff79c6
editorCursor.foreground#ff79c6
editorGroup.border#bd93f928
editorGroupHeader.tabsBackground#0e0c18
editorGutter.addedBackground#50fa7b
editorGutter.background#0b0a14
editorGutter.deletedBackground#ff4d6d
editorGutter.modifiedBackground#bd93f9
editorHoverWidget.background#151323
editorHoverWidget.border#bd93f980
editorIndentGuide.activeBackground1#bd93f980
editorIndentGuide.background1#f8f8f214
editorLineNumber.activeForeground#bd93f9
editorLineNumber.foreground#f8f8f255
editorSuggestWidget.background#151323
editorSuggestWidget.border#bd93f980
editorSuggestWidget.foreground#f8f8f2
editorSuggestWidget.selectedBackground#3a2f52
editorWhitespace.foreground#f8f8f220
editorWidget.background#151323
editorWidget.border#bd93f980
errorForeground#ff4d6d
focusBorder#bd93f9
foreground#f8f8f2
icon.foreground#f8f8f2D0
input.background#12101f
input.border#bd93f965
input.foreground#f8f8f2
inputOption.activeBorder#bd93f9
list.activeSelectionBackground#3a2f52
list.activeSelectionForeground#f8f8f2
list.focusOutline#bd93f9
list.highlightForeground#ff79c6
list.hoverBackground#bd93f914
list.inactiveSelectionBackground#bd93f920
menu.background#151323
menu.border#bd93f950
menu.foreground#f8f8f2
menu.selectionBackground#3a2f52
menu.selectionForeground#f8f8f2
menubar.selectionBackground#bd93f920
menubar.selectionForeground#f8f8f2
minimap.background#0b0a14
panel.background#221d34
panel.border#bd93f935
panelTitle.activeBorder#bd93f9
panelTitle.activeForeground#f8f8f2
panelTitle.inactiveForeground#f8f8f288
sash.hoverBorder#bd93f9
scrollbarSlider.activeBackground#bd93f975
scrollbarSlider.background#bd93f930
scrollbarSlider.hoverBackground#bd93f955
sideBar.background#221d34
sideBar.border#bd93f935
sideBar.foreground#f8f8f2
sideBarSectionHeader.background#12101e
sideBarSectionHeader.foreground#f8f8f2
sideBarTitle.foreground#f8f8f2
statusBar.background#3a2f52
statusBar.border#bd93f955
statusBar.foreground#f8f8f2
statusBarItem.hoverBackground#bd93f928
statusBarItem.remoteBackground#bd93f9
statusBarItem.remoteForeground#001018
tab.activeBackground#1d182b
tab.activeBorderTop#bd93f9
tab.activeForeground#f8f8f2
tab.hoverBackground#bd93f916
tab.inactiveBackground#110f1c
tab.inactiveForeground#f8f8f2A0
terminal.ansiCyan#bd93f9
terminal.ansiMagenta#50fa7b
terminal.ansiYellow#ff79c6
terminal.background#0b0a14
terminal.foreground#f8f8f2
terminalCursor.foreground#ff79c6
titleBar.activeBackground#110f1c
titleBar.activeForeground#f8f8f2
titleBar.inactiveBackground#0b0a14
titleBar.inactiveForeground#f8f8f280
window.activeBorder#bd93f9
window.inactiveBorder#50fa7b60

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#f8f8f272	italic
string, constant.other.symbol	#50fa7b	—
constant.numeric, constant.language, support.constant	#ff79c6	—
keyword, storage.type, storage.modifier	#bd93f9	bold
entity.name.function, support.function, meta.function-call	#bd93f9	—
entity.name.type, support.type, entity.name.class	#ff79c6	—
variable, identifier	#f8f8f2	—
variable.parameter	#facce3	—
punctuation, meta.brace	#f8f8f2C0	—
invalid, invalid.illegal	#ffffff	—

VS Code preview

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

Haho Vs Code Premium — Haho Emerald Matrix

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#00ff88
activityBar.background#06160f
activityBar.foreground#eafff5
activityBar.inactiveForeground#eafff580
activityBarBadge.background#00ff88
activityBarBadge.foreground#001018
badge.background#00c2ff
badge.foreground#ffffff
button.background#00ff88
button.foreground#001018
button.hoverBackground#2eff9d
button.secondaryBackground#054c2c
button.secondaryForeground#eafff5
descriptionForeground#eafff5B5
dropdown.background#061710
dropdown.border#00ff8865
dropdown.foreground#eafff5
editor.background#04110c
editor.findMatchBackground#b6ff0055
editor.findMatchHighlightBackground#00c2ff35
editor.foreground#eafff5
editor.lineHighlightBackground#00ff8812
editor.selectionBackground#00ff8835
editor.selectionHighlightBackground#00c2ff22
editorBracketMatch.border#b6ff00
editorCursor.foreground#b6ff00
editorGroup.border#00ff8828
editorGroupHeader.tabsBackground#05130e
editorGutter.addedBackground#00c2ff
editorGutter.background#04110c
editorGutter.deletedBackground#ff4d6d
editorGutter.modifiedBackground#00ff88
editorHoverWidget.background#071a12
editorHoverWidget.border#00ff8880
editorIndentGuide.activeBackground1#00ff8880
editorIndentGuide.background1#eafff514
editorLineNumber.activeForeground#00ff88
editorLineNumber.foreground#eafff555
editorSuggestWidget.background#071a12
editorSuggestWidget.border#00ff8880
editorSuggestWidget.foreground#eafff5
editorSuggestWidget.selectedBackground#054c2c
editorWhitespace.foreground#eafff520
editorWidget.background#071a12
editorWidget.border#00ff8880
errorForeground#ff4d6d
focusBorder#00ff88
foreground#eafff5
icon.foreground#eafff5D0
input.background#061710
input.border#00ff8865
input.foreground#eafff5
inputOption.activeBorder#00ff88
list.activeSelectionBackground#054c2c
list.activeSelectionForeground#eafff5
list.focusOutline#00ff88
list.highlightForeground#b6ff00
list.hoverBackground#00ff8814
list.inactiveSelectionBackground#00ff8820
menu.background#071a12
menu.border#00ff8850
menu.foreground#eafff5
menu.selectionBackground#054c2c
menu.selectionForeground#eafff5
menubar.selectionBackground#00ff8820
menubar.selectionForeground#eafff5
minimap.background#04110c
panel.background#062c1b
panel.border#00ff8835
panelTitle.activeBorder#00ff88
panelTitle.activeForeground#eafff5
panelTitle.inactiveForeground#eafff588
sash.hoverBorder#00ff88
scrollbarSlider.activeBackground#00ff8875
scrollbarSlider.background#00ff8830
scrollbarSlider.hoverBackground#00ff8855
sideBar.background#062c1b
sideBar.border#00ff8835
sideBar.foreground#eafff5
sideBarSectionHeader.background#061710
sideBarSectionHeader.foreground#eafff5
sideBarTitle.foreground#eafff5
statusBar.background#054c2c
statusBar.border#00ff8855
statusBar.foreground#eafff5
statusBarItem.hoverBackground#00ff8828
statusBarItem.remoteBackground#00ff88
statusBarItem.remoteForeground#001018
tab.activeBackground#042918
tab.activeBorderTop#00ff88
tab.activeForeground#eafff5
tab.hoverBackground#00ff8816
tab.inactiveBackground#06160f
tab.inactiveForeground#eafff5A0
terminal.ansiCyan#00ff88
terminal.ansiMagenta#00c2ff
terminal.ansiYellow#b6ff00
terminal.background#04110c
terminal.foreground#eafff5
terminalCursor.foreground#b6ff00
titleBar.activeBackground#06160f
titleBar.activeForeground#eafff5
titleBar.inactiveBackground#04110c
titleBar.inactiveForeground#eafff580
window.activeBorder#00ff88
window.inactiveBorder#00c2ff60

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#eafff572	italic
string, constant.other.symbol	#00c2ff	—
constant.numeric, constant.language, support.constant	#b6ff00	—
keyword, storage.type, storage.modifier	#00ff88	bold
entity.name.function, support.function, meta.function-call	#00ff88	—
entity.name.type, support.type, entity.name.class	#b6ff00	—
variable, identifier	#eafff5	—
variable.parameter	#d8ff9f	—
punctuation, meta.brace	#eafff5C0	—
invalid, invalid.illegal	#ffffff	—

VS Code preview

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

Haho Vs Code Premium — Haho Forest Glow

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#34d399
activityBar.background#08160f
activityBar.foreground#f0fff7
activityBar.inactiveForeground#f0fff780
activityBarBadge.background#34d399
activityBarBadge.foreground#001018
badge.background#84cc16
badge.foreground#ffffff
button.background#34d399
button.foreground#001018
button.hoverBackground#59dbab
button.secondaryBackground#144330
button.secondaryForeground#f0fff7
descriptionForeground#f0fff7B5
dropdown.background#091710
dropdown.border#34d39965
dropdown.foreground#f0fff7
editor.background#05100b
editor.findMatchBackground#d9f99d55
editor.findMatchHighlightBackground#84cc1635
editor.foreground#f0fff7
editor.lineHighlightBackground#34d39912
editor.selectionBackground#34d39935
editor.selectionHighlightBackground#84cc1622
editorBracketMatch.border#d9f99d
editorCursor.foreground#d9f99d
editorGroup.border#34d39928
editorGroupHeader.tabsBackground#07130d
editorGutter.addedBackground#84cc16
editorGutter.background#05100b
editorGutter.deletedBackground#ff4d6d
editorGutter.modifiedBackground#34d399
editorHoverWidget.background#0b1a12
editorHoverWidget.border#34d39980
editorIndentGuide.activeBackground1#34d39980
editorIndentGuide.background1#f0fff714
editorLineNumber.activeForeground#34d399
editorLineNumber.foreground#f0fff755
editorSuggestWidget.background#0b1a12
editorSuggestWidget.border#34d39980
editorSuggestWidget.foreground#f0fff7
editorSuggestWidget.selectedBackground#144330
editorWhitespace.foreground#f0fff720
editorWidget.background#0b1a12
editorWidget.border#34d39980
errorForeground#ff4d6d
focusBorder#34d399
foreground#f0fff7
icon.foreground#f0fff7D0
input.background#091710
input.border#34d39965
input.foreground#f0fff7
inputOption.activeBorder#34d399
list.activeSelectionBackground#144330
list.activeSelectionForeground#f0fff7
list.focusOutline#34d399
list.highlightForeground#d9f99d
list.hoverBackground#34d39914
list.inactiveSelectionBackground#34d39920
menu.background#0b1a12
menu.border#34d39950
menu.foreground#f0fff7
menu.selectionBackground#144330
menu.selectionForeground#f0fff7
menubar.selectionBackground#34d39920
menubar.selectionForeground#f0fff7
minimap.background#05100b
panel.background#0e291d
panel.border#34d39935
panelTitle.activeBorder#34d399
panelTitle.activeForeground#f0fff7
panelTitle.inactiveForeground#f0fff788
sash.hoverBorder#34d399
scrollbarSlider.activeBackground#34d39975
scrollbarSlider.background#34d39930
scrollbarSlider.hoverBackground#34d39955
sideBar.background#0e291d
sideBar.border#34d39935
sideBar.foreground#f0fff7
sideBarSectionHeader.background#091710
sideBarSectionHeader.foreground#f0fff7
sideBarTitle.foreground#f0fff7
statusBar.background#144330
statusBar.border#34d39955
statusBar.foreground#f0fff7
statusBarItem.hoverBackground#34d39928
statusBarItem.remoteBackground#34d399
statusBarItem.remoteForeground#001018
tab.activeBackground#0a2419
tab.activeBorderTop#34d399
tab.activeForeground#f0fff7
tab.hoverBackground#34d39916
tab.inactiveBackground#08160f
tab.inactiveForeground#f0fff7A0
terminal.ansiCyan#34d399
terminal.ansiMagenta#84cc16
terminal.ansiYellow#d9f99d
terminal.background#05100b
terminal.foreground#f0fff7
terminalCursor.foreground#d9f99d
titleBar.activeBackground#08160f
titleBar.activeForeground#f0fff7
titleBar.inactiveBackground#05100b
titleBar.inactiveForeground#f0fff780
window.activeBorder#34d399
window.inactiveBorder#84cc1660

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#f0fff772	italic
string, constant.other.symbol	#84cc16	—
constant.numeric, constant.language, support.constant	#d9f99d	—
keyword, storage.type, storage.modifier	#34d399	bold
entity.name.function, support.function, meta.function-call	#34d399	—
entity.name.type, support.type, entity.name.class	#d9f99d	—
variable, identifier	#f0fff7	—
variable.parameter	#e8fdd8	—
punctuation, meta.brace	#f0fff7C0	—
invalid, invalid.illegal	#ffffff	—

VS Code preview

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

Haho Vs Code Premium — Haho Graphite Orange

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#ff8a00
activityBar.background#0d0d0d
activityBar.foreground#f8fafc
activityBar.inactiveForeground#f8fafc80
activityBarBadge.background#ff8a00
activityBarBadge.foreground#001018
badge.background#64748b
badge.foreground#ffffff
button.background#ff8a00
button.foreground#001018
button.hoverBackground#ff9f2e
button.secondaryBackground#462c0e
button.secondaryForeground#f8fafc
descriptionForeground#f8fafcB5
dropdown.background#0f0f0f
dropdown.border#ff8a0065
dropdown.foreground#f8fafc
editor.background#070707
editor.findMatchBackground#fbbf2455
editor.findMatchHighlightBackground#64748b35
editor.foreground#f8fafc
editor.lineHighlightBackground#ff8a0012
editor.selectionBackground#ff8a0035
editor.selectionHighlightBackground#64748b22
editorBracketMatch.border#fbbf24
editorCursor.foreground#fbbf24
editorGroup.border#ff8a0028
editorGroupHeader.tabsBackground#0a0a0a
editorGutter.addedBackground#64748b
editorGutter.background#070707
editorGutter.deletedBackground#ff4d6d
editorGutter.modifiedBackground#ff8a00
editorHoverWidget.background#121212
editorHoverWidget.border#ff8a0080
editorIndentGuide.activeBackground1#ff8a0080
editorIndentGuide.background1#f8fafc14
editorLineNumber.activeForeground#ff8a00
editorLineNumber.foreground#f8fafc55
editorSuggestWidget.background#121212
editorSuggestWidget.border#ff8a0080
editorSuggestWidget.foreground#f8fafc
editorSuggestWidget.selectedBackground#462c0e
editorWhitespace.foreground#f8fafc20
editorWidget.background#121212
editorWidget.border#ff8a0080
errorForeground#ff4d6d
focusBorder#ff8a00
foreground#f8fafc
icon.foreground#f8fafcD0
input.background#0f0f0f
input.border#ff8a0065
input.foreground#f8fafc
inputOption.activeBorder#ff8a00
list.activeSelectionBackground#462c0e
list.activeSelectionForeground#f8fafc
list.focusOutline#ff8a00
list.highlightForeground#fbbf24
list.hoverBackground#ff8a0014
list.inactiveSelectionBackground#ff8a0020
menu.background#121212
menu.border#ff8a0050
menu.foreground#f8fafc
menu.selectionBackground#462c0e
menu.selectionForeground#f8fafc
menubar.selectionBackground#ff8a0020
menubar.selectionForeground#f8fafc
minimap.background#070707
panel.background#251c11
panel.border#ff8a0035
panelTitle.activeBorder#ff8a00
panelTitle.activeForeground#f8fafc
panelTitle.inactiveForeground#f8fafc88
sash.hoverBorder#ff8a00
scrollbarSlider.activeBackground#ff8a0075
scrollbarSlider.background#ff8a0030
scrollbarSlider.hoverBackground#ff8a0055
sideBar.background#251c11
sideBar.border#ff8a0035
sideBar.foreground#f8fafc
sideBarSectionHeader.background#0e0e0e
sideBarSectionHeader.foreground#f8fafc
sideBarTitle.foreground#f8fafc
statusBar.background#462c0e
statusBar.border#ff8a0055
statusBar.foreground#f8fafc
statusBarItem.hoverBackground#ff8a0028
statusBarItem.remoteBackground#ff8a00
statusBarItem.remoteForeground#001018
tab.activeBackground#201406
tab.activeBorderTop#ff8a00
tab.activeForeground#f8fafc
tab.hoverBackground#ff8a0016
tab.inactiveBackground#0d0d0d
tab.inactiveForeground#f8fafcA0
terminal.ansiCyan#ff8a00
terminal.ansiMagenta#64748b
terminal.ansiYellow#fbbf24
terminal.background#070707
terminal.foreground#f8fafc
terminalCursor.foreground#fbbf24
titleBar.activeBackground#0d0d0d
titleBar.activeForeground#f8fafc
titleBar.inactiveBackground#070707
titleBar.inactiveForeground#f8fafc80
window.activeBorder#ff8a00
window.inactiveBorder#64748b60

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#f8fafc72	italic
string, constant.other.symbol	#64748b	—
constant.numeric, constant.language, support.constant	#fbbf24	—
keyword, storage.type, storage.modifier	#ff8a00	bold
entity.name.function, support.function, meta.function-call	#ff8a00	—
entity.name.type, support.type, entity.name.class	#fbbf24	—
variable, identifier	#f8fafc	—
variable.parameter	#f9e5b0	—
punctuation, meta.brace	#f8fafcC0	—
invalid, invalid.illegal	#ffffff	—