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 - Yumemizuki Mizuki

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#531774
activityBar.foreground#f8f5fa
activityBar.inactiveForeground#c1b8d0
activityBarBadge.background#c673c9
activityBarBadge.foreground#FFFFFF
badge.background#c673c9
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#6c46c4
breadcrumb.background#f0ebf5
breadcrumb.focusForeground#2a2445
breadcrumb.foreground#786888
button.background#6c46c4
button.foreground#FFFFFF
button.hoverBackground#531774
button.secondaryBackground#151c6e
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#1a2380
charts.blue#151c6e
charts.foreground#2a2445
charts.green#5a9a68
charts.lines#e4dced
charts.orange#b87850
charts.purple#6c46c4
charts.red#c05878
charts.yellow#a08840
checkbox.background#FFFFFF
checkbox.border#c1d0d2
checkbox.foreground#2a2445
checkbox.selectBackground#6c46c4
checkbox.selectBorder#6c46c4
commandCenter.activeBackground#ece4f4
commandCenter.activeBorder#531774
commandCenter.activeForeground#6c46c4
commandCenter.background#f0ebf5
commandCenter.border#e4dced
commandCenter.debuggingBackground#c673c920
commandCenter.foreground#2a2445
commandCenter.inactiveBorder#e0d8e880
commandCenter.inactiveForeground#786888
debugConsole.errorForeground#c05878
debugConsole.infoForeground#151c6e
debugConsole.sourceForeground#786888
debugConsole.warningForeground#a08840
debugConsoleInputIcon.foreground#6c46c4
debugIcon.breakpointCurrentStackframeForeground#6c46c4
debugIcon.breakpointDisabledForeground#a0a8b0
debugIcon.breakpointForeground#c05878
debugIcon.breakpointStackframeForeground#5a9a68
debugIcon.breakpointUnverifiedForeground#a08840
debugIcon.continueForeground#5a9a68
debugIcon.disconnectForeground#c05878
debugIcon.pauseForeground#a08840
debugIcon.restartForeground#5a9a68
debugIcon.startForeground#5a9a68
debugIcon.stepBackForeground#151c6e
debugIcon.stepIntoForeground#151c6e
debugIcon.stepOutForeground#151c6e
debugIcon.stepOverForeground#151c6e
debugIcon.stopForeground#c05878
debugTokenExpression.boolean#6c46c4
debugTokenExpression.error#c05878
debugTokenExpression.name#2a2445
debugTokenExpression.number#c673c9
debugTokenExpression.string#531774
debugTokenExpression.value#151c6e
debugToolBar.background#f0ebf5
debugToolBar.border#e4dced
debugView.exceptionLabelBackground#c05878
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#6c46c4
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#151c6e60
descriptionForeground#786888
diffEditor.diagonalFill#e0d8e840
diffEditor.insertedLineBackground#5a9a6815
diffEditor.insertedTextBackground#5a9a6820
diffEditor.insertedTextBorder#5a9a6800
diffEditor.removedLineBackground#c0587815
diffEditor.removedTextBackground#c0587820
diffEditor.removedTextBorder#c0587800
diffEditorGutter.insertedLineBackground#5a9a6830
diffEditorGutter.removedLineBackground#c0587830
diffEditorOverview.insertedForeground#5a9a68
diffEditorOverview.removedForeground#c05878
dropdown.background#FFFFFF
dropdown.border#c1d0d2
dropdown.foreground#2a2445
dropdown.listBackground#FFFFFF
editor.background#f8f5fa
editor.findMatchBackground#c673c940
editor.findMatchHighlightBackground#c673c920
editor.focusedStackFrameHighlightBackground#5a9a6830
editor.foldBackground#c1d0d215
editor.foreground#2a2445
editor.lineHighlightBackground#f0ebf5
editor.lineHighlightBorder#e8dff020
editor.selectionBackground#c1d0d240
editor.stackFrameHighlightBackground#a0884030
editor.wordHighlightBackground#c1d0d225
editor.wordHighlightStrongBackground#c1d0d245
editorBracketHighlight.foreground1#6c46c4
editorBracketHighlight.foreground2#c673c9
editorBracketHighlight.foreground3#5a9aa8
editorBracketHighlight.foreground4#5a9a68
editorBracketHighlight.foreground5#a08840
editorBracketHighlight.foreground6#151c6e
editorBracketHighlight.unexpectedBracket.foreground#c05878
editorBracketMatch.background#c1d0d240
editorBracketMatch.border#6c46c4
editorCodeLens.foreground#a8a0b8
editorCursor.foreground#6c46c4
editorError.border#c0587800
editorError.foreground#c05878
editorGroup.border#e4dced
editorGroup.dropBackground#c1d0d230
editorGroup.dropIntoPromptBackground#f0ebf5
editorGroup.dropIntoPromptBorder#6c46c4
editorGroup.dropIntoPromptForeground#2a2445
editorGroup.emptyBackground#f0ebf5
editorGroup.focusedEmptyBorder#6c46c4
editorGroupHeader.tabsBackground#f0ebf5
editorGutter.addedBackground#5a9a68
editorGutter.deletedBackground#c05878
editorGutter.modifiedBackground#6c46c4
editorHint.border#5a9a6800
editorHint.foreground#5a9a68
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#e4dced
editorIndentGuide.activeBackground1#6c46c4
editorIndentGuide.background1#e8e0f0
editorInfo.border#151c6e00
editorInfo.foreground#151c6e
editorInlayHint.background#e8e0f080
editorInlayHint.foreground#786888
editorInlayHint.parameterForeground#6c46c4
editorInlayHint.typeForeground#151c6e
editorLineNumber.activeForeground#6c46c4
editorLineNumber.foreground#a8a0b8
editorOverviewRuler.addedForeground#5a9a68
editorOverviewRuler.background#f0ebf5
editorOverviewRuler.border#e4dced
editorOverviewRuler.bracketMatchForeground#6c46c4
editorOverviewRuler.commonContentForeground#786888
editorOverviewRuler.currentContentForeground#5a9a68
editorOverviewRuler.deletedForeground#c05878
editorOverviewRuler.errorForeground#c05878
editorOverviewRuler.findMatchForeground#6c46c480
editorOverviewRuler.incomingContentForeground#6c46c4
editorOverviewRuler.infoForeground#151c6e
editorOverviewRuler.modifiedForeground#6c46c4
editorOverviewRuler.rangeHighlightForeground#c1d0d240
editorOverviewRuler.selectionHighlightForeground#c1d0d260
editorOverviewRuler.warningForeground#a08840
editorOverviewRuler.wordHighlightForeground#c1d0d260
editorOverviewRuler.wordHighlightStrongForeground#c1d0d280
editorStickyScroll.background#f0ebf5
editorStickyScrollHover.background#ece4f4
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.foreground#2a2445
editorSuggestWidget.highlightForeground#6c46c4
editorSuggestWidget.selectedBackground#ece4f4
editorWarning.border#a0884000
editorWarning.foreground#a08840
editorWhitespace.foreground#e0d8e8
editorWidget.background#f0ebf5
editorWidget.border#e4dced
editorWidget.foreground#2a2445
errorForeground#c05878
extensionBadge.remoteBackground#6c46c4
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#6c46c4
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#531774
extensionIcon.preReleaseForeground#c673c9
extensionIcon.sponsorForeground#151c6e
extensionIcon.starForeground#a08840
extensionIcon.verifiedForeground#5a9a68
focusBorder#6c46c4
gitDecoration.addedResourceForeground#5a9a68
gitDecoration.conflictingResourceForeground#c673c9
gitDecoration.deletedResourceForeground#c05878
gitDecoration.ignoredResourceForeground#b0a8b8
gitDecoration.modifiedResourceForeground#6c46c4
gitDecoration.untrackedResourceForeground#a08840
icon.foreground#2a2445
input.background#FFFFFF
input.border#c1d0d2
input.foreground#2a2445
input.placeholderForeground#a8a0b880
inputOption.activeBackground#6c46c4
inputOption.activeForeground#FFFFFF
keybindingLabel.background#e8e0f0
keybindingLabel.border#e8e0f0
keybindingLabel.bottomBorder#151c6e
keybindingLabel.foreground#2a2445
list.activeSelectionBackground#6c46c4
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#c1d0d240
list.focusForeground#2a2445
list.hoverBackground#ece4f4
list.hoverForeground#2a2445
list.inactiveSelectionBackground#c1d0d230
list.inactiveSelectionForeground#2a2445
menu.background#FFFFFF
menu.border#e4dced
menu.foreground#2a2445
menu.selectionBackground#6c46c4
menu.selectionBorder#6c46c400
menu.selectionForeground#FFFFFF
menu.separatorBackground#e4dced
menubar.selectionBackground#ece4f4
menubar.selectionForeground#2a2445
merge.border#e0d8e8
merge.commonContentBackground#68708020
merge.commonHeaderBackground#68708040
merge.currentContentBackground#5a9a6820
merge.currentHeaderBackground#5a9a6840
merge.incomingContentBackground#6c46c420
merge.incomingHeaderBackground#6c46c440
mergeEditor.change.background#c673c920
mergeEditor.change.word.background#c673c940
mergeEditor.conflict.handledFocused.border#5a9a68
mergeEditor.conflict.handledUnfocused.border#5a9a6880
mergeEditor.conflict.unhandledFocused.border#a08840
mergeEditor.conflict.unhandledUnfocused.border#a0884080
minimap.background#f0ebf5
minimap.selectionHighlight#c1d0d250
notifications.background#FFFFFF
notifications.border#e4dced
notifications.foreground#2a2445
notificationsErrorIcon.foreground#c05878
notificationsInfoIcon.foreground#151c6e
notificationsWarningIcon.foreground#a08840
panel.background#f0ebf5
panel.border#e4dced
panelTitle.activeBorder#6c46c4
panelTitle.activeForeground#2a2445
panelTitle.inactiveForeground#786888
peekView.border#6c46c4
peekViewEditor.background#f0ebf5
peekViewResult.background#f0ebf5
peekViewResult.matchHighlightBackground#c673c950
peekViewTitle.background#531774
peekViewTitleLabel.foreground#f8f5fa
progressBar.background#6c46c4
quickInput.background#f0ebf5
quickInput.foreground#2a2445
quickInputList.focusBackground#6c46c4
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#6c46c4
scrollbarSlider.activeBackground#6c46c4
scrollbarSlider.background#c1d0d250
scrollbarSlider.hoverBackground#c1d0d2
selection.background#c1d0d2
settings.checkboxBackground#FFFFFF
settings.checkboxBorder#151c6e
settings.checkboxForeground#2a2445
settings.dropdownBackground#FFFFFF
settings.dropdownBorder#e4dced
settings.dropdownForeground#2a2445
settings.dropdownListBorder#e4dced
settings.focusedRowBackground#f0ebf540
settings.focusedRowBorder#6c46c480
settings.headerForeground#2a2445
settings.modifiedItemIndicator#6c46c4
settings.numberInputBackground#FFFFFF
settings.numberInputBorder#151c6e
settings.numberInputForeground#2a2445
settings.rowHoverBackground#f0ebf520
settings.sashBorder#e4dced
settings.textInputBackground#FFFFFF
settings.textInputBorder#151c6e
settings.textInputForeground#2a2445
sideBar.background#f0ebf5
sideBar.border#e4dced
sideBar.foreground#2a2445
sideBarSectionHeader.background#e8e0f0
sideBarSectionHeader.foreground#2a2445
sideBarTitle.foreground#531774
statusBar.background#6c46c4
statusBar.debuggingBackground#151c6e
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#531774
statusBar.noFolderForeground#f8f5fa
symbolIcon.arrayForeground#2a2445
symbolIcon.booleanForeground#6c46c4
symbolIcon.classForeground#531774
symbolIcon.colorForeground#c673c9
symbolIcon.constantForeground#c673c9
symbolIcon.constructorForeground#531774
symbolIcon.enumeratorForeground#a08840
symbolIcon.enumeratorMemberForeground#c673c9
symbolIcon.eventForeground#a08840
symbolIcon.fieldForeground#5a9aa8
symbolIcon.fileForeground#786888
symbolIcon.folderForeground#6c46c4
symbolIcon.functionForeground#531774
symbolIcon.interfaceForeground#5a9a68
symbolIcon.keyForeground#2a2445
symbolIcon.keywordForeground#6c46c4
symbolIcon.methodForeground#531774
symbolIcon.moduleForeground#6c46c4
symbolIcon.namespaceForeground#6c46c4
symbolIcon.nullForeground#c05878
symbolIcon.numberForeground#c673c9
symbolIcon.objectForeground#2a2445
symbolIcon.operatorForeground#786888
symbolIcon.packageForeground#6c46c4
symbolIcon.propertyForeground#5a9aa8
symbolIcon.referenceForeground#c673c9
symbolIcon.snippetForeground#786888
symbolIcon.stringForeground#531774
symbolIcon.structForeground#2a2445
symbolIcon.textForeground#2a2445
symbolIcon.typeParameterForeground#5a9a68
symbolIcon.unitForeground#c673c9
symbolIcon.variableForeground#5a9aa8
tab.activeBackground#f8f5fa
tab.activeBorder#6c46c4
tab.activeForeground#531774
tab.border#e4dced
tab.hoverBackground#f8f5fa
tab.hoverForeground#531774
tab.inactiveBackground#f0ebf5
tab.inactiveForeground#786888
terminal.ansiBlack#2a2445
terminal.ansiBlue#151c6e
terminal.ansiBrightBlack#786888
terminal.ansiBrightBlue#1a2380
terminal.ansiBrightCyan#72b2c0
terminal.ansiBrightGreen#72b280
terminal.ansiBrightMagenta#d890d8
terminal.ansiBrightRed#d87890
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#b8a058
terminal.ansiCyan#5a9aa8
terminal.ansiGreen#5a9a68
terminal.ansiMagenta#c673c9
terminal.ansiRed#c05878
terminal.ansiWhite#f0ebf5
terminal.ansiYellow#a08840
terminal.background#f8f5fa
terminal.foreground#2a2445
testing.iconErrored#c05878
testing.iconFailed#c05878
testing.iconPassed#5a9a68
testing.iconQueued#a08840
testing.iconSkipped#a0a8b0
testing.iconUnset#a0a8b0
testing.peekBorder#c05878
testing.peekHeaderBackground#c0587820
testing.runAction#5a9a68
textLink.activeForeground#6c46c4
textLink.foreground#531774
titleBar.activeBackground#531774
titleBar.activeForeground#f8f5fa
titleBar.inactiveBackground#f0ebf5
titleBar.inactiveForeground#6c46c4
walkThrough.embeddedEditorBackground#f0ebf5
welcomePage.background#f8f5fa
welcomePage.progress.background#e4dced
welcomePage.progress.foreground#6c46c4
welcomePage.tileBackground#f0ebf5
welcomePage.tileBorder#e4dced
welcomePage.tileHoverBackground#ece4f4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#9890a8	italic
keyword, storage	#6c46c4	bold
keyword.control, keyword.control.flow	#531774	bold
entity.name.function, support.function	#531774	bold
entity.name.type, support.class, support.type, storage.type	#5a8898	bold
string	#8a5090	—
constant.character.escape	#c673c9	—
variable, support.variable	#2a2445	—
variable.parameter	#5a7088	italic
constant.numeric, constant.character, constant	#c673c9	—
constant.language, support.constant, variable.language	#6c46c4	—
keyword.operator	#605868	—
punctuation	#685878	—
entity.name.tag	#531774	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#5a9aa8	italic
meta.selector, entity.name.tag.css	#2a2445	—
meta.property-name, support.type.property-name	#531774	—
meta.property-value, support.constant.property-value	#8a5090	—
keyword.other.unit	#c673c9	—
markup.heading	#531774	bold
markup.bold	#2a2445	bold
markup.italic	#2a2445	italic
meta.link	#6c46c4	—
markup.list	#531774	—
markup.inline.raw	#8a5090	—
markup.inserted	#5a9a68	—
markup.deleted	#c05878	—
markup.changed	#6c46c4	—
support.type.property-name.json	#531774	—
entity.name.tag.yaml	#5a9aa8	—
string.regexp	#c673c9	—
meta.decorator, meta.annotation	#a08840	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}!`;
}