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 — Honkai: Star Rail - Robin

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#6b5a9e
activityBar.foreground#f5f3f9
activityBar.inactiveForeground#b8aed0
activityBarBadge.background#b890e0
activityBarBadge.foreground#FFFFFF
badge.background#b890e0
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#6b5a9e
breadcrumb.background#eceaf2
breadcrumb.focusForeground#3a2d58
breadcrumb.foreground#7a6fa8
button.background#6b5a9e
button.foreground#f5f3f9
button.hoverBackground#7968ad
button.secondaryBackground#b890e0
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#c8a8f0
charts.blue#6b5a9e
charts.foreground#3a2d58
charts.green#589070
charts.lines#c8c0dc
charts.orange#b88868
charts.purple#9d7fce
charts.red#a85868
charts.yellow#987848
checkbox.background#FEFCFF
checkbox.border#9d7fce
checkbox.foreground#3a2d58
checkbox.selectBackground#6b5a9e
checkbox.selectBorder#6b5a9e
commandCenter.activeBackground#e5e0f0
commandCenter.activeBorder#6b5a9e
commandCenter.activeForeground#6b5a9e
commandCenter.background#eceaf2
commandCenter.border#ddd8ea
commandCenter.debuggingBackground#9d7fce20
commandCenter.foreground#3a2d58
commandCenter.inactiveBorder#ddd8ea80
commandCenter.inactiveForeground#9088ba
debugConsole.errorForeground#a85868
debugConsole.infoForeground#6b5a9e
debugConsole.sourceForeground#7a6fa8
debugConsole.warningForeground#987848
debugConsoleInputIcon.foreground#6b5a9e
debugIcon.breakpointCurrentStackframeForeground#6b5a9e
debugIcon.breakpointDisabledForeground#b0a8c0
debugIcon.breakpointForeground#a85868
debugIcon.breakpointStackframeForeground#589070
debugIcon.breakpointUnverifiedForeground#987848
debugIcon.continueForeground#589070
debugIcon.disconnectForeground#a85868
debugIcon.pauseForeground#987848
debugIcon.restartForeground#589070
debugIcon.startForeground#589070
debugIcon.stepBackForeground#6b5a9e
debugIcon.stepIntoForeground#6b5a9e
debugIcon.stepOutForeground#6b5a9e
debugIcon.stepOverForeground#6b5a9e
debugIcon.stopForeground#a85868
debugTokenExpression.boolean#6b5a9e
debugTokenExpression.error#a85868
debugTokenExpression.name#3a2d58
debugTokenExpression.number#7968ad
debugTokenExpression.string#9d5896
debugTokenExpression.value#6b5a9e
debugToolBar.background#eceaf2
debugToolBar.border#ddd8ea
debugView.exceptionLabelBackground#a85868
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#6b5a9e
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#6b5a9e60
descriptionForeground#7a6fa8
diffEditor.diagonalFill#ddd8ea40
diffEditor.insertedLineBackground#58907015
diffEditor.insertedTextBackground#58907020
diffEditor.insertedTextBorder#58907000
diffEditor.removedLineBackground#a8586815
diffEditor.removedTextBackground#a8586820
diffEditor.removedTextBorder#a8586800
diffEditorGutter.insertedLineBackground#58907030
diffEditorGutter.removedLineBackground#a8586830
diffEditorOverview.insertedForeground#589070
diffEditorOverview.removedForeground#a85868
dropdown.background#FEFCFF
dropdown.border#9d7fce
dropdown.foreground#3a2d58
dropdown.listBackground#FEFCFF
editor.background#f5f3f9
editor.findMatchBackground#9d7fce60
editor.findMatchHighlightBackground#9d7fce30
editor.focusedStackFrameHighlightBackground#58907030
editor.foldBackground#9d7fce15
editor.foreground#3a2d58
editor.lineHighlightBackground#eceaf2
editor.lineHighlightBorder#9d7fce30
editor.selectionBackground#9d7fce50
editor.stackFrameHighlightBackground#98784830
editor.wordHighlightBackground#c8c0dc50
editor.wordHighlightStrongBackground#c8c0dc70
editorBracketHighlight.foreground1#6b5a9e
editorBracketHighlight.foreground2#b890e0
editorBracketHighlight.foreground3#9d5896
editorBracketHighlight.foreground4#589070
editorBracketHighlight.foreground5#987848
editorBracketHighlight.foreground6#5088a0
editorBracketHighlight.unexpectedBracket.foreground#a85868
editorBracketMatch.background#9d7fce40
editorBracketMatch.border#6b5a9e
editorCodeLens.foreground#9088ba
editorCursor.foreground#6b5a9e
editorError.border#a8586800
editorError.foreground#a85868
editorGroup.border#ddd8ea
editorGroup.dropBackground#9d7fce30
editorGroup.dropIntoPromptBackground#eceaf2
editorGroup.dropIntoPromptBorder#6b5a9e
editorGroup.dropIntoPromptForeground#3a2d58
editorGroup.emptyBackground#eceaf2
editorGroup.focusedEmptyBorder#6b5a9e
editorGroupHeader.tabsBackground#eceaf2
editorGutter.addedBackground#589070
editorGutter.deletedBackground#a85868
editorGutter.modifiedBackground#6b5a9e
editorHint.border#58907000
editorHint.foreground#589070
editorHoverWidget.background#FEFCFF
editorHoverWidget.border#ddd8ea
editorIndentGuide.activeBackground1#6b5a9e
editorIndentGuide.background1#ddd8ea
editorInfo.border#6b5a9e00
editorInfo.foreground#6b5a9e
editorInlayHint.background#ddd8ea80
editorInlayHint.foreground#7a6fa8
editorInlayHint.parameterForeground#9d7fce
editorInlayHint.typeForeground#6b5a9e
editorLineNumber.activeForeground#6b5a9e
editorLineNumber.foreground#9088ba
editorOverviewRuler.addedForeground#589070
editorOverviewRuler.background#eceaf2
editorOverviewRuler.border#ddd8ea
editorOverviewRuler.bracketMatchForeground#6b5a9e
editorOverviewRuler.commonContentForeground#9088ba
editorOverviewRuler.currentContentForeground#589070
editorOverviewRuler.deletedForeground#a85868
editorOverviewRuler.errorForeground#a85868
editorOverviewRuler.findMatchForeground#6b5a9e80
editorOverviewRuler.incomingContentForeground#6b5a9e
editorOverviewRuler.infoForeground#6b5a9e
editorOverviewRuler.modifiedForeground#6b5a9e
editorOverviewRuler.rangeHighlightForeground#9d7fce40
editorOverviewRuler.selectionHighlightForeground#9d7fce60
editorOverviewRuler.warningForeground#987848
editorOverviewRuler.wordHighlightForeground#9d7fce60
editorOverviewRuler.wordHighlightStrongForeground#9d7fce80
editorStickyScroll.background#eceaf2
editorStickyScrollHover.background#e5e0f0
editorSuggestWidget.background#FEFCFF
editorSuggestWidget.foreground#3a2d58
editorSuggestWidget.highlightForeground#6b5a9e
editorSuggestWidget.selectedBackground#e5e0f0
editorWarning.border#98784800
editorWarning.foreground#987848
editorWhitespace.foreground#d0cce0
editorWidget.background#eceaf2
editorWidget.border#ddd8ea
editorWidget.foreground#3a2d58
errorForeground#a85868
extensionBadge.remoteBackground#9d7fce
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#6b5a9e
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#7968ad
extensionIcon.preReleaseForeground#9d7fce
extensionIcon.sponsorForeground#f0d8e8
extensionIcon.starForeground#987848
extensionIcon.verifiedForeground#589070
focusBorder#6b5a9e
gitDecoration.addedResourceForeground#589070
gitDecoration.conflictingResourceForeground#9d5896
gitDecoration.deletedResourceForeground#a85868
gitDecoration.ignoredResourceForeground#b0a8c0
gitDecoration.modifiedResourceForeground#6b5a9e
gitDecoration.untrackedResourceForeground#987848
icon.foreground#3a2d58
input.background#FEFCFF
input.border#9d7fce
input.foreground#3a2d58
input.placeholderForeground#9088ba90
inputOption.activeBackground#6b5a9e
inputOption.activeForeground#FFFFFF
keybindingLabel.background#ddd8ea
keybindingLabel.border#ddd8ea
keybindingLabel.bottomBorder#9d7fce
keybindingLabel.foreground#3a2d58
list.activeSelectionBackground#6b5a9e
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#f0d8e8
list.focusBackground#9d7fce50
list.focusForeground#3a2d58
list.hoverBackground#e5e0f0
list.hoverForeground#3a2d58
list.inactiveSelectionBackground#9d7fce40
list.inactiveSelectionForeground#3a2d58
menu.background#FEFCFF
menu.border#ddd8ea
menu.foreground#3a2d58
menu.selectionBackground#6b5a9e
menu.selectionBorder#6b5a9e00
menu.selectionForeground#FFFFFF
menu.separatorBackground#ddd8ea
menubar.selectionBackground#e5e0f0
menubar.selectionForeground#3a2d58
merge.border#ddd8ea
merge.commonContentBackground#9088ba20
merge.commonHeaderBackground#9088ba40
merge.currentContentBackground#58907020
merge.currentHeaderBackground#58907040
merge.incomingContentBackground#6b5a9e20
merge.incomingHeaderBackground#6b5a9e40
mergeEditor.change.background#9d7fce20
mergeEditor.change.word.background#9d7fce40
mergeEditor.conflict.handledFocused.border#589070
mergeEditor.conflict.handledUnfocused.border#58907080
mergeEditor.conflict.unhandledFocused.border#987848
mergeEditor.conflict.unhandledUnfocused.border#98784880
minimap.background#eceaf2
minimap.selectionHighlight#6b5a9e50
notifications.background#FEFCFF
notifications.border#ddd8ea
notifications.foreground#3a2d58
notificationsErrorIcon.foreground#a85868
notificationsInfoIcon.foreground#6b5a9e
notificationsWarningIcon.foreground#987848
panel.background#eceaf2
panel.border#ddd8ea
panelTitle.activeBorder#6b5a9e
panelTitle.activeForeground#3a2d58
panelTitle.inactiveForeground#7a6fa8
peekView.border#6b5a9e
peekViewEditor.background#eceaf2
peekViewResult.background#eceaf2
peekViewResult.matchHighlightBackground#9d7fce50
peekViewTitle.background#6b5a9e
peekViewTitleLabel.foreground#f5f3f9
progressBar.background#6b5a9e
quickInput.background#eceaf2
quickInput.foreground#3a2d58
quickInputList.focusBackground#6b5a9e
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#f0d8e8
quickInputTitle.background#6b5a9e
scrollbarSlider.activeBackground#6b5a9e
scrollbarSlider.background#9d7fce50
scrollbarSlider.hoverBackground#9d7fce80
selection.background#9d7fce50
settings.checkboxBackground#FEFCFF
settings.checkboxBorder#9d7fce
settings.checkboxForeground#3a2d58
settings.dropdownBackground#FEFCFF
settings.dropdownBorder#ddd8ea
settings.dropdownForeground#3a2d58
settings.dropdownListBorder#ddd8ea
settings.focusedRowBackground#e5e0f040
settings.focusedRowBorder#6b5a9e80
settings.headerForeground#3a2d58
settings.modifiedItemIndicator#6b5a9e
settings.numberInputBackground#FEFCFF
settings.numberInputBorder#9d7fce
settings.numberInputForeground#3a2d58
settings.rowHoverBackground#e5e0f020
settings.sashBorder#ddd8ea
settings.textInputBackground#FEFCFF
settings.textInputBorder#9d7fce
settings.textInputForeground#3a2d58
sideBar.background#eceaf2
sideBar.border#ddd8ea
sideBar.foreground#3a2d58
sideBarSectionHeader.background#ddd8ea
sideBarSectionHeader.foreground#3a2d58
sideBarTitle.foreground#6b5a9e
statusBar.background#6b5a9e
statusBar.debuggingBackground#b890e0
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#f5f3f9
statusBar.noFolderBackground#6b5a9e
statusBar.noFolderForeground#f5f3f9
symbolIcon.arrayForeground#3a2d58
symbolIcon.booleanForeground#6b5a9e
symbolIcon.classForeground#6b5a9e
symbolIcon.colorForeground#9d7fce
symbolIcon.constantForeground#7968ad
symbolIcon.constructorForeground#9d5896
symbolIcon.enumeratorForeground#987848
symbolIcon.enumeratorMemberForeground#7968ad
symbolIcon.eventForeground#987848
symbolIcon.fieldForeground#7968ad
symbolIcon.fileForeground#7a6fa8
symbolIcon.folderForeground#7a6fa8
symbolIcon.functionForeground#6b5a9e
symbolIcon.interfaceForeground#589070
symbolIcon.keyForeground#3a2d58
symbolIcon.keywordForeground#9d7fce
symbolIcon.methodForeground#6b5a9e
symbolIcon.moduleForeground#9d5896
symbolIcon.namespaceForeground#9d5896
symbolIcon.nullForeground#a85868
symbolIcon.numberForeground#7968ad
symbolIcon.objectForeground#3a2d58
symbolIcon.operatorForeground#7a6fa8
symbolIcon.packageForeground#9d5896
symbolIcon.propertyForeground#3a2d58
symbolIcon.referenceForeground#7968ad
symbolIcon.snippetForeground#7a6fa8
symbolIcon.stringForeground#9d5896
symbolIcon.structForeground#3a2d58
symbolIcon.textForeground#3a2d58
symbolIcon.typeParameterForeground#589070
symbolIcon.unitForeground#7968ad
symbolIcon.variableForeground#3a2d58
tab.activeBackground#f5f3f9
tab.activeBorder#6b5a9e
tab.activeForeground#6b5a9e
tab.border#ddd8ea
tab.hoverBackground#f5f3f9
tab.hoverForeground#6b5a9e
tab.inactiveBackground#eceaf2
tab.inactiveForeground#7a6fa8
terminal.ansiBlack#3a2d58
terminal.ansiBlue#6b5a9e
terminal.ansiBrightBlack#7a6fa8
terminal.ansiBrightBlue#7968ad
terminal.ansiBrightCyan#68a8b8
terminal.ansiBrightGreen#70b090
terminal.ansiBrightMagenta#b878a8
terminal.ansiBrightRed#c07880
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#b89868
terminal.ansiCyan#5088a0
terminal.ansiGreen#589070
terminal.ansiMagenta#9d5896
terminal.ansiRed#a85868
terminal.ansiWhite#eceaf2
terminal.ansiYellow#987848
terminal.background#f5f3f9
terminal.foreground#3a2d58
testing.iconErrored#a85868
testing.iconFailed#a85868
testing.iconPassed#589070
testing.iconQueued#987848
testing.iconSkipped#b0a8c0
testing.iconUnset#b0a8c0
testing.peekBorder#a85868
testing.peekHeaderBackground#a8586820
testing.runAction#589070
textLink.activeForeground#7968ad
textLink.foreground#6b5a9e
titleBar.activeBackground#6b5a9e
titleBar.activeForeground#f5f3f9
titleBar.inactiveBackground#8070b0
titleBar.inactiveForeground#d8d0e8
walkThrough.embeddedEditorBackground#eceaf2
welcomePage.background#f5f3f9
welcomePage.progress.background#ddd8ea
welcomePage.progress.foreground#6b5a9e
welcomePage.tileBackground#eceaf2
welcomePage.tileBorder#ddd8ea
welcomePage.tileHoverBackground#e5e0f0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#9088ba	italic
keyword, storage	#6b5a9e	bold
entity.name.function, support.function	#7968ad	bold
entity.name.type, support.class, support.type, storage.type	#3a2d58	bold
string	#9d5896	—
constant.character.escape	#6b5a9e	—
variable, support.variable	#3a2d58	—
constant.numeric, constant.character, constant	#7968ad	—
constant.language, support.constant, variable.language	#9d7fce	—
keyword.operator	#7a6fa8	—
punctuation	#8078b0	—
entity.name.tag	#6b5a9e	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#9d7fce	italic
meta.selector, entity.name.tag.css	#3a2d58	—
meta.property-name, support.type.property-name	#6b5a9e	—
meta.property-value, support.constant.property-value	#9d5896	—
markup.heading	#6b5a9e	bold
markup.bold	#3a2d58	bold
markup.italic	#3a2d58	italic
meta.link	#9d7fce	—
markup.list	#6b5a9e	—
markup.inline.raw	#9d5896	—
markup.inserted	#589070	—
markup.deleted	#a85868	—
markup.changed	#6b5a9e	—

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