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 - Citlali (Dark)

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#140a20
activityBar.foreground#e8d8f0
activityBar.inactiveForeground#8a70a0
activityBarBadge.background#d99ec7
activityBarBadge.foreground#FFFFFF
badge.background#d99ec7
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#d99ec7
breadcrumb.background#281c38
breadcrumb.focusForeground#e8d8f0
breadcrumb.foreground#9080a0
button.background#8d8cda
button.foreground#FFFFFF
button.hoverBackground#9a8cda
button.secondaryBackground#16255f
button.secondaryForeground#e8d8f0
button.secondaryHoverBackground#4a3f8f
charts.blue#b8a0e0
charts.foreground#e8d8f0
charts.green#90c8b8
charts.lines#38284880
charts.orange#d8b0f0
charts.purple#b8a0e0
charts.red#e898b8
charts.yellow#d8c898
checkbox.background#140a20
checkbox.border#38284880
checkbox.foreground#e8d8f0
checkbox.selectBackground#8d8cda
checkbox.selectBorder#8d8cda
commandCenter.activeBackground#382850
commandCenter.activeBorder#8d8cda
commandCenter.activeForeground#d99ec7
commandCenter.background#281c38
commandCenter.border#382850
commandCenter.debuggingBackground#8d8cda20
commandCenter.foreground#e8d8f0
commandCenter.inactiveBorder#38285080
commandCenter.inactiveForeground#8a70a0
debugConsole.errorForeground#e898b8
debugConsole.infoForeground#b8a0e0
debugConsole.sourceForeground#9080a0
debugConsole.warningForeground#d8c898
debugConsoleInputIcon.foreground#d99ec7
debugIcon.breakpointCurrentStackframeForeground#d99ec7
debugIcon.breakpointDisabledForeground#8a70a0
debugIcon.breakpointForeground#e898b8
debugIcon.breakpointStackframeForeground#90c8b8
debugIcon.breakpointUnverifiedForeground#d8c898
debugIcon.continueForeground#90c8b8
debugIcon.disconnectForeground#e898b8
debugIcon.pauseForeground#d8c898
debugIcon.restartForeground#90c8b8
debugIcon.startForeground#90c8b8
debugIcon.stepBackForeground#d99ec7
debugIcon.stepIntoForeground#d99ec7
debugIcon.stepOutForeground#d99ec7
debugIcon.stepOverForeground#d99ec7
debugIcon.stopForeground#e898b8
debugTokenExpression.boolean#d99ec7
debugTokenExpression.error#e898b8
debugTokenExpression.name#e8d8f0
debugTokenExpression.number#b8a0e0
debugTokenExpression.string#d8b8e8
debugTokenExpression.value#d99ec7
debugToolBar.background#281c38
debugToolBar.border#382850
debugView.exceptionLabelBackground#e898b0
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#8d8cda
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#d99ec760
descriptionForeground#9080a0
diffEditor.diagonalFill#38285040
diffEditor.insertedLineBackground#90c8b815
diffEditor.insertedTextBackground#90c8b820
diffEditor.insertedTextBorder#90c8b800
diffEditor.removedLineBackground#e898b015
diffEditor.removedTextBackground#e898b020
diffEditor.removedTextBorder#e898b000
diffEditorGutter.insertedLineBackground#90c8b830
diffEditorGutter.removedLineBackground#e898b030
diffEditorOverview.insertedForeground#90c8b8
diffEditorOverview.removedForeground#e898b0
dropdown.background#140a20
dropdown.border#38284880
dropdown.foreground#e8d8f0
dropdown.listBackground#281c38
editor.background#1a1428
editor.findMatchBackground#d99ec750
editor.findMatchHighlightBackground#d99ec725
editor.focusedStackFrameHighlightBackground#90c8b830
editor.foldBackground#8d8cda15
editor.foreground#e8d8f0
editor.lineHighlightBackground#201830
editor.lineHighlightBorder#38284840
editor.selectionBackground#d99ec750
editor.stackFrameHighlightBackground#d8c89830
editor.wordHighlightBackground#8d8cda30
editor.wordHighlightStrongBackground#d99ec750
editorBracketHighlight.foreground1#d99ec7
editorBracketHighlight.foreground2#e898b8
editorBracketHighlight.foreground3#b8a0e0
editorBracketHighlight.foreground4#90c8b8
editorBracketHighlight.foreground5#d8c898
editorBracketHighlight.foreground6#b8a0e0
editorBracketHighlight.unexpectedBracket.foreground#e898b8
editorBracketMatch.background#8d8cda40
editorBracketMatch.border#8d8cda
editorCodeLens.foreground#8a70a0
editorCursor.foreground#d99ec7
editorError.border#e898b800
editorError.foreground#e898b8
editorGroup.border#382850
editorGroup.dropBackground#8d8cda30
editorGroup.dropIntoPromptBackground#281c38
editorGroup.dropIntoPromptBorder#8d8cda
editorGroup.dropIntoPromptForeground#e8d8f0
editorGroup.emptyBackground#281c38
editorGroup.focusedEmptyBorder#8d8cda
editorGroupHeader.tabsBackground#281c38
editorGutter.addedBackground#90c8b8
editorGutter.deletedBackground#e898b0
editorGutter.modifiedBackground#b8a0e0
editorHint.border#90c8b800
editorHint.foreground#90c8b8
editorHoverWidget.background#281c38
editorHoverWidget.border#38284880
editorIndentGuide.activeBackground1#8d8cda
editorIndentGuide.background1#38284880
editorInfo.border#b8a0e000
editorInfo.foreground#b8a0e0
editorInlayHint.background#38285080
editorInlayHint.foreground#a89cc0
editorInlayHint.parameterForeground#b8a0e0
editorInlayHint.typeForeground#d99ec7
editorLineNumber.activeForeground#d99ec7
editorLineNumber.foreground#8a70a0
editorOverviewRuler.addedForeground#90c8b8
editorOverviewRuler.background#281c38
editorOverviewRuler.border#382850
editorOverviewRuler.bracketMatchForeground#8d8cda
editorOverviewRuler.commonContentForeground#9080a0
editorOverviewRuler.currentContentForeground#90c8b8
editorOverviewRuler.deletedForeground#e898b0
editorOverviewRuler.errorForeground#e898b8
editorOverviewRuler.findMatchForeground#d99ec780
editorOverviewRuler.incomingContentForeground#b8a0e0
editorOverviewRuler.infoForeground#b8a0e0
editorOverviewRuler.modifiedForeground#b8a0e0
editorOverviewRuler.rangeHighlightForeground#8d8cda40
editorOverviewRuler.selectionHighlightForeground#d99ec760
editorOverviewRuler.warningForeground#d8c898
editorOverviewRuler.wordHighlightForeground#d99ec760
editorOverviewRuler.wordHighlightStrongForeground#8d8cda80
editorStickyScroll.background#281c38
editorStickyScrollHover.background#382850
editorSuggestWidget.background#281c38
editorSuggestWidget.foreground#e8d8f0
editorSuggestWidget.highlightForeground#d99ec7
editorSuggestWidget.selectedBackground#8d8cda
editorWarning.border#d8c89800
editorWarning.foreground#d8c898
editorWhitespace.foreground#38284860
editorWidget.background#281c38
editorWidget.border#38284880
editorWidget.foreground#e8d8f0
errorForeground#e898b8
extensionBadge.remoteBackground#8d8cda
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#8d8cda
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#16255f
extensionIcon.preReleaseForeground#d99ec7
extensionIcon.sponsorForeground#d99ec7
extensionIcon.starForeground#d8c898
extensionIcon.verifiedForeground#90c8b8
focusBorder#8d8cda
gitDecoration.addedResourceForeground#90c8b8
gitDecoration.conflictingResourceForeground#e898b8
gitDecoration.deletedResourceForeground#e898b8
gitDecoration.ignoredResourceForeground#8a70a0
gitDecoration.modifiedResourceForeground#b8a0e0
gitDecoration.untrackedResourceForeground#d8c898
icon.foreground#e8d8f0
input.background#140a20
input.border#38284880
input.foreground#e8d8f0
input.placeholderForeground#8a70a0
inputOption.activeBackground#8d8cda
inputOption.activeForeground#FFFFFF
keybindingLabel.background#382850
keybindingLabel.border#382850
keybindingLabel.bottomBorder#8a70a0
keybindingLabel.foreground#e8d8f0
list.activeSelectionBackground#8d8cda
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#d99ec750
list.focusForeground#e8d8f0
list.hoverBackground#382850
list.hoverForeground#e8d8f0
list.inactiveSelectionBackground#38285080
list.inactiveSelectionForeground#e8d8f0
menu.background#140a20
menu.border#382850
menu.foreground#e8d8f0
menu.selectionBackground#8d8cda
menu.selectionBorder#8d8cda00
menu.selectionForeground#FFFFFF
menu.separatorBackground#38284880
menubar.selectionBackground#382850
menubar.selectionForeground#e8d8f0
merge.border#382850
merge.commonContentBackground#9080a020
merge.commonHeaderBackground#9080a040
merge.currentContentBackground#90c8b820
merge.currentHeaderBackground#90c8b840
merge.incomingContentBackground#b8a0e020
merge.incomingHeaderBackground#b8a0e040
mergeEditor.change.background#b8a0e020
mergeEditor.change.word.background#b8a0e040
mergeEditor.conflict.handledFocused.border#90c8b8
mergeEditor.conflict.handledUnfocused.border#90c8b880
mergeEditor.conflict.unhandledFocused.border#d8c898
mergeEditor.conflict.unhandledUnfocused.border#d8c89880
minimap.background#281c38
minimap.selectionHighlight#d99ec760
notifications.background#281c38
notifications.border#382850
notifications.foreground#e8d8f0
notificationsErrorIcon.foreground#e898b8
notificationsInfoIcon.foreground#b8a0e0
notificationsWarningIcon.foreground#d8c898
panel.background#281c38
panel.border#382850
panelTitle.activeBorder#8d8cda
panelTitle.activeForeground#e8d8f0
panelTitle.inactiveForeground#9080a0
peekView.border#8d8cda
peekViewEditor.background#281c38
peekViewResult.background#281c38
peekViewResult.matchHighlightBackground#d99ec750
peekViewTitle.background#382850
peekViewTitleLabel.foreground#e8d8f0
progressBar.background#8d8cda
quickInput.background#281c38
quickInput.foreground#e8d8f0
quickInputList.focusBackground#8d8cda
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#382850
scrollbarSlider.activeBackground#8d8cda
scrollbarSlider.background#38284880
scrollbarSlider.hoverBackground#48404a
selection.background#d99ec760
settings.checkboxBackground#140a20
settings.checkboxBorder#8d8cda
settings.checkboxForeground#e8d8f0
settings.dropdownBackground#140a20
settings.dropdownBorder#382850
settings.dropdownForeground#e8d8f0
settings.dropdownListBorder#382850
settings.focusedRowBackground#38285040
settings.focusedRowBorder#8d8cda80
settings.headerForeground#e8d8f0
settings.modifiedItemIndicator#8d8cda
settings.numberInputBackground#140a20
settings.numberInputBorder#8d8cda
settings.numberInputForeground#e8d8f0
settings.rowHoverBackground#38285020
settings.sashBorder#382850
settings.textInputBackground#140a20
settings.textInputBorder#8d8cda
settings.textInputForeground#e8d8f0
sideBar.background#281c38
sideBar.border#382850
sideBar.foreground#e8d8f0
sideBarSectionHeader.background#382850
sideBarSectionHeader.foreground#e8d8f0
sideBarTitle.foreground#d99ec7
statusBar.background#8d8cda
statusBar.debuggingBackground#16255f
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#1a1428
statusBar.noFolderForeground#e8d8f0
symbolIcon.arrayForeground#e8d8f0
symbolIcon.booleanForeground#d99ec7
symbolIcon.classForeground#b8a0e0
symbolIcon.colorForeground#d8b0f0
symbolIcon.constantForeground#b8a0e0
symbolIcon.constructorForeground#d99ec7
symbolIcon.enumeratorForeground#d8c898
symbolIcon.enumeratorMemberForeground#b8a0e0
symbolIcon.eventForeground#d8c898
symbolIcon.fieldForeground#b8a0e0
symbolIcon.fileForeground#9080a0
symbolIcon.folderForeground#d8c898
symbolIcon.functionForeground#d99ec7
symbolIcon.interfaceForeground#90c8b8
symbolIcon.keyForeground#e8d8f0
symbolIcon.keywordForeground#d99ec7
symbolIcon.methodForeground#d99ec7
symbolIcon.moduleForeground#b8a0e0
symbolIcon.namespaceForeground#b8a0e0
symbolIcon.nullForeground#e898b8
symbolIcon.numberForeground#b8a0e0
symbolIcon.objectForeground#e8d8f0
symbolIcon.operatorForeground#9080a0
symbolIcon.packageForeground#b8a0e0
symbolIcon.propertyForeground#b8a0e0
symbolIcon.referenceForeground#b8a0e0
symbolIcon.snippetForeground#9080a0
symbolIcon.stringForeground#d8b8e8
symbolIcon.structForeground#e8d8f0
symbolIcon.textForeground#e8d8f0
symbolIcon.typeParameterForeground#90c8b8
symbolIcon.unitForeground#b8a0e0
symbolIcon.variableForeground#b8a0e0
tab.activeBackground#1a1428
tab.activeBorder#8d8cda
tab.activeForeground#d99ec7
tab.border#382850
tab.hoverBackground#382850
tab.hoverForeground#e8d8f0
tab.inactiveBackground#281c38
tab.inactiveForeground#9080a0
terminal.ansiBlack#382850
terminal.ansiBlue#b8a0e0
terminal.ansiBrightBlack#9080a0
terminal.ansiBrightBlue#c8b0e8
terminal.ansiBrightCyan#b8d0f0
terminal.ansiBrightGreen#a8d8c8
terminal.ansiBrightMagenta#d8b0f0
terminal.ansiBrightRed#f0b8d0
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#e8d8a8
terminal.ansiCyan#d99ec7
terminal.ansiGreen#90c8b8
terminal.ansiMagenta#d99ec7
terminal.ansiRed#e898b8
terminal.ansiWhite#e8d8f0
terminal.ansiYellow#d8c898
terminal.background#1a1428
terminal.foreground#e8d8f0
testing.iconErrored#e898b0
testing.iconFailed#e898b0
testing.iconPassed#90c8b8
testing.iconQueued#d8c898
testing.iconSkipped#8a70a0
testing.iconUnset#8a70a0
testing.peekBorder#e898b0
testing.peekHeaderBackground#e898b020
testing.runAction#90c8b8
textLink.activeForeground#d8b0f0
textLink.foreground#d99ec7
titleBar.activeBackground#281c38
titleBar.activeForeground#e8d8f0
titleBar.inactiveBackground#1a1428
titleBar.inactiveForeground#8a70a0
walkThrough.embeddedEditorBackground#281c38
welcomePage.background#1a1428
welcomePage.progress.background#382850
welcomePage.progress.foreground#8d8cda
welcomePage.tileBackground#281c38
welcomePage.tileBorder#382850
welcomePage.tileHoverBackground#382850

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#9080a0	italic
keyword, storage	#d99ec7	bold
keyword.control, keyword.control.flow	#c8a8e8	bold
entity.name.function, support.function	#b8a0e0	bold
entity.name.type, support.class, support.type, storage.type	#c8a8d8	bold
string	#d8b8e8	—
constant.character.escape	#e898b8	—
variable, support.variable	#e8d8f0	—
variable.parameter	#c8a8d0	italic
constant.numeric, constant.character, constant	#b8a0e0	—
constant.language, support.constant, variable.language	#d99ec7	—
keyword.operator	#a088c8	—
punctuation	#a088b8	—
entity.name.tag	#d99ec7	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#d8b0f0	italic
meta.selector, entity.name.tag.css	#e8d8f0	—
meta.property-name, support.type.property-name	#d99ec7	—
meta.property-value, support.constant.property-value	#d8b8e8	—
keyword.other.unit	#b8a0e0	—
markup.heading	#d99ec7	bold
markup.bold	#e8d8f0	bold
markup.italic	#e8d8f0	italic
meta.link	#d8b0f0	—
markup.list	#d99ec7	—
markup.inline.raw	#d8b8e8	—
markup.inserted	#90c8b8	—
markup.deleted	#e898b8	—
markup.changed	#b8a0e0	—
support.type.property-name.json	#d99ec7	—
entity.name.tag.yaml	#d8b0f0	—
string.regexp	#e898b8	—
meta.decorator, meta.annotation	#d8c898	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}!`;
}