Horizon Ultimate Themes

Name: Horizon Ultimate Themes
Author: Horizon

Publisher: HorizonThemes in package: 49

A collection of Horizon Themes with Core and Gamers editions, all paired with Horizon Icons and HorizonTags.

GitHub

Color themes

VS Code preview

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

Horizon Ultimate Themes — Horizon Themes Core: Dark Plus

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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#0E0F10
activityBar.border#E0E2F20D
activityBar.foreground#D1D3DB
activityBar.inactiveForeground#4A4F5A
activityBarBadge.background#32F08C
activityBarBadge.foreground#0C0C0D
badge.background#32F08C
badge.foreground#0C0C0D
breadcrumb.activeSelectionForeground#F5F9FE
breadcrumb.focusForeground#D1D3DB
breadcrumb.foreground#4A4F5A
breadcrumbPicker.background#1A1B1D
button.background#32F08C
button.foreground#0C0C0D
button.hoverBackground#0FDC78
button.secondaryBackground#E0E2F214
button.secondaryForeground#D1D3DB
button.secondaryHoverBackground#E0E2F21F
commandCenter.activeBorder#32F08C
commandCenter.activeForeground#D1D3DB
commandCenter.background#E0E2F20D
commandCenter.border#E0E2F217
commandCenter.foreground#9599A6
commandCenter.inactiveBorder#E0E2F20D
debugConsole.errorForeground#F65A5A
debugConsole.infoForeground#6BA4FF
debugConsole.warningForeground#DC8730
debugIcon.breakpointDisabledForeground#4A4F5A
debugIcon.breakpointForeground#F65A5A
debugIcon.continueForeground#32F08C
debugIcon.startForeground#32F08C
debugIcon.stepIntoForeground#6BA4FF
debugIcon.stepOutForeground#6BA4FF
debugIcon.stepOverForeground#6BA4FF
debugIcon.stopForeground#F65A5A
debugToolBar.background#1A1B1D
debugToolBar.border#E0E2F217
descriptionForeground#9599A6
diffEditor.insertedLineBackground#00A56E21
diffEditor.insertedTextBackground#00A56E3D
diffEditor.removedLineBackground#D02A2321
diffEditor.removedTextBackground#D02A233D
disabledForeground#4A4F5A
editor.background#1A1B1D
editor.findMatchBackground#3579FF5C
editor.findMatchHighlightBackground#3579FF2E
editor.findRangeHighlightBackground#3579FF14
editor.foreground#D1D3DB
editor.hoverHighlightBackground#3579FF21
editor.inactiveSelectionBackground#3579FF2E
editor.lineHighlightBackground#222427
editor.selectionBackground#3579FF47
editor.selectionHighlightBackground#3579FF21
editor.wordHighlightBackground#E0E2F214
editor.wordHighlightStrongBackground#E0E2F21F
editorBracketMatch.background#3579FF2E
editorBracketMatch.border#3579FF5C
editorBracketPairGuide.background1#E0E2F217
editorBracketPairGuide.background2#E0E2F217
editorBracketPairGuide.background3#E0E2F217
editorBracketPairGuide.background4#E0E2F217
editorBracketPairGuide.background5#E0E2F217
editorBracketPairGuide.background6#E0E2F217
editorCursor.background#1A1B1D
editorCursor.foreground#32F08C
editorGroupHeader.tabsBackground#111213
editorGroupHeader.tabsBorder#E0E2F20D
editorHoverWidget.background#222427
editorHoverWidget.border#E0E2F217
editorHoverWidget.foreground#D1D3DB
editorHoverWidget.highlightForeground#F5F9FE
editorHoverWidget.statusBarBackground#2A2D31
editorIndentGuide.activeBackground1#E0E2F22E
editorIndentGuide.background1#E0E2F217
editorLineNumber.activeForeground#D1D3DB
editorLineNumber.foreground#4A4F5A
editorLink.activeForeground#6BA4FF
editorRuler.foreground#E0E2F217
editorStickyScrollHover.background#222427
editorSuggestWidget.background#222427
editorSuggestWidget.border#E0E2F217
editorSuggestWidget.focusHighlightForeground#32F08C
editorSuggestWidget.foreground#D1D3DB
editorSuggestWidget.highlightForeground#32F08C
editorSuggestWidget.selectedBackground#E0E2F214
editorSuggestWidget.selectedForeground#F5F9FE
editorUnnecessaryCode.opacity#00000080
editorWhitespace.foreground#E0E2F214
errorForeground#F65A5A
focusBorder#32F08C47
foreground#D1D3DB
icon.foreground#8D93A6
input.background#E0E2F20D
input.border#E0E2F217
input.foreground#D1D3DB
input.placeholderForeground#4A4F5A
inputOption.activeBackground#32F08C21
inputOption.activeBorder#32F08C
inputOption.activeForeground#F5F9FE
inputValidation.errorBackground#D02A2321
inputValidation.errorBorder#F65A5A
inputValidation.warningBackground#DC873021
inputValidation.warningBorder#DC8730
list.activeSelectionBackground#E0E2F214
list.activeSelectionForeground#F5F9FE
list.dropBackground#E0E2F20D
list.errorForeground#F65A5A
list.highlightForeground#32F08C
list.hoverBackground#E0E2F20D
list.hoverForeground#D1D3DB
list.inactiveSelectionBackground#E0E2F20D
list.inactiveSelectionForeground#D1D3DB
list.warningForeground#DC8730
listFilterWidget.background#222427
listFilterWidget.outline#32F08C
menu.background#1A1B1D
menu.border#E0E2F217
menu.foreground#D1D3DB
menu.selectionBackground#E0E2F214
menu.selectionForeground#F5F9FE
menu.separatorBackground#E0E2F217
notifications.background#1A1B1D
notifications.border#E0E2F217
notifications.foreground#D1D3DB
notificationsErrorIcon.foreground#F65A5A
notificationsInfoIcon.foreground#6BA4FF
notificationsWarningIcon.foreground#DC8730
panel.background#111213
panel.border#E0E2F217
panelSectionHeader.background#0E0F10
panelSectionHeader.border#E0E2F217
panelSectionHeader.foreground#737780
panelTitle.activeBorder#32F08C
panelTitle.activeForeground#F5F9FE
panelTitle.inactiveForeground#4A4F5A
pickerGroup.border#E0E2F217
pickerGroup.foreground#32F08C
progressBar.background#32F08C
quickInput.background#111213
quickInput.foreground#D1D3DB
quickInputList.focusBackground#E0E2F214
quickInputList.focusForeground#F5F9FE
quickInputTitle.background#0E0F10
sash.hoverBorder#32F08C
scrollbar.shadow#00000029
scrollbarSlider.activeBackground#E0E2F240
scrollbarSlider.background#E0E2F21F
scrollbarSlider.hoverBackground#E0E2F22E
search.resultsInfoForeground#4A4F5A
selection.background#3579FF47
settings.checkboxBackground#222427
settings.checkboxBorder#E0E2F217
settings.dropdownBackground#222427
settings.dropdownBorder#E0E2F217
settings.dropdownForeground#D1D3DB
settings.headerBorder#E0E2F217
settings.headerForeground#F5F9FE
settings.modifiedItemIndicator#32F08C
settings.textInputBackground#E0E2F20D
settings.textInputBorder#E0E2F217
sideBar.background#111213
sideBar.border#E0E2F20D
sideBar.foreground#9599A6
sideBarSectionHeader.background#0E0F10
sideBarSectionHeader.border#E0E2F217
sideBarSectionHeader.foreground#737780
sideBarTitle.foreground#4A4F5A
statusBar.background#0B0C0D
statusBar.border#E0E2F20D
statusBar.debuggingBackground#D02A23
statusBar.debuggingForeground#ffffff
statusBar.foreground#737780
statusBar.noFolderBackground#0B0C0D
symbolIcon.classForeground#DCB364
symbolIcon.functionForeground#6BA4FF
symbolIcon.keywordForeground#EC93FF
symbolIcon.methodForeground#BFA5FF
symbolIcon.variableForeground#D1D3DB
tab.activeBackground#1A1B1D
tab.activeBorder#1A1B1D
tab.activeBorderTop#32F08C
tab.activeForeground#F5F9FE
tab.border#E0E2F20D
tab.hoverBackground#E0E2F20D
tab.inactiveBackground#111213
tab.inactiveForeground#4A4F5A
tab.unfocusedActiveForeground#9599A6
terminal.ansiBlack#1A1B1D
terminal.ansiBlue#6BA4FF
terminal.ansiCyan#04CBE5
terminal.ansiGreen#32F08C
terminal.ansiMagenta#EC93FF
terminal.ansiRed#F65A5A
terminal.ansiWhite#D1D3DB
terminal.ansiYellow#DCB364
terminal.background#1A1B1D
terminal.foreground#D1D3DB
terminal.selectionBackground#3579FF47
textBlockQuote.background#E0E2F20D
textBlockQuote.border#32F08C
textCodeBlock.background#111213
textLink.activeForeground#9DC4FF
textLink.foreground#6BA4FF
titleBar.activeBackground#111213
titleBar.activeForeground#D1D3DB
titleBar.border#E0E2F20D
titleBar.inactiveBackground#0E0F10
titleBar.inactiveForeground#4A4F5A
toolbar.activeBackground#E0E2F214
toolbar.hoverBackground#E0E2F20D
tree.inactiveIndentGuidesStroke#E0E2F20D
tree.indentGuidesStroke#E0E2F217
widget.shadow#00000029

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#4A4F5A	italic
keyword, storage.type, storage.modifier, keyword.control	#EC93FF	—
string, string.quoted, string.template	#32F08C	—
constant.character.escape	#04CBE5	—
constant.numeric	#DCB364	—
constant.language, variable.other.constant	#FF9392	—
entity.name.function, support.function	#6BA4FF	—
entity.name.class, entity.name.type, support.class, entity.name.namespace	#DCB364	—
variable.parameter	#FF9392	italic
variable, variable.other, variable.other.readwrite	#D1D3DB	—
keyword.operator	#04CBE5	—
punctuation	#737780	—
entity.name.tag	#FF9392	—
entity.other.attribute-name	#DCB364	—
support.type.property-name	#6BA4FF	—
support.constant.property-value	#32F08C	—
keyword.control.import, keyword.control.export, keyword.control.from	#EC93FF	—
meta.decorator, punctuation.decorator	#BFA5FF	—
entity.name.type.alias, support.type	#7BB8FF	—
string.regexp	#04CBE5	—
support.class.component	#DCB364	—
meta.object-literal.key, support.type.property-name.json	#7BB8FF	—
invalid, invalid.illegal	#F65A5A	underline

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

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}!`;
}