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

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#3e3d8b
activityBar.foreground#f0e8fa
activityBar.inactiveForeground#9a88b8
activityBarBadge.background#d99ec7
activityBarBadge.foreground#FFFFFF
badge.background#d99ec7
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#8d8cda
breadcrumb.background#f5f0fa
breadcrumb.focusForeground#3a2858
breadcrumb.foreground#7a6098
button.background#8d8cda
button.foreground#FFFFFF
button.hoverBackground#6a5a9f
button.secondaryBackground#3e3d8b
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#0f1a3f
charts.blue#9a8cda
charts.foreground#3a2858
charts.green#7aa89a
charts.lines#e8d8f0
charts.orange#d99ec7
charts.purple#a898ee
charts.red#d87088
charts.yellow#d8a878
checkbox.background#FFFFFF
checkbox.border#d8cce8
checkbox.foreground#3a2858
checkbox.selectBackground#8d8cda
checkbox.selectBorder#8d8cda
commandCenter.activeBackground#e8d8f0
commandCenter.activeBorder#8d8cda
commandCenter.activeForeground#8d8cda
commandCenter.background#f5f0fa
commandCenter.border#e8d8f0
commandCenter.debuggingBackground#8d8cda20
commandCenter.foreground#3a2858
commandCenter.inactiveBorder#e8d8f080
commandCenter.inactiveForeground#7a6098
debugConsole.errorForeground#d87088
debugConsole.infoForeground#9a8cda
debugConsole.sourceForeground#7a6098
debugConsole.warningForeground#d8a878
debugConsoleInputIcon.foreground#8d8cda
debugIcon.breakpointCurrentStackframeForeground#8d8cda
debugIcon.breakpointDisabledForeground#b8a8c8
debugIcon.breakpointForeground#d87088
debugIcon.breakpointStackframeForeground#7aa89a
debugIcon.breakpointUnverifiedForeground#d8a878
debugIcon.continueForeground#7aa89a
debugIcon.disconnectForeground#d87088
debugIcon.pauseForeground#d8a878
debugIcon.restartForeground#7aa89a
debugIcon.startForeground#7aa89a
debugIcon.stepBackForeground#8d8cda
debugIcon.stepIntoForeground#8d8cda
debugIcon.stepOutForeground#8d8cda
debugIcon.stepOverForeground#8d8cda
debugIcon.stopForeground#d87088
debugTokenExpression.boolean#8d8cda
debugTokenExpression.error#d87088
debugTokenExpression.name#3a2858
debugTokenExpression.number#a898ee
debugTokenExpression.string#2a205f
debugTokenExpression.value#8d8cda
debugToolBar.background#f5f0fa
debugToolBar.border#e8d8f0
debugView.exceptionLabelBackground#d87088
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#8d8cda
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#8d8cda60
descriptionForeground#7a6098
diffEditor.diagonalFill#e8d8f040
diffEditor.insertedLineBackground#7aa89a15
diffEditor.insertedTextBackground#7aa89a20
diffEditor.insertedTextBorder#7aa89a00
diffEditor.removedLineBackground#d8708815
diffEditor.removedTextBackground#d8708820
diffEditor.removedTextBorder#d8708800
diffEditorGutter.insertedLineBackground#7aa89a30
diffEditorGutter.removedLineBackground#d8708830
diffEditorOverview.insertedForeground#7aa89a
diffEditorOverview.removedForeground#d87088
dropdown.background#FFFFFF
dropdown.border#d8cce8
dropdown.foreground#3a2858
dropdown.listBackground#FFFFFF
editor.background#faf8fc
editor.findMatchBackground#d99ec750
editor.findMatchHighlightBackground#d99ec725
editor.focusedStackFrameHighlightBackground#7aa89a30
editor.foldBackground#d99ec715
editor.foreground#3a2858
editor.lineHighlightBackground#f5f0fa
editor.lineHighlightBorder#e8d8f020
editor.selectionBackground#d99ec740
editor.stackFrameHighlightBackground#d8a87830
editor.wordHighlightBackground#d99ec720
editor.wordHighlightStrongBackground#d99ec740
editorBracketHighlight.foreground1#8d8cda
editorBracketHighlight.foreground2#d99ec7
editorBracketHighlight.foreground3#9a8cda
editorBracketHighlight.foreground4#7aa89a
editorBracketHighlight.foreground5#d8a878
editorBracketHighlight.foreground6#a898ee
editorBracketHighlight.unexpectedBracket.foreground#d87088
editorBracketMatch.background#d99ec730
editorBracketMatch.border#8d8cda
editorCodeLens.foreground#9a88b8
editorCursor.foreground#8d8cda
editorError.border#d8708800
editorError.foreground#d87088
editorGroup.border#e8d8f0
editorGroup.dropBackground#8d8cda30
editorGroup.dropIntoPromptBackground#f5f0fa
editorGroup.dropIntoPromptBorder#8d8cda
editorGroup.dropIntoPromptForeground#3a2858
editorGroup.emptyBackground#f5f0fa
editorGroup.focusedEmptyBorder#8d8cda
editorGroupHeader.tabsBackground#f5f0fa
editorGutter.addedBackground#7aa89a
editorGutter.deletedBackground#d87088
editorGutter.modifiedBackground#9a8cda
editorHint.border#7aa89a00
editorHint.foreground#7aa89a
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#e8d8f0
editorIndentGuide.activeBackground1#8d8cda
editorIndentGuide.background1#e8d8f0
editorInfo.border#8d8cda00
editorInfo.foreground#8d8cda
editorInlayHint.background#e8d8f080
editorInlayHint.foreground#7a6098
editorInlayHint.parameterForeground#d99ec7
editorInlayHint.typeForeground#8d8cda
editorLineNumber.activeForeground#8d8cda
editorLineNumber.foreground#9a88b8
editorOverviewRuler.addedForeground#7aa89a
editorOverviewRuler.background#f5f0fa
editorOverviewRuler.border#e8d8f0
editorOverviewRuler.bracketMatchForeground#8d8cda
editorOverviewRuler.commonContentForeground#7a6098
editorOverviewRuler.currentContentForeground#7aa89a
editorOverviewRuler.deletedForeground#d87088
editorOverviewRuler.errorForeground#d87088
editorOverviewRuler.findMatchForeground#8d8cda80
editorOverviewRuler.incomingContentForeground#a898ee
editorOverviewRuler.infoForeground#9a8cda
editorOverviewRuler.modifiedForeground#a898ee
editorOverviewRuler.rangeHighlightForeground#8d8cda40
editorOverviewRuler.selectionHighlightForeground#8d8cda60
editorOverviewRuler.warningForeground#d8a878
editorOverviewRuler.wordHighlightForeground#8d8cda60
editorOverviewRuler.wordHighlightStrongForeground#8d8cda80
editorStickyScroll.background#f5f0fa
editorStickyScrollHover.background#e8d8f0
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.foreground#3a2858
editorSuggestWidget.highlightForeground#8d8cda
editorSuggestWidget.selectedBackground#e8d8f0
editorWarning.border#d8a87800
editorWarning.foreground#d8a878
editorWhitespace.foreground#d8cce8
editorWidget.background#f5f0fa
editorWidget.border#e8d8f0
editorWidget.foreground#3a2858
errorForeground#d87088
extensionBadge.remoteBackground#8d8cda
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#8d8cda
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#3e3d8b
extensionIcon.preReleaseForeground#d99ec7
extensionIcon.sponsorForeground#8d8cda
extensionIcon.starForeground#d8a878
extensionIcon.verifiedForeground#7aa89a
focusBorder#8d8cda
gitDecoration.addedResourceForeground#7aa89a
gitDecoration.conflictingResourceForeground#d87088
gitDecoration.deletedResourceForeground#d87088
gitDecoration.ignoredResourceForeground#b8a8c8
gitDecoration.modifiedResourceForeground#9a8cda
gitDecoration.untrackedResourceForeground#d8a878
icon.foreground#3a2858
input.background#FFFFFF
input.border#d8cce8
input.foreground#3a2858
input.placeholderForeground#9a88b880
inputOption.activeBackground#8d8cda
inputOption.activeForeground#FFFFFF
keybindingLabel.background#e8d8f0
keybindingLabel.border#e8d8f0
keybindingLabel.bottomBorder#8d8cda
keybindingLabel.foreground#3a2858
list.activeSelectionBackground#8d8cda
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#d99ec730
list.focusForeground#3a2858
list.hoverBackground#e8d8f0
list.hoverForeground#3a2858
list.inactiveSelectionBackground#e8d8f080
list.inactiveSelectionForeground#3a2858
menu.background#FFFFFF
menu.border#e8d8f0
menu.foreground#3a2858
menu.selectionBackground#8d8cda
menu.selectionBorder#8d8cda00
menu.selectionForeground#FFFFFF
menu.separatorBackground#e8d8f0
menubar.selectionBackground#e8d8f0
menubar.selectionForeground#3a2858
merge.border#e8d8f0
merge.commonContentBackground#7a609820
merge.commonHeaderBackground#7a609840
merge.currentContentBackground#7aa89a20
merge.currentHeaderBackground#7aa89a40
merge.incomingContentBackground#a898ee20
merge.incomingHeaderBackground#a898ee40
mergeEditor.change.background#a898ee20
mergeEditor.change.word.background#a898ee40
mergeEditor.conflict.handledFocused.border#7aa89a
mergeEditor.conflict.handledUnfocused.border#7aa89a80
mergeEditor.conflict.unhandledFocused.border#d8a878
mergeEditor.conflict.unhandledUnfocused.border#d8a87880
minimap.background#f5f0fa
minimap.selectionHighlight#d99ec750
notifications.background#FFFFFF
notifications.border#e8d8f0
notifications.foreground#3a2858
notificationsErrorIcon.foreground#d87088
notificationsInfoIcon.foreground#8d8cda
notificationsWarningIcon.foreground#d8a878
panel.background#f5f0fa
panel.border#e8d8f0
panelTitle.activeBorder#8d8cda
panelTitle.activeForeground#3a2858
panelTitle.inactiveForeground#7a6098
peekView.border#8d8cda
peekViewEditor.background#f5f0fa
peekViewResult.background#f5f0fa
peekViewResult.matchHighlightBackground#d99ec750
peekViewTitle.background#3e3d8b
peekViewTitleLabel.foreground#f0e8fa
progressBar.background#8d8cda
quickInput.background#f5f0fa
quickInput.foreground#3a2858
quickInputList.focusBackground#8d8cda
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#3e3d8b
scrollbarSlider.activeBackground#8d8cda
scrollbarSlider.background#d8cce850
scrollbarSlider.hoverBackground#d8cce8
selection.background#d99ec750
settings.checkboxBackground#FFFFFF
settings.checkboxBorder#8d8cda
settings.checkboxForeground#3a2858
settings.dropdownBackground#FFFFFF
settings.dropdownBorder#e8d8f0
settings.dropdownForeground#3a2858
settings.dropdownListBorder#e8d8f0
settings.focusedRowBackground#e8d8f040
settings.focusedRowBorder#8d8cda80
settings.headerForeground#3a2858
settings.modifiedItemIndicator#8d8cda
settings.numberInputBackground#FFFFFF
settings.numberInputBorder#8d8cda
settings.numberInputForeground#3a2858
settings.rowHoverBackground#e8d8f020
settings.sashBorder#e8d8f0
settings.textInputBackground#FFFFFF
settings.textInputBorder#8d8cda
settings.textInputForeground#3a2858
sideBar.background#f5f0fa
sideBar.border#e8d8f0
sideBar.foreground#3a2858
sideBarSectionHeader.background#e8d8f0
sideBarSectionHeader.foreground#3a2858
sideBarTitle.foreground#8d8cda
statusBar.background#8d8cda
statusBar.debuggingBackground#3e3d8b
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#3a2f5f
statusBar.noFolderForeground#f0e8fa
symbolIcon.arrayForeground#3a2858
symbolIcon.booleanForeground#8d8cda
symbolIcon.classForeground#9a8cda
symbolIcon.colorForeground#d99ec7
symbolIcon.constantForeground#a898ee
symbolIcon.constructorForeground#8d8cda
symbolIcon.enumeratorForeground#d8a878
symbolIcon.enumeratorMemberForeground#a898ee
symbolIcon.eventForeground#d8a878
symbolIcon.fieldForeground#9a8cda
symbolIcon.fileForeground#7a6098
symbolIcon.folderForeground#d8a878
symbolIcon.functionForeground#8d8cda
symbolIcon.interfaceForeground#7aa89a
symbolIcon.keyForeground#3a2858
symbolIcon.keywordForeground#8d8cda
symbolIcon.methodForeground#8d8cda
symbolIcon.moduleForeground#9a8cda
symbolIcon.namespaceForeground#9a8cda
symbolIcon.nullForeground#d87088
symbolIcon.numberForeground#a898ee
symbolIcon.objectForeground#3a2858
symbolIcon.operatorForeground#7a6098
symbolIcon.packageForeground#9a8cda
symbolIcon.propertyForeground#9a8cda
symbolIcon.referenceForeground#a898ee
symbolIcon.snippetForeground#7a6098
symbolIcon.stringForeground#2a205f
symbolIcon.structForeground#3a2858
symbolIcon.textForeground#3a2858
symbolIcon.typeParameterForeground#7aa89a
symbolIcon.unitForeground#a898ee
symbolIcon.variableForeground#9a8cda
tab.activeBackground#faf8fc
tab.activeBorder#8d8cda
tab.activeForeground#8d8cda
tab.border#e8d8f0
tab.hoverBackground#faf8fc
tab.hoverForeground#8d8cda
tab.inactiveBackground#f5f0fa
tab.inactiveForeground#7a6098
terminal.ansiBlack#3a2858
terminal.ansiBlue#8d8cda
terminal.ansiBrightBlack#7a6098
terminal.ansiBrightBlue#8a9cda
terminal.ansiBrightCyan#7dc5f0
terminal.ansiBrightGreen#8ab8aa
terminal.ansiBrightMagenta#a898ee
terminal.ansiBrightRed#e88098
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#e8b888
terminal.ansiCyan#d99ec7
terminal.ansiGreen#7aa89a
terminal.ansiMagenta#9a8cda
terminal.ansiRed#d87088
terminal.ansiWhite#e8d8f0
terminal.ansiYellow#d8a878
terminal.background#faf8fc
terminal.foreground#3a2858
testing.iconErrored#d87088
testing.iconFailed#d87088
testing.iconPassed#7aa89a
testing.iconQueued#d8a878
testing.iconSkipped#b8a8c8
testing.iconUnset#b8a8c8
testing.peekBorder#d87088
testing.peekHeaderBackground#d8708820
testing.runAction#7aa89a
textLink.activeForeground#6a5a9f
textLink.foreground#8d8cda
titleBar.activeBackground#3e3d8b
titleBar.activeForeground#f0e8fa
titleBar.inactiveBackground#f5f0fa
titleBar.inactiveForeground#7a6098
walkThrough.embeddedEditorBackground#f5f0fa
welcomePage.background#faf8fc
welcomePage.progress.background#e8d8f0
welcomePage.progress.foreground#8d8cda
welcomePage.tileBackground#f5f0fa
welcomePage.tileBorder#e8d8f0
welcomePage.tileHoverBackground#e8d8f0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8a9fb8	italic
keyword, storage	#8d8cda	bold
keyword.control, keyword.control.flow	#6a5a9f	bold
entity.name.function, support.function	#9a8cda	bold
entity.name.type, support.class, support.type, storage.type	#3e3d8b	bold
string	#2a205f	—
constant.character.escape	#d87088	—
variable, support.variable	#3a2858	—
variable.parameter	#4a3a7f	italic
constant.numeric, constant.character, constant	#a898ee	—
constant.language, support.constant, variable.language	#8d8cda	—
keyword.operator	#4a3a7f	—
punctuation	#7a6098	—
entity.name.tag	#8d8cda	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#d99ec7	italic
meta.selector, entity.name.tag.css	#3a2858	—
meta.property-name, support.type.property-name	#8d8cda	—
meta.property-value, support.constant.property-value	#2a205f	—
keyword.other.unit	#a898ee	—
markup.heading	#8d8cda	bold
markup.bold	#3a2858	bold
markup.italic	#3a2858	italic
meta.link	#d99ec7	—
markup.list	#8d8cda	—
markup.inline.raw	#2a205f	—
markup.inserted	#7aa89a	—
markup.deleted	#d87088	—
markup.changed	#a898ee	—
support.type.property-name.json	#8d8cda	—
entity.name.tag.yaml	#d99ec7	—
string.regexp	#d87088	—
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}!`;
}