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 Ice Violet

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#67e8f9
activityBar.background#090e1c
activityBar.foreground#f4fbff
activityBar.inactiveForeground#f4fbff80
activityBarBadge.background#67e8f9
activityBarBadge.foreground#001018
badge.background#a78bfa
badge.foreground#ffffff
button.background#67e8f9
button.foreground#001018
button.hoverBackground#82ecfa
button.secondaryBackground#1f4050
button.secondaryForeground#f4fbff
descriptionForeground#f4fbffB5
dropdown.background#0a0f1e
dropdown.border#67e8f965
dropdown.foreground#f4fbff
editor.background#060b18
editor.findMatchBackground#ffffff55
editor.findMatchHighlightBackground#a78bfa35
editor.foreground#f4fbff
editor.lineHighlightBackground#67e8f912
editor.selectionBackground#67e8f935
editor.selectionHighlightBackground#a78bfa22
editorBracketMatch.border#ffffff
editorCursor.foreground#ffffff
editorGroup.border#67e8f928
editorGroupHeader.tabsBackground#070c1a
editorGutter.addedBackground#a78bfa
editorGutter.background#060b18
editorGutter.deletedBackground#ff4d6d
editorGutter.modifiedBackground#67e8f9
editorHoverWidget.background#0b1020
editorHoverWidget.border#67e8f980
editorIndentGuide.activeBackground1#67e8f980
editorIndentGuide.background1#f4fbff14
editorLineNumber.activeForeground#67e8f9
editorLineNumber.foreground#f4fbff55
editorSuggestWidget.background#0b1020
editorSuggestWidget.border#67e8f980
editorSuggestWidget.foreground#f4fbff
editorSuggestWidget.selectedBackground#1f4050
editorWhitespace.foreground#f4fbff20
editorWidget.background#0b1020
editorWidget.border#67e8f980
errorForeground#ff4d6d
focusBorder#67e8f9
foreground#f4fbff
icon.foreground#f4fbffD0
input.background#0a0f1e
input.border#67e8f965
input.foreground#f4fbff
inputOption.activeBorder#67e8f9
list.activeSelectionBackground#1f4050
list.activeSelectionForeground#f4fbff
list.focusOutline#67e8f9
list.highlightForeground#ffffff
list.hoverBackground#67e8f914
list.inactiveSelectionBackground#67e8f920
menu.background#0b1020
menu.border#67e8f950
menu.foreground#f4fbff
menu.selectionBackground#1f4050
menu.selectionForeground#f4fbff
menubar.selectionBackground#67e8f920
menubar.selectionForeground#f4fbff
minimap.background#060b18
panel.background#122131
panel.border#67e8f935
panelTitle.activeBorder#67e8f9
panelTitle.activeForeground#f4fbff
panelTitle.inactiveForeground#f4fbff88
sash.hoverBorder#67e8f9
scrollbarSlider.activeBackground#67e8f975
scrollbarSlider.background#67e8f930
scrollbarSlider.hoverBackground#67e8f955
sideBar.background#122131
sideBar.border#67e8f935
sideBar.foreground#f4fbff
sideBarSectionHeader.background#090e1d
sideBarSectionHeader.foreground#f4fbff
sideBarTitle.foreground#f4fbff
statusBar.background#1f4050
statusBar.border#67e8f955
statusBar.foreground#f4fbff
statusBarItem.hoverBackground#67e8f928
statusBarItem.remoteBackground#67e8f9
statusBarItem.remoteForeground#001018
tab.activeBackground#10212f
tab.activeBorderTop#67e8f9
tab.activeForeground#f4fbff
tab.hoverBackground#67e8f916
tab.inactiveBackground#090e1c
tab.inactiveForeground#f4fbffA0
terminal.ansiCyan#67e8f9
terminal.ansiMagenta#a78bfa
terminal.ansiYellow#ffffff
terminal.background#060b18
terminal.foreground#f4fbff
terminalCursor.foreground#ffffff
titleBar.activeBackground#090e1c
titleBar.activeForeground#f4fbff
titleBar.inactiveBackground#060b18
titleBar.inactiveForeground#f4fbff80
window.activeBorder#67e8f9
window.inactiveBorder#a78bfa60

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#f4fbff72	italic
string, constant.other.symbol	#a78bfa	—
constant.numeric, constant.language, support.constant	#ffffff	—
keyword, storage.type, storage.modifier	#67e8f9	bold
entity.name.function, support.function, meta.function-call	#67e8f9	—
entity.name.type, support.type, entity.name.class	#ffffff	—
variable, identifier	#f4fbff	—
variable.parameter	#f8fcff	—
punctuation, meta.brace	#f4fbffC0	—
invalid, invalid.illegal	#ffffff	—

VS Code preview

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

Haho Vs Code Premium — Haho Lava 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.activeBorder#f97316
activityBar.background#0c0c0d
activityBar.foreground#fff7ed
activityBar.inactiveForeground#fff7ed80
activityBarBadge.background#f97316
activityBarBadge.foreground#001018
badge.background#ef4444
badge.foreground#ffffff
button.background#f97316
button.foreground#001018
button.hoverBackground#fa8c40
button.secondaryBackground#432612
button.secondaryForeground#fff7ed
descriptionForeground#fff7edB5
dropdown.background#0d0d0e
dropdown.border#f9731665
dropdown.foreground#fff7ed
editor.background#060607
editor.findMatchBackground#facc1555
editor.findMatchHighlightBackground#ef444435
editor.foreground#fff7ed
editor.lineHighlightBackground#f9731612
editor.selectionBackground#f9731635
editor.selectionHighlightBackground#ef444422
editorBracketMatch.border#facc15
editorCursor.foreground#facc15
editorGroup.border#f9731628
editorGroupHeader.tabsBackground#09090a
editorGutter.addedBackground#ef4444
editorGutter.background#060607
editorGutter.deletedBackground#ff4d6d
editorGutter.modifiedBackground#f97316
editorHoverWidget.background#101011
editorHoverWidget.border#f9731680
editorIndentGuide.activeBackground1#f9731680
editorIndentGuide.background1#fff7ed14
editorLineNumber.activeForeground#f97316
editorLineNumber.foreground#fff7ed55
editorSuggestWidget.background#101011
editorSuggestWidget.border#f9731680
editorSuggestWidget.foreground#fff7ed
editorSuggestWidget.selectedBackground#432612
editorWhitespace.foreground#fff7ed20
editorWidget.background#101011
editorWidget.border#f9731680
errorForeground#ff4d6d
focusBorder#f97316
foreground#fff7ed
icon.foreground#fff7edD0
input.background#0d0d0e
input.border#f9731665
input.foreground#fff7ed
inputOption.activeBorder#f97316
list.activeSelectionBackground#432612
list.activeSelectionForeground#fff7ed
list.focusOutline#f97316
list.highlightForeground#facc15
list.hoverBackground#f9731614
list.inactiveSelectionBackground#f9731620
menu.background#101011
menu.border#f9731650
menu.foreground#fff7ed
menu.selectionBackground#432612
menu.selectionForeground#fff7ed
menubar.selectionBackground#f9731620
menubar.selectionForeground#fff7ed
minimap.background#060607
panel.background#231811
panel.border#f9731635
panelTitle.activeBorder#f97316
panelTitle.activeForeground#fff7ed
panelTitle.inactiveForeground#fff7ed88
sash.hoverBorder#f97316
scrollbarSlider.activeBackground#f9731675
scrollbarSlider.background#f9731630
scrollbarSlider.hoverBackground#f9731655
sideBar.background#231811
sideBar.border#f9731635
sideBar.foreground#fff7ed
sideBarSectionHeader.background#0d0d0e
sideBarSectionHeader.foreground#fff7ed
sideBarTitle.foreground#fff7ed
statusBar.background#432612
statusBar.border#f9731655
statusBar.foreground#fff7ed
statusBarItem.hoverBackground#f9731628
statusBarItem.remoteBackground#f97316
statusBarItem.remoteForeground#001018
tab.activeBackground#1e1109
tab.activeBorderTop#f97316
tab.activeForeground#fff7ed
tab.hoverBackground#f9731616
tab.inactiveBackground#0c0c0d
tab.inactiveForeground#fff7edA0
terminal.ansiCyan#f97316
terminal.ansiMagenta#ef4444
terminal.ansiYellow#facc15
terminal.background#060607
terminal.foreground#fff7ed
terminalCursor.foreground#facc15
titleBar.activeBackground#0c0c0d
titleBar.activeForeground#fff7ed
titleBar.inactiveBackground#060607
titleBar.inactiveForeground#fff7ed80
window.activeBorder#f97316
window.inactiveBorder#ef444460

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#fff7ed72	italic
string, constant.other.symbol	#ef4444	—
constant.numeric, constant.language, support.constant	#facc15	—
keyword, storage.type, storage.modifier	#f97316	bold
entity.name.function, support.function, meta.function-call	#f97316	—
entity.name.type, support.type, entity.name.class	#facc15	—
variable, identifier	#fff7ed	—
variable.parameter	#fde8a1	—
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 Midnight Sakura

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#ff7ab6
activityBar.background#130a18
activityBar.foreground#fff5fb
activityBar.inactiveForeground#fff5fb80
activityBarBadge.background#ff7ab6
activityBarBadge.foreground#001018
badge.background#c084fc
badge.foreground#ffffff
button.background#ff7ab6
button.foreground#001018
button.hoverBackground#ff92c3
button.secondaryBackground#4a253f
button.secondaryForeground#fff5fb
descriptionForeground#fff5fbB5
dropdown.background#140b1a
dropdown.border#ff7ab665
dropdown.foreground#fff5fb
editor.background#0d0712
editor.findMatchBackground#f9a8d455
editor.findMatchHighlightBackground#c084fc35
editor.foreground#fff5fb
editor.lineHighlightBackground#ff7ab612
editor.selectionBackground#ff7ab635
editor.selectionHighlightBackground#c084fc22
editorBracketMatch.border#f9a8d4
editorCursor.foreground#f9a8d4
editorGroup.border#ff7ab628
editorGroupHeader.tabsBackground#100915
editorGutter.addedBackground#c084fc
editorGutter.background#0d0712
editorGutter.deletedBackground#ff4d6d
editorGutter.modifiedBackground#ff7ab6
editorHoverWidget.background#170d1d
editorHoverWidget.border#ff7ab680
editorIndentGuide.activeBackground1#ff7ab680
editorIndentGuide.background1#fff5fb14
editorLineNumber.activeForeground#ff7ab6
editorLineNumber.foreground#fff5fb55
editorSuggestWidget.background#170d1d
editorSuggestWidget.border#ff7ab680
editorSuggestWidget.foreground#fff5fb
editorSuggestWidget.selectedBackground#4a253f
editorWhitespace.foreground#fff5fb20
editorWidget.background#170d1d
editorWidget.border#ff7ab680
errorForeground#ff4d6d
focusBorder#ff7ab6
foreground#fff5fb
icon.foreground#fff5fbD0
input.background#140b1a
input.border#ff7ab665
input.foreground#fff5fb
inputOption.activeBorder#ff7ab6
list.activeSelectionBackground#4a253f
list.activeSelectionForeground#fff5fb
list.focusOutline#ff7ab6
list.highlightForeground#f9a8d4
list.hoverBackground#ff7ab614
list.inactiveSelectionBackground#ff7ab620
menu.background#170d1d
menu.border#ff7ab650
menu.foreground#fff5fb
menu.selectionBackground#4a253f
menu.selectionForeground#fff5fb
menubar.selectionBackground#ff7ab620
menubar.selectionForeground#fff5fb
minimap.background#0d0712
panel.background#2a1629
panel.border#ff7ab635
panelTitle.activeBorder#ff7ab6
panelTitle.activeForeground#fff5fb
panelTitle.inactiveForeground#fff5fb88
sash.hoverBorder#ff7ab6
scrollbarSlider.activeBackground#ff7ab675
scrollbarSlider.background#ff7ab630
scrollbarSlider.hoverBackground#ff7ab655
sideBar.background#2a1629
sideBar.border#ff7ab635
sideBar.foreground#fff5fb
sideBarSectionHeader.background#140b19
sideBarSectionHeader.foreground#fff5fb
sideBarTitle.foreground#fff5fb
statusBar.background#4a253f
statusBar.border#ff7ab655
statusBar.foreground#fff5fb
statusBarItem.hoverBackground#ff7ab628
statusBarItem.remoteBackground#ff7ab6
statusBarItem.remoteForeground#001018
tab.activeBackground#251322
tab.activeBorderTop#ff7ab6
tab.activeForeground#fff5fb
tab.hoverBackground#ff7ab616
tab.inactiveBackground#130a18
tab.inactiveForeground#fff5fbA0
terminal.ansiCyan#ff7ab6
terminal.ansiMagenta#c084fc
terminal.ansiYellow#f9a8d4
terminal.background#0d0712
terminal.foreground#fff5fb
terminalCursor.foreground#f9a8d4
titleBar.activeBackground#130a18
titleBar.activeForeground#fff5fb
titleBar.inactiveBackground#0d0712
titleBar.inactiveForeground#fff5fb80
window.activeBorder#ff7ab6
window.inactiveBorder#c084fc60

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#fff5fb72	italic
string, constant.other.symbol	#c084fc	—
constant.numeric, constant.language, support.constant	#f9a8d4	—
keyword, storage.type, storage.modifier	#ff7ab6	bold
entity.name.function, support.function, meta.function-call	#ff7ab6	—
entity.name.type, support.type, entity.name.class	#f9a8d4	—
variable, identifier	#fff5fb	—
variable.parameter	#fddaed	—
punctuation, meta.brace	#fff5fbC0	—
invalid, invalid.illegal	#ffffff	—

VS Code preview

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

Haho Vs Code Premium — Haho Mono Lux

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#e5e7eb
activityBar.background#0d0f13
activityBar.foreground#f8fafc
activityBar.inactiveForeground#f8fafc80
activityBarBadge.background#e5e7eb
activityBarBadge.foreground#001018
badge.background#94a3b8
badge.foreground#ffffff
button.background#e5e7eb
button.foreground#001018
button.hoverBackground#eaebef
button.secondaryBackground#404246
button.secondaryForeground#f8fafc
descriptionForeground#f8fafcB5
dropdown.background#0e1014
dropdown.border#e5e7eb65
dropdown.foreground#f8fafc
editor.background#08090c
editor.findMatchBackground#38bdf855
editor.findMatchHighlightBackground#94a3b835
editor.foreground#f8fafc
editor.lineHighlightBackground#e5e7eb12
editor.selectionBackground#e5e7eb35
editor.selectionHighlightBackground#94a3b822
editorBracketMatch.border#38bdf8
editorCursor.foreground#38bdf8
editorGroup.border#e5e7eb28
editorGroupHeader.tabsBackground#0a0c0f
editorGutter.addedBackground#94a3b8
editorGutter.background#08090c
editorGutter.deletedBackground#ff4d6d
editorGutter.modifiedBackground#e5e7eb
editorHoverWidget.background#111318
editorHoverWidget.border#e5e7eb80
editorIndentGuide.activeBackground1#e5e7eb80
editorIndentGuide.background1#f8fafc14
editorLineNumber.activeForeground#e5e7eb
editorLineNumber.foreground#f8fafc55
editorSuggestWidget.background#111318
editorSuggestWidget.border#e5e7eb80
editorSuggestWidget.foreground#f8fafc
editorSuggestWidget.selectedBackground#404246
editorWhitespace.foreground#f8fafc20
editorWidget.background#111318
editorWidget.border#e5e7eb80
errorForeground#ff4d6d
focusBorder#e5e7eb
foreground#f8fafc
icon.foreground#f8fafcD0
input.background#0e1014
input.border#e5e7eb65
input.foreground#f8fafc
inputOption.activeBorder#e5e7eb
list.activeSelectionBackground#404246
list.activeSelectionForeground#f8fafc
list.focusOutline#e5e7eb
list.highlightForeground#38bdf8
list.hoverBackground#e5e7eb14
list.inactiveSelectionBackground#e5e7eb20
menu.background#111318
menu.border#e5e7eb50
menu.foreground#f8fafc
menu.selectionBackground#404246
menu.selectionForeground#f8fafc
menubar.selectionBackground#e5e7eb20
menubar.selectionForeground#f8fafc
minimap.background#08090c
panel.background#222429
panel.border#e5e7eb35
panelTitle.activeBorder#e5e7eb
panelTitle.activeForeground#f8fafc
panelTitle.inactiveForeground#f8fafc88
sash.hoverBorder#e5e7eb
scrollbarSlider.activeBackground#e5e7eb75
scrollbarSlider.background#e5e7eb30
scrollbarSlider.hoverBackground#e5e7eb55
sideBar.background#222429
sideBar.border#e5e7eb35
sideBar.foreground#f8fafc
sideBarSectionHeader.background#0e1014
sideBarSectionHeader.foreground#f8fafc
sideBarTitle.foreground#f8fafc
statusBar.background#404246
statusBar.border#e5e7eb55
statusBar.foreground#f8fafc
statusBarItem.hoverBackground#e5e7eb28
statusBarItem.remoteBackground#e5e7eb
statusBarItem.remoteForeground#001018
tab.activeBackground#1e1f22
tab.activeBorderTop#e5e7eb
tab.activeForeground#f8fafc
tab.hoverBackground#e5e7eb16
tab.inactiveBackground#0d0f13
tab.inactiveForeground#f8fafcA0
terminal.ansiCyan#e5e7eb
terminal.ansiMagenta#94a3b8
terminal.ansiYellow#38bdf8
terminal.background#08090c
terminal.foreground#f8fafc
terminalCursor.foreground#38bdf8
titleBar.activeBackground#0d0f13
titleBar.activeForeground#f8fafc
titleBar.inactiveBackground#08090c
titleBar.inactiveForeground#f8fafc80
window.activeBorder#e5e7eb
window.inactiveBorder#94a3b860

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#f8fafc72	italic
string, constant.other.symbol	#94a3b8	—
constant.numeric, constant.language, support.constant	#38bdf8	—
keyword, storage.type, storage.modifier	#e5e7eb	bold
entity.name.function, support.function, meta.function-call	#e5e7eb	—
entity.name.type, support.type, entity.name.class	#38bdf8	—
variable, identifier	#f8fafc	—
variable.parameter	#b5e5fb	—
punctuation, meta.brace	#f8fafcC0	—
invalid, invalid.illegal	#ffffff	—