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

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#355bf5
activityBar.foreground#f0f4ff
activityBar.inactiveForeground#b5fdff90
activityBarBadge.background#b183fc
activityBarBadge.foreground#FFFFFF
badge.background#b183fc
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#5a45e4
breadcrumb.background#f0f2fd
breadcrumb.focusForeground#2d2272
breadcrumb.foreground#6a5ac0
button.background#5a45e4
button.foreground#FFFFFF
button.hoverBackground#4a3ab0
button.secondaryBackground#355bf5
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#0f1a3f
charts.blue#7a65f0
charts.foreground#2d2272
charts.green#b5fdff
charts.lines#e0e4fc
charts.orange#b183fc
charts.purple#9880f0
charts.red#efadca
charts.yellow#d8a878
checkbox.background#FFFFFF
checkbox.border#dadcf0
checkbox.foreground#2d2272
checkbox.selectBackground#5a45e4
checkbox.selectBorder#5a45e4
commandCenter.activeBackground#e0e4fc
commandCenter.activeBorder#5a45e4
commandCenter.activeForeground#5a45e4
commandCenter.background#f0f2fd
commandCenter.border#e0e4fc
commandCenter.debuggingBackground#5a45e420
commandCenter.foreground#2d2272
commandCenter.inactiveBorder#e0e4fc80
commandCenter.inactiveForeground#6a5ac0
debugConsole.errorForeground#efadca
debugConsole.infoForeground#7a65f0
debugConsole.sourceForeground#6a5ac0
debugConsole.warningForeground#d8a878
debugConsoleInputIcon.foreground#5a45e4
debugIcon.breakpointCurrentStackframeForeground#5a45e4
debugIcon.breakpointDisabledForeground#b8a8c8
debugIcon.breakpointForeground#efadca
debugIcon.breakpointStackframeForeground#b5fdff
debugIcon.breakpointUnverifiedForeground#d8a878
debugIcon.continueForeground#b5fdff
debugIcon.disconnectForeground#efadca
debugIcon.pauseForeground#d8a878
debugIcon.restartForeground#b5fdff
debugIcon.startForeground#b5fdff
debugIcon.stepBackForeground#5a45e4
debugIcon.stepIntoForeground#5a45e4
debugIcon.stepOutForeground#5a45e4
debugIcon.stepOverForeground#5a45e4
debugIcon.stopForeground#efadca
debugTokenExpression.boolean#5a45e4
debugTokenExpression.error#efadca
debugTokenExpression.name#2d2272
debugTokenExpression.number#9880f0
debugTokenExpression.string#1a1040
debugTokenExpression.value#5a45e4
debugToolBar.background#f0f2fd
debugToolBar.border#e0e4fc
debugView.exceptionLabelBackground#efadca
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#5a45e4
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#5a45e460
descriptionForeground#6a5ac0
diffEditor.diagonalFill#e0e4fc40
diffEditor.insertedLineBackground#b5fdff15
diffEditor.insertedTextBackground#b5fdff20
diffEditor.insertedTextBorder#b5fdff00
diffEditor.removedLineBackground#efadca15
diffEditor.removedTextBackground#efadca20
diffEditor.removedTextBorder#efadca00
diffEditorGutter.insertedLineBackground#b5fdff30
diffEditorGutter.removedLineBackground#efadca30
diffEditorOverview.insertedForeground#b5fdff
diffEditorOverview.removedForeground#efadca
dropdown.background#FFFFFF
dropdown.border#dadcf0
dropdown.foreground#2d2272
dropdown.listBackground#FFFFFF
editor.background#f8f9fe
editor.findMatchBackground#b183fc50
editor.findMatchHighlightBackground#b183fc25
editor.focusedStackFrameHighlightBackground#b5fdff30
editor.foldBackground#b183fc15
editor.foreground#2d2272
editor.lineHighlightBackground#f0f2fd
editor.lineHighlightBorder#e0e4fc20
editor.selectionBackground#b183fc40
editor.stackFrameHighlightBackground#d8a87830
editor.wordHighlightBackground#b183fc20
editor.wordHighlightStrongBackground#b183fc40
editorBracketHighlight.foreground1#5a45e4
editorBracketHighlight.foreground2#b183fc
editorBracketHighlight.foreground3#7a65f0
editorBracketHighlight.foreground4#b5fdff
editorBracketHighlight.foreground5#d8a878
editorBracketHighlight.foreground6#9880f0
editorBracketHighlight.unexpectedBracket.foreground#efadca
editorBracketMatch.background#b183fc30
editorBracketMatch.border#5a45e4
editorCodeLens.foreground#8a88c0
editorCursor.foreground#5a45e4
editorError.border#efadca00
editorError.foreground#efadca
editorGroup.border#e0e4fc
editorGroup.dropBackground#5a45e430
editorGroup.dropIntoPromptBackground#f0f2fd
editorGroup.dropIntoPromptBorder#5a45e4
editorGroup.dropIntoPromptForeground#2d2272
editorGroup.emptyBackground#f0f2fd
editorGroup.focusedEmptyBorder#5a45e4
editorGroupHeader.tabsBackground#f0f2fd
editorGutter.addedBackground#b5fdff
editorGutter.deletedBackground#efadca
editorGutter.modifiedBackground#7a65f0
editorHint.border#b5fdff00
editorHint.foreground#b5fdff
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#e0e4fc
editorIndentGuide.activeBackground1#5a45e4
editorIndentGuide.background1#e0e4fc
editorInfo.border#5a45e400
editorInfo.foreground#5a45e4
editorInlayHint.background#e0e4fc80
editorInlayHint.foreground#6a5ac0
editorInlayHint.parameterForeground#b183fc
editorInlayHint.typeForeground#5a45e4
editorLineNumber.activeForeground#5a45e4
editorLineNumber.foreground#8a88c0
editorOverviewRuler.addedForeground#b5fdff
editorOverviewRuler.background#f0f2fd
editorOverviewRuler.border#e0e4fc
editorOverviewRuler.bracketMatchForeground#5a45e4
editorOverviewRuler.commonContentForeground#6a5ac0
editorOverviewRuler.currentContentForeground#b5fdff
editorOverviewRuler.deletedForeground#efadca
editorOverviewRuler.errorForeground#efadca
editorOverviewRuler.findMatchForeground#5a45e480
editorOverviewRuler.incomingContentForeground#9880f0
editorOverviewRuler.infoForeground#7a65f0
editorOverviewRuler.modifiedForeground#9880f0
editorOverviewRuler.rangeHighlightForeground#5a45e440
editorOverviewRuler.selectionHighlightForeground#5a45e460
editorOverviewRuler.warningForeground#d8a878
editorOverviewRuler.wordHighlightForeground#5a45e460
editorOverviewRuler.wordHighlightStrongForeground#5a45e480
editorStickyScroll.background#f0f2fd
editorStickyScrollHover.background#e0e4fc
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.foreground#2d2272
editorSuggestWidget.highlightForeground#5a45e4
editorSuggestWidget.selectedBackground#e0e4fc
editorWarning.border#d8a87800
editorWarning.foreground#d8a878
editorWhitespace.foreground#dadcf0
editorWidget.background#f0f2fd
editorWidget.border#e0e4fc
editorWidget.foreground#2d2272
errorForeground#efadca
extensionBadge.remoteBackground#5a45e4
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#5a45e4
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#355bf5
extensionIcon.preReleaseForeground#b183fc
extensionIcon.sponsorForeground#5a45e4
extensionIcon.starForeground#d8a878
extensionIcon.verifiedForeground#b5fdff
focusBorder#5a45e4
gitDecoration.addedResourceForeground#b5fdff
gitDecoration.conflictingResourceForeground#efadca
gitDecoration.deletedResourceForeground#efadca
gitDecoration.ignoredResourceForeground#b8a8c8
gitDecoration.modifiedResourceForeground#7a65f0
gitDecoration.untrackedResourceForeground#d8a878
icon.foreground#2d2272
input.background#FFFFFF
input.border#dadcf0
input.foreground#2d2272
input.placeholderForeground#8a88c080
inputOption.activeBackground#5a45e4
inputOption.activeForeground#FFFFFF
keybindingLabel.background#e0e4fc
keybindingLabel.border#e0e4fc
keybindingLabel.bottomBorder#5a45e4
keybindingLabel.foreground#2d2272
list.activeSelectionBackground#5a45e4
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#b183fc30
list.focusForeground#2d2272
list.hoverBackground#e0e4fc
list.hoverForeground#2d2272
list.inactiveSelectionBackground#e0e4fc80
list.inactiveSelectionForeground#2d2272
menu.background#FFFFFF
menu.border#e0e4fc
menu.foreground#2d2272
menu.selectionBackground#5a45e4
menu.selectionBorder#5a45e400
menu.selectionForeground#FFFFFF
menu.separatorBackground#e0e4fc
menubar.selectionBackground#e0e4fc
menubar.selectionForeground#2d2272
merge.border#e0e4fc
merge.commonContentBackground#6a5ac020
merge.commonHeaderBackground#6a5ac040
merge.currentContentBackground#b5fdff20
merge.currentHeaderBackground#b5fdff40
merge.incomingContentBackground#9880f020
merge.incomingHeaderBackground#9880f040
mergeEditor.change.background#9880f020
mergeEditor.change.word.background#9880f040
mergeEditor.conflict.handledFocused.border#b5fdff
mergeEditor.conflict.handledUnfocused.border#b5fdff80
mergeEditor.conflict.unhandledFocused.border#d8a878
mergeEditor.conflict.unhandledUnfocused.border#d8a87880
minimap.background#f0f2fd
minimap.selectionHighlight#b183fc50
notifications.background#FFFFFF
notifications.border#e0e4fc
notifications.foreground#2d2272
notificationsErrorIcon.foreground#efadca
notificationsInfoIcon.foreground#5a45e4
notificationsWarningIcon.foreground#d8a878
panel.background#f0f2fd
panel.border#e0e4fc
panelTitle.activeBorder#5a45e4
panelTitle.activeForeground#2d2272
panelTitle.inactiveForeground#6a5ac0
peekView.border#5a45e4
peekViewEditor.background#f0f2fd
peekViewResult.background#f0f2fd
peekViewResult.matchHighlightBackground#b183fc50
peekViewTitle.background#355bf5
peekViewTitleLabel.foreground#f0f4ff
progressBar.background#5a45e4
quickInput.background#f0f2fd
quickInput.foreground#2d2272
quickInputList.focusBackground#5a45e4
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#355bf5
scrollbarSlider.activeBackground#5a45e4
scrollbarSlider.background#dadcf050
scrollbarSlider.hoverBackground#dadcf0
selection.background#b183fc50
settings.checkboxBackground#FFFFFF
settings.checkboxBorder#5a45e4
settings.checkboxForeground#2d2272
settings.dropdownBackground#FFFFFF
settings.dropdownBorder#e0e4fc
settings.dropdownForeground#2d2272
settings.dropdownListBorder#e0e4fc
settings.focusedRowBackground#e0e4fc40
settings.focusedRowBorder#5a45e480
settings.headerForeground#2d2272
settings.modifiedItemIndicator#5a45e4
settings.numberInputBackground#FFFFFF
settings.numberInputBorder#5a45e4
settings.numberInputForeground#2d2272
settings.rowHoverBackground#e0e4fc20
settings.sashBorder#e0e4fc
settings.textInputBackground#FFFFFF
settings.textInputBorder#5a45e4
settings.textInputForeground#2d2272
sideBar.background#f0f2fd
sideBar.border#e0e4fc
sideBar.foreground#2d2272
sideBarSectionHeader.background#e0e4fc
sideBarSectionHeader.foreground#2d2272
sideBarTitle.foreground#5a45e4
statusBar.background#5a45e4
statusBar.debuggingBackground#355bf5
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#1f1a40
statusBar.noFolderForeground#f0f4ff
symbolIcon.arrayForeground#2d2272
symbolIcon.booleanForeground#5a45e4
symbolIcon.classForeground#7a65f0
symbolIcon.colorForeground#b183fc
symbolIcon.constantForeground#9880f0
symbolIcon.constructorForeground#5a45e4
symbolIcon.enumeratorForeground#d8a878
symbolIcon.enumeratorMemberForeground#9880f0
symbolIcon.eventForeground#d8a878
symbolIcon.fieldForeground#7a65f0
symbolIcon.fileForeground#6a5ac0
symbolIcon.folderForeground#d8a878
symbolIcon.functionForeground#5a45e4
symbolIcon.interfaceForeground#b5fdff
symbolIcon.keyForeground#2d2272
symbolIcon.keywordForeground#5a45e4
symbolIcon.methodForeground#5a45e4
symbolIcon.moduleForeground#7a65f0
symbolIcon.namespaceForeground#7a65f0
symbolIcon.nullForeground#efadca
symbolIcon.numberForeground#9880f0
symbolIcon.objectForeground#2d2272
symbolIcon.operatorForeground#6a5ac0
symbolIcon.packageForeground#7a65f0
symbolIcon.propertyForeground#7a65f0
symbolIcon.referenceForeground#9880f0
symbolIcon.snippetForeground#6a5ac0
symbolIcon.stringForeground#1a1040
symbolIcon.structForeground#2d2272
symbolIcon.textForeground#2d2272
symbolIcon.typeParameterForeground#b5fdff
symbolIcon.unitForeground#9880f0
symbolIcon.variableForeground#7a65f0
tab.activeBackground#f8f9fe
tab.activeBorder#5a45e4
tab.activeForeground#5a45e4
tab.border#e0e4fc
tab.hoverBackground#f8f9fe
tab.hoverForeground#5a45e4
tab.inactiveBackground#f0f2fd
tab.inactiveForeground#6a5ac0
terminal.ansiBlack#2d2272
terminal.ansiBlue#5a45e4
terminal.ansiBrightBlack#6a5ac0
terminal.ansiBrightBlue#8a9cda
terminal.ansiBrightCyan#7dc5f0
terminal.ansiBrightGreen#8ab8aa
terminal.ansiBrightMagenta#9880f0
terminal.ansiBrightRed#e88098
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#e8b888
terminal.ansiCyan#b183fc
terminal.ansiGreen#b5fdff
terminal.ansiMagenta#7a65f0
terminal.ansiRed#efadca
terminal.ansiWhite#e0e4fc
terminal.ansiYellow#d8a878
terminal.background#f8f9fe
terminal.foreground#2d2272
testing.iconErrored#efadca
testing.iconFailed#efadca
testing.iconPassed#b5fdff
testing.iconQueued#d8a878
testing.iconSkipped#b8a8c8
testing.iconUnset#b8a8c8
testing.peekBorder#efadca
testing.peekHeaderBackground#efadca20
testing.runAction#b5fdff
textLink.activeForeground#4a3ab0
textLink.foreground#5a45e4
titleBar.activeBackground#355bf5
titleBar.activeForeground#f0f4ff
titleBar.inactiveBackground#f0f2fd
titleBar.inactiveForeground#6a5ac0
walkThrough.embeddedEditorBackground#f0f2fd
welcomePage.background#f8f9fe
welcomePage.progress.background#e0e4fc
welcomePage.progress.foreground#5a45e4
welcomePage.tileBackground#f0f2fd
welcomePage.tileBorder#e0e4fc
welcomePage.tileHoverBackground#e0e4fc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8a9fb8	italic
keyword, storage	#5a45e4	bold
keyword.control, keyword.control.flow	#4a3ab0	bold
entity.name.function, support.function	#7a65f0	bold
entity.name.type, support.class, support.type, storage.type	#355bf5	bold
string	#1a1040	—
constant.character.escape	#efadca	—
variable, support.variable	#2d2272	—
variable.parameter	#3a2a80	italic
constant.numeric, constant.character, constant	#9880f0	—
constant.language, support.constant, variable.language	#5a45e4	—
keyword.operator	#3a2a80	—
punctuation	#6a5ac0	—
entity.name.tag	#5a45e4	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#b183fc	italic
meta.selector, entity.name.tag.css	#2d2272	—
meta.property-name, support.type.property-name	#5a45e4	—
meta.property-value, support.constant.property-value	#1a1040	—
keyword.other.unit	#9880f0	—
markup.heading	#5a45e4	bold
markup.bold	#2d2272	bold
markup.italic	#2d2272	italic
meta.link	#b183fc	—
markup.list	#5a45e4	—
markup.inline.raw	#1a1040	—
markup.inserted	#b5fdff	—
markup.deleted	#efadca	—
markup.changed	#9880f0	—
support.type.property-name.json	#5a45e4	—
entity.name.tag.yaml	#b183fc	—
string.regexp	#efadca	—
meta.decorator, meta.annotation	#d8a878	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}!`;
}