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 — Genshin Impact - Layla

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#5357ae
activityBar.foreground#e8f4fa
activityBar.inactiveForeground#8898b8
activityBarBadge.background#c0e9f7
activityBarBadge.foreground#FFFFFF
badge.background#c0e9f7
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#5f689d
breadcrumb.background#f0f8fc
breadcrumb.focusForeground#2a3858
breadcrumb.foreground#6a7098
button.background#5f689d
button.foreground#FFFFFF
button.hoverBackground#4a5a9f
button.secondaryBackground#5357ae
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#0f1a3f
charts.blue#8898c8
charts.foreground#2a3858
charts.green#7ab8aa
charts.lines#d8ecf8
charts.orange#c0e9f7
charts.purple#98b8e8
charts.red#d88098
charts.yellow#ddab6d
checkbox.background#FFFFFF
checkbox.border#c8dce8
checkbox.foreground#2a3858
checkbox.selectBackground#5f689d
checkbox.selectBorder#5f689d
commandCenter.activeBackground#d8ecf8
commandCenter.activeBorder#5f689d
commandCenter.activeForeground#5f689d
commandCenter.background#f0f8fc
commandCenter.border#d8ecf8
commandCenter.debuggingBackground#5f689d20
commandCenter.foreground#2a3858
commandCenter.inactiveBorder#d8ecf880
commandCenter.inactiveForeground#6a7098
debugConsole.errorForeground#d88098
debugConsole.infoForeground#8898c8
debugConsole.sourceForeground#6a7098
debugConsole.warningForeground#ddab6d
debugConsoleInputIcon.foreground#5f689d
debugIcon.breakpointCurrentStackframeForeground#5f689d
debugIcon.breakpointDisabledForeground#b8c8d8
debugIcon.breakpointForeground#d88098
debugIcon.breakpointStackframeForeground#7ab8aa
debugIcon.breakpointUnverifiedForeground#ddab6d
debugIcon.continueForeground#7ab8aa
debugIcon.disconnectForeground#d88098
debugIcon.pauseForeground#ddab6d
debugIcon.restartForeground#7ab8aa
debugIcon.startForeground#7ab8aa
debugIcon.stepBackForeground#5f689d
debugIcon.stepIntoForeground#5f689d
debugIcon.stepOutForeground#5f689d
debugIcon.stepOverForeground#5f689d
debugIcon.stopForeground#d88098
debugTokenExpression.boolean#5f689d
debugTokenExpression.error#d88098
debugTokenExpression.name#2a3858
debugTokenExpression.number#98b8e8
debugTokenExpression.string#2a3060
debugTokenExpression.value#5f689d
debugToolBar.background#f0f8fc
debugToolBar.border#d8ecf8
debugView.exceptionLabelBackground#d88098
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#5f689d
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#5f689d60
descriptionForeground#6a7098
diffEditor.diagonalFill#d8ecf840
diffEditor.insertedLineBackground#7ab8aa15
diffEditor.insertedTextBackground#7ab8aa20
diffEditor.insertedTextBorder#7ab8aa00
diffEditor.removedLineBackground#d8809815
diffEditor.removedTextBackground#d8809820
diffEditor.removedTextBorder#d8809800
diffEditorGutter.insertedLineBackground#7ab8aa30
diffEditorGutter.removedLineBackground#d8809830
diffEditorOverview.insertedForeground#7ab8aa
diffEditorOverview.removedForeground#d88098
dropdown.background#FFFFFF
dropdown.border#c8dce8
dropdown.foreground#2a3858
dropdown.listBackground#FFFFFF
editor.background#f8fcfe
editor.findMatchBackground#c0e9f750
editor.findMatchHighlightBackground#c0e9f725
editor.focusedStackFrameHighlightBackground#7ab8aa30
editor.foldBackground#c0e9f715
editor.foreground#2a3858
editor.lineHighlightBackground#f0f8fc
editor.lineHighlightBorder#d8ecf820
editor.selectionBackground#c0e9f740
editor.stackFrameHighlightBackground#ddab6d30
editor.wordHighlightBackground#c0e9f720
editor.wordHighlightStrongBackground#c0e9f740
editorBracketHighlight.foreground1#5f689d
editorBracketHighlight.foreground2#c0e9f7
editorBracketHighlight.foreground3#8898c8
editorBracketHighlight.foreground4#7ab8aa
editorBracketHighlight.foreground5#ddab6d
editorBracketHighlight.foreground6#98b8e8
editorBracketHighlight.unexpectedBracket.foreground#d88098
editorBracketMatch.background#c0e9f730
editorBracketMatch.border#5f689d
editorCodeLens.foreground#8898b8
editorCursor.foreground#5f689d
editorError.border#d8809800
editorError.foreground#d88098
editorGroup.border#d8ecf8
editorGroup.dropBackground#5f689d30
editorGroup.dropIntoPromptBackground#f0f8fc
editorGroup.dropIntoPromptBorder#5f689d
editorGroup.dropIntoPromptForeground#2a3858
editorGroup.emptyBackground#f0f8fc
editorGroup.focusedEmptyBorder#5f689d
editorGroupHeader.tabsBackground#f0f8fc
editorGutter.addedBackground#7ab8aa
editorGutter.deletedBackground#d88098
editorGutter.modifiedBackground#8898c8
editorHint.border#7ab8aa00
editorHint.foreground#7ab8aa
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#d8ecf8
editorIndentGuide.activeBackground1#5f689d
editorIndentGuide.background1#d8ecf8
editorInfo.border#5f689d00
editorInfo.foreground#5f689d
editorInlayHint.background#d8ecf880
editorInlayHint.foreground#6a7098
editorInlayHint.parameterForeground#c0e9f7
editorInlayHint.typeForeground#5f689d
editorLineNumber.activeForeground#5f689d
editorLineNumber.foreground#8898b8
editorOverviewRuler.addedForeground#7ab8aa
editorOverviewRuler.background#f0f8fc
editorOverviewRuler.border#d8ecf8
editorOverviewRuler.bracketMatchForeground#5f689d
editorOverviewRuler.commonContentForeground#6a7098
editorOverviewRuler.currentContentForeground#7ab8aa
editorOverviewRuler.deletedForeground#d88098
editorOverviewRuler.errorForeground#d88098
editorOverviewRuler.findMatchForeground#5f689d80
editorOverviewRuler.incomingContentForeground#98b8e8
editorOverviewRuler.infoForeground#8898c8
editorOverviewRuler.modifiedForeground#98b8e8
editorOverviewRuler.rangeHighlightForeground#5f689d40
editorOverviewRuler.selectionHighlightForeground#5f689d60
editorOverviewRuler.warningForeground#ddab6d
editorOverviewRuler.wordHighlightForeground#5f689d60
editorOverviewRuler.wordHighlightStrongForeground#5f689d80
editorStickyScroll.background#f0f8fc
editorStickyScrollHover.background#d8ecf8
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.foreground#2a3858
editorSuggestWidget.highlightForeground#5f689d
editorSuggestWidget.selectedBackground#d8ecf8
editorWarning.border#ddab6d00
editorWarning.foreground#ddab6d
editorWhitespace.foreground#c8dce8
editorWidget.background#f0f8fc
editorWidget.border#d8ecf8
editorWidget.foreground#2a3858
errorForeground#d88098
extensionBadge.remoteBackground#5f689d
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#5f689d
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#5357ae
extensionIcon.preReleaseForeground#c0e9f7
extensionIcon.sponsorForeground#5f689d
extensionIcon.starForeground#ddab6d
extensionIcon.verifiedForeground#7ab8aa
focusBorder#5f689d
gitDecoration.addedResourceForeground#7ab8aa
gitDecoration.conflictingResourceForeground#d88098
gitDecoration.deletedResourceForeground#d88098
gitDecoration.ignoredResourceForeground#b8c8d8
gitDecoration.modifiedResourceForeground#8898c8
gitDecoration.untrackedResourceForeground#ddab6d
icon.foreground#2a3858
input.background#FFFFFF
input.border#c8dce8
input.foreground#2a3858
input.placeholderForeground#8898b880
inputOption.activeBackground#5f689d
inputOption.activeForeground#FFFFFF
keybindingLabel.background#d8ecf8
keybindingLabel.border#d8ecf8
keybindingLabel.bottomBorder#5f689d
keybindingLabel.foreground#2a3858
list.activeSelectionBackground#5f689d
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#c0e9f730
list.focusForeground#2a3858
list.hoverBackground#d8ecf8
list.hoverForeground#2a3858
list.inactiveSelectionBackground#d8ecf880
list.inactiveSelectionForeground#2a3858
menu.background#FFFFFF
menu.border#d8ecf8
menu.foreground#2a3858
menu.selectionBackground#5f689d
menu.selectionBorder#5f689d00
menu.selectionForeground#FFFFFF
menu.separatorBackground#d8ecf8
menubar.selectionBackground#d8ecf8
menubar.selectionForeground#2a3858
merge.border#d8ecf8
merge.commonContentBackground#6a709820
merge.commonHeaderBackground#6a709840
merge.currentContentBackground#7ab8aa20
merge.currentHeaderBackground#7ab8aa40
merge.incomingContentBackground#98b8e820
merge.incomingHeaderBackground#98b8e840
mergeEditor.change.background#98b8e820
mergeEditor.change.word.background#98b8e840
mergeEditor.conflict.handledFocused.border#7ab8aa
mergeEditor.conflict.handledUnfocused.border#7ab8aa80
mergeEditor.conflict.unhandledFocused.border#ddab6d
mergeEditor.conflict.unhandledUnfocused.border#ddab6d80
minimap.background#f0f8fc
minimap.selectionHighlight#c0e9f750
notifications.background#FFFFFF
notifications.border#d8ecf8
notifications.foreground#2a3858
notificationsErrorIcon.foreground#d88098
notificationsInfoIcon.foreground#5f689d
notificationsWarningIcon.foreground#ddab6d
panel.background#f0f8fc
panel.border#d8ecf8
panelTitle.activeBorder#5f689d
panelTitle.activeForeground#2a3858
panelTitle.inactiveForeground#6a7098
peekView.border#5f689d
peekViewEditor.background#f0f8fc
peekViewResult.background#f0f8fc
peekViewResult.matchHighlightBackground#c0e9f750
peekViewTitle.background#5357ae
peekViewTitleLabel.foreground#e8f4fa
progressBar.background#5f689d
quickInput.background#f0f8fc
quickInput.foreground#2a3858
quickInputList.focusBackground#5f689d
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#5357ae
scrollbarSlider.activeBackground#5f689d
scrollbarSlider.background#c8dce850
scrollbarSlider.hoverBackground#c8dce8
selection.background#c0e9f750
settings.checkboxBackground#FFFFFF
settings.checkboxBorder#5f689d
settings.checkboxForeground#2a3858
settings.dropdownBackground#FFFFFF
settings.dropdownBorder#d8ecf8
settings.dropdownForeground#2a3858
settings.dropdownListBorder#d8ecf8
settings.focusedRowBackground#d8ecf840
settings.focusedRowBorder#5f689d80
settings.headerForeground#2a3858
settings.modifiedItemIndicator#5f689d
settings.numberInputBackground#FFFFFF
settings.numberInputBorder#5f689d
settings.numberInputForeground#2a3858
settings.rowHoverBackground#d8ecf820
settings.sashBorder#d8ecf8
settings.textInputBackground#FFFFFF
settings.textInputBorder#5f689d
settings.textInputForeground#2a3858
sideBar.background#f0f8fc
sideBar.border#d8ecf8
sideBar.foreground#2a3858
sideBarSectionHeader.background#d8ecf8
sideBarSectionHeader.foreground#2a3858
sideBarTitle.foreground#5f689d
statusBar.background#5f689d
statusBar.debuggingBackground#5357ae
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#2a3f6f
statusBar.noFolderForeground#e8f4fa
symbolIcon.arrayForeground#2a3858
symbolIcon.booleanForeground#5f689d
symbolIcon.classForeground#8898c8
symbolIcon.colorForeground#c0e9f7
symbolIcon.constantForeground#98b8e8
symbolIcon.constructorForeground#5f689d
symbolIcon.enumeratorForeground#ddab6d
symbolIcon.enumeratorMemberForeground#98b8e8
symbolIcon.eventForeground#ddab6d
symbolIcon.fieldForeground#8898c8
symbolIcon.fileForeground#6a7098
symbolIcon.folderForeground#ddab6d
symbolIcon.functionForeground#5f689d
symbolIcon.interfaceForeground#7ab8aa
symbolIcon.keyForeground#2a3858
symbolIcon.keywordForeground#5f689d
symbolIcon.methodForeground#5f689d
symbolIcon.moduleForeground#8898c8
symbolIcon.namespaceForeground#8898c8
symbolIcon.nullForeground#d88098
symbolIcon.numberForeground#98b8e8
symbolIcon.objectForeground#2a3858
symbolIcon.operatorForeground#6a7098
symbolIcon.packageForeground#8898c8
symbolIcon.propertyForeground#8898c8
symbolIcon.referenceForeground#98b8e8
symbolIcon.snippetForeground#6a7098
symbolIcon.stringForeground#2a3060
symbolIcon.structForeground#2a3858
symbolIcon.textForeground#2a3858
symbolIcon.typeParameterForeground#7ab8aa
symbolIcon.unitForeground#98b8e8
symbolIcon.variableForeground#8898c8
tab.activeBackground#f8fcfe
tab.activeBorder#5f689d
tab.activeForeground#5f689d
tab.border#d8ecf8
tab.hoverBackground#f8fcfe
tab.hoverForeground#5f689d
tab.inactiveBackground#f0f8fc
tab.inactiveForeground#6a7098
terminal.ansiBlack#2a3858
terminal.ansiBlue#5f689d
terminal.ansiBrightBlack#6a7098
terminal.ansiBrightBlue#98acd8
terminal.ansiBrightCyan#7dc5f0
terminal.ansiBrightGreen#9ac8ba
terminal.ansiBrightMagenta#98b8e8
terminal.ansiBrightRed#e890a8
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#e8c898
terminal.ansiCyan#c0e9f7
terminal.ansiGreen#7ab8aa
terminal.ansiMagenta#8898c8
terminal.ansiRed#d88098
terminal.ansiWhite#d8ecf8
terminal.ansiYellow#ddab6d
terminal.background#f8fcfe
terminal.foreground#2a3858
testing.iconErrored#d88098
testing.iconFailed#d88098
testing.iconPassed#7ab8aa
testing.iconQueued#ddab6d
testing.iconSkipped#b8c8d8
testing.iconUnset#b8c8d8
testing.peekBorder#d88098
testing.peekHeaderBackground#d8809820
testing.runAction#7ab8aa
textLink.activeForeground#4a5a9f
textLink.foreground#5f689d
titleBar.activeBackground#5357ae
titleBar.activeForeground#e8f4fa
titleBar.inactiveBackground#f0f8fc
titleBar.inactiveForeground#6a7098
walkThrough.embeddedEditorBackground#f0f8fc
welcomePage.background#f8fcfe
welcomePage.progress.background#d8ecf8
welcomePage.progress.foreground#5f689d
welcomePage.tileBackground#f0f8fc
welcomePage.tileBorder#d8ecf8
welcomePage.tileHoverBackground#d8ecf8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8a9fb8	italic
keyword, storage	#5f689d	bold
keyword.control, keyword.control.flow	#4a5a9f	bold
entity.name.function, support.function	#8898c8	bold
entity.name.type, support.class, support.type, storage.type	#5357ae	bold
string	#2a3060	—
constant.character.escape	#d88098	—
variable, support.variable	#2a3858	—
variable.parameter	#4a5a8f	italic
constant.numeric, constant.character, constant	#98b8e8	—
constant.language, support.constant, variable.language	#5f689d	—
keyword.operator	#4a5a8f	—
punctuation	#6a7098	—
entity.name.tag	#5f689d	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#c0e9f7	italic
meta.selector, entity.name.tag.css	#2a3858	—
meta.property-name, support.type.property-name	#5f689d	—
meta.property-value, support.constant.property-value	#2a3060	—
keyword.other.unit	#98b8e8	—
markup.heading	#5f689d	bold
markup.bold	#2a3858	bold
markup.italic	#2a3858	italic
meta.link	#c0e9f7	—
markup.list	#5f689d	—
markup.inline.raw	#2a3060	—
markup.inserted	#7ab8aa	—
markup.deleted	#d88098	—
markup.changed	#98b8e8	—
support.type.property-name.json	#5f689d	—
entity.name.tag.yaml	#c0e9f7	—
string.regexp	#d88098	—
meta.decorator, meta.annotation	#ddab6d	italic

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