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 - March 7th

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#4b5293
activityBar.foreground#fae8f4
activityBar.inactiveForeground#b898b8
activityBarBadge.background#88ecfb
activityBarBadge.foreground#FFFFFF
badge.background#88ecfb
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#dca9cc
breadcrumb.background#fcf0f8
breadcrumb.focusForeground#483050
breadcrumb.foreground#8a7098
button.background#dca9cc
button.foreground#FFFFFF
button.hoverBackground#7a5a9f
button.secondaryBackground#4b5293
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#0f1a3f
charts.blue#b898c8
charts.foreground#483050
charts.green#88d8c8
charts.lines#f0d8e8
charts.orange#88ecfb
charts.purple#c8a8d8
charts.red#e888a8
charts.yellow#e8b888
checkbox.background#FFFFFF
checkbox.border#e8ccd8
checkbox.foreground#483050
checkbox.selectBackground#dca9cc
checkbox.selectBorder#dca9cc
commandCenter.activeBackground#f0d8e8
commandCenter.activeBorder#dca9cc
commandCenter.activeForeground#dca9cc
commandCenter.background#fcf0f8
commandCenter.border#f0d8e8
commandCenter.debuggingBackground#dca9cc20
commandCenter.foreground#483050
commandCenter.inactiveBorder#f0d8e880
commandCenter.inactiveForeground#8a7098
debugConsole.errorForeground#e888a8
debugConsole.infoForeground#b898c8
debugConsole.sourceForeground#8a7098
debugConsole.warningForeground#e8b888
debugConsoleInputIcon.foreground#dca9cc
debugIcon.breakpointCurrentStackframeForeground#dca9cc
debugIcon.breakpointDisabledForeground#d8c8e8
debugIcon.breakpointForeground#e888a8
debugIcon.breakpointStackframeForeground#88d8c8
debugIcon.breakpointUnverifiedForeground#e8b888
debugIcon.continueForeground#88d8c8
debugIcon.disconnectForeground#e888a8
debugIcon.pauseForeground#e8b888
debugIcon.restartForeground#88d8c8
debugIcon.startForeground#88d8c8
debugIcon.stepBackForeground#dca9cc
debugIcon.stepIntoForeground#dca9cc
debugIcon.stepOutForeground#dca9cc
debugIcon.stepOverForeground#dca9cc
debugIcon.stopForeground#e888a8
debugTokenExpression.boolean#dca9cc
debugTokenExpression.error#e888a8
debugTokenExpression.name#483050
debugTokenExpression.number#c8a8d8
debugTokenExpression.string#3a2060
debugTokenExpression.value#dca9cc
debugToolBar.background#fcf0f8
debugToolBar.border#f0d8e8
debugView.exceptionLabelBackground#e888a8
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#dca9cc
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#dca9cc60
descriptionForeground#8a7098
diffEditor.diagonalFill#f0d8e840
diffEditor.insertedLineBackground#88d8c815
diffEditor.insertedTextBackground#88d8c820
diffEditor.insertedTextBorder#88d8c800
diffEditor.removedLineBackground#e888a815
diffEditor.removedTextBackground#e888a820
diffEditor.removedTextBorder#e888a800
diffEditorGutter.insertedLineBackground#88d8c830
diffEditorGutter.removedLineBackground#e888a830
diffEditorOverview.insertedForeground#88d8c8
diffEditorOverview.removedForeground#e888a8
dropdown.background#FFFFFF
dropdown.border#e8ccd8
dropdown.foreground#483050
dropdown.listBackground#FFFFFF
editor.background#fef8fc
editor.findMatchBackground#fab3ca50
editor.findMatchHighlightBackground#88ecfb25
editor.focusedStackFrameHighlightBackground#88d8c830
editor.foldBackground#88ecfb15
editor.foreground#483050
editor.lineHighlightBackground#fcf0f8
editor.lineHighlightBorder#f0d8e820
editor.selectionBackground#fab3ca40
editor.stackFrameHighlightBackground#e8b88830
editor.wordHighlightBackground#88ecfb20
editor.wordHighlightStrongBackground#fab3ca40
editorBracketHighlight.foreground1#dca9cc
editorBracketHighlight.foreground2#88ecfb
editorBracketHighlight.foreground3#b898c8
editorBracketHighlight.foreground4#88d8c8
editorBracketHighlight.foreground5#e8b888
editorBracketHighlight.foreground6#c8a8d8
editorBracketHighlight.unexpectedBracket.foreground#e888a8
editorBracketMatch.background#88ecfb30
editorBracketMatch.border#dca9cc
editorCodeLens.foreground#b898b8
editorCursor.foreground#dca9cc
editorError.border#e888a800
editorError.foreground#e888a8
editorGroup.border#f0d8e8
editorGroup.dropBackground#dca9cc30
editorGroup.dropIntoPromptBackground#fcf0f8
editorGroup.dropIntoPromptBorder#dca9cc
editorGroup.dropIntoPromptForeground#483050
editorGroup.emptyBackground#fcf0f8
editorGroup.focusedEmptyBorder#dca9cc
editorGroupHeader.tabsBackground#fcf0f8
editorGutter.addedBackground#88d8c8
editorGutter.deletedBackground#e888a8
editorGutter.modifiedBackground#b898c8
editorHint.border#88d8c800
editorHint.foreground#88d8c8
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#f0d8e8
editorIndentGuide.activeBackground1#dca9cc
editorIndentGuide.background1#f0d8e8
editorInfo.border#dca9cc00
editorInfo.foreground#dca9cc
editorInlayHint.background#f0d8e880
editorInlayHint.foreground#8a7098
editorInlayHint.parameterForeground#88ecfb
editorInlayHint.typeForeground#dca9cc
editorLineNumber.activeForeground#dca9cc
editorLineNumber.foreground#b898b8
editorOverviewRuler.addedForeground#88d8c8
editorOverviewRuler.background#fcf0f8
editorOverviewRuler.border#f0d8e8
editorOverviewRuler.bracketMatchForeground#dca9cc
editorOverviewRuler.commonContentForeground#8a7098
editorOverviewRuler.currentContentForeground#88d8c8
editorOverviewRuler.deletedForeground#e888a8
editorOverviewRuler.errorForeground#e888a8
editorOverviewRuler.findMatchForeground#dca9cc80
editorOverviewRuler.incomingContentForeground#c8a8d8
editorOverviewRuler.infoForeground#b898c8
editorOverviewRuler.modifiedForeground#c8a8d8
editorOverviewRuler.rangeHighlightForeground#dca9cc40
editorOverviewRuler.selectionHighlightForeground#dca9cc60
editorOverviewRuler.warningForeground#e8b888
editorOverviewRuler.wordHighlightForeground#dca9cc60
editorOverviewRuler.wordHighlightStrongForeground#dca9cc80
editorStickyScroll.background#fcf0f8
editorStickyScrollHover.background#f0d8e8
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.foreground#483050
editorSuggestWidget.highlightForeground#dca9cc
editorSuggestWidget.selectedBackground#f0d8e8
editorWarning.border#e8b88800
editorWarning.foreground#e8b888
editorWhitespace.foreground#e8ccd8
editorWidget.background#fcf0f8
editorWidget.border#f0d8e8
editorWidget.foreground#483050
errorForeground#e888a8
extensionBadge.remoteBackground#dca9cc
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#dca9cc
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#4b5293
extensionIcon.preReleaseForeground#88ecfb
extensionIcon.sponsorForeground#dca9cc
extensionIcon.starForeground#e8b888
extensionIcon.verifiedForeground#88d8c8
focusBorder#dca9cc
gitDecoration.addedResourceForeground#88d8c8
gitDecoration.conflictingResourceForeground#e888a8
gitDecoration.deletedResourceForeground#e888a8
gitDecoration.ignoredResourceForeground#d8c8e8
gitDecoration.modifiedResourceForeground#b898c8
gitDecoration.untrackedResourceForeground#e8b888
icon.foreground#483050
input.background#FFFFFF
input.border#e8ccd8
input.foreground#483050
input.placeholderForeground#b898b880
inputOption.activeBackground#dca9cc
inputOption.activeForeground#FFFFFF
keybindingLabel.background#f0d8e8
keybindingLabel.border#f0d8e8
keybindingLabel.bottomBorder#dca9cc
keybindingLabel.foreground#483050
list.activeSelectionBackground#dca9cc
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#88ecfb30
list.focusForeground#483050
list.hoverBackground#f0d8e8
list.hoverForeground#483050
list.inactiveSelectionBackground#f0d8e880
list.inactiveSelectionForeground#483050
menu.background#FFFFFF
menu.border#f0d8e8
menu.foreground#483050
menu.selectionBackground#dca9cc
menu.selectionBorder#dca9cc00
menu.selectionForeground#FFFFFF
menu.separatorBackground#f0d8e8
menubar.selectionBackground#f0d8e8
menubar.selectionForeground#483050
merge.border#f0d8e8
merge.commonContentBackground#8a709820
merge.commonHeaderBackground#8a709840
merge.currentContentBackground#88d8c820
merge.currentHeaderBackground#88d8c840
merge.incomingContentBackground#c8a8d820
merge.incomingHeaderBackground#c8a8d840
mergeEditor.change.background#c8a8d820
mergeEditor.change.word.background#c8a8d840
mergeEditor.conflict.handledFocused.border#88d8c8
mergeEditor.conflict.handledUnfocused.border#88d8c880
mergeEditor.conflict.unhandledFocused.border#e8b888
mergeEditor.conflict.unhandledUnfocused.border#e8b88880
minimap.background#fcf0f8
minimap.selectionHighlight#fab3ca50
notifications.background#FFFFFF
notifications.border#f0d8e8
notifications.foreground#483050
notificationsErrorIcon.foreground#e888a8
notificationsInfoIcon.foreground#dca9cc
notificationsWarningIcon.foreground#e8b888
panel.background#fcf0f8
panel.border#f0d8e8
panelTitle.activeBorder#dca9cc
panelTitle.activeForeground#483050
panelTitle.inactiveForeground#8a7098
peekView.border#dca9cc
peekViewEditor.background#fcf0f8
peekViewResult.background#fcf0f8
peekViewResult.matchHighlightBackground#fab3ca50
peekViewTitle.background#4b5293
peekViewTitleLabel.foreground#fae8f4
progressBar.background#dca9cc
quickInput.background#fcf0f8
quickInput.foreground#483050
quickInputList.focusBackground#dca9cc
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#4b5293
scrollbarSlider.activeBackground#dca9cc
scrollbarSlider.background#e8ccd850
scrollbarSlider.hoverBackground#e8ccd8
selection.background#fab3ca50
settings.checkboxBackground#FFFFFF
settings.checkboxBorder#dca9cc
settings.checkboxForeground#483050
settings.dropdownBackground#FFFFFF
settings.dropdownBorder#f0d8e8
settings.dropdownForeground#483050
settings.dropdownListBorder#f0d8e8
settings.focusedRowBackground#f0d8e840
settings.focusedRowBorder#dca9cc80
settings.headerForeground#483050
settings.modifiedItemIndicator#dca9cc
settings.numberInputBackground#FFFFFF
settings.numberInputBorder#dca9cc
settings.numberInputForeground#483050
settings.rowHoverBackground#f0d8e820
settings.sashBorder#f0d8e8
settings.textInputBackground#FFFFFF
settings.textInputBorder#dca9cc
settings.textInputForeground#483050
sideBar.background#fcf0f8
sideBar.border#f0d8e8
sideBar.foreground#483050
sideBarSectionHeader.background#f0d8e8
sideBarSectionHeader.foreground#483050
sideBarTitle.foreground#dca9cc
statusBar.background#dca9cc
statusBar.debuggingBackground#4b5293
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#3a2f6f
statusBar.noFolderForeground#fae8f4
symbolIcon.arrayForeground#483050
symbolIcon.booleanForeground#dca9cc
symbolIcon.classForeground#b898c8
symbolIcon.colorForeground#88ecfb
symbolIcon.constantForeground#c8a8d8
symbolIcon.constructorForeground#dca9cc
symbolIcon.enumeratorForeground#e8b888
symbolIcon.enumeratorMemberForeground#c8a8d8
symbolIcon.eventForeground#e8b888
symbolIcon.fieldForeground#b898c8
symbolIcon.fileForeground#8a7098
symbolIcon.folderForeground#e8b888
symbolIcon.functionForeground#dca9cc
symbolIcon.interfaceForeground#88d8c8
symbolIcon.keyForeground#483050
symbolIcon.keywordForeground#dca9cc
symbolIcon.methodForeground#dca9cc
symbolIcon.moduleForeground#b898c8
symbolIcon.namespaceForeground#b898c8
symbolIcon.nullForeground#e888a8
symbolIcon.numberForeground#c8a8d8
symbolIcon.objectForeground#483050
symbolIcon.operatorForeground#8a7098
symbolIcon.packageForeground#b898c8
symbolIcon.propertyForeground#b898c8
symbolIcon.referenceForeground#c8a8d8
symbolIcon.snippetForeground#8a7098
symbolIcon.stringForeground#3a2060
symbolIcon.structForeground#483050
symbolIcon.textForeground#483050
symbolIcon.typeParameterForeground#88d8c8
symbolIcon.unitForeground#c8a8d8
symbolIcon.variableForeground#b898c8
tab.activeBackground#fef8fc
tab.activeBorder#dca9cc
tab.activeForeground#dca9cc
tab.border#f0d8e8
tab.hoverBackground#fef8fc
tab.hoverForeground#dca9cc
tab.inactiveBackground#fcf0f8
tab.inactiveForeground#8a7098
terminal.ansiBlack#483050
terminal.ansiBlue#dca9cc
terminal.ansiBrightBlack#8a7098
terminal.ansiBrightBlue#c8acd8
terminal.ansiBrightCyan#7dc5f0
terminal.ansiBrightGreen#a8d8ca
terminal.ansiBrightMagenta#c8a8d8
terminal.ansiBrightRed#f0a0b8
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#f0d8a8
terminal.ansiCyan#88ecfb
terminal.ansiGreen#88d8c8
terminal.ansiMagenta#b898c8
terminal.ansiRed#e888a8
terminal.ansiWhite#f0d8e8
terminal.ansiYellow#e8b888
terminal.background#fef8fc
terminal.foreground#483050
testing.iconErrored#e888a8
testing.iconFailed#e888a8
testing.iconPassed#88d8c8
testing.iconQueued#e8b888
testing.iconSkipped#d8c8e8
testing.iconUnset#d8c8e8
testing.peekBorder#e888a8
testing.peekHeaderBackground#e888a820
testing.runAction#88d8c8
textLink.activeForeground#7a5a9f
textLink.foreground#dca9cc
titleBar.activeBackground#4b5293
titleBar.activeForeground#fae8f4
titleBar.inactiveBackground#fcf0f8
titleBar.inactiveForeground#8a7098
walkThrough.embeddedEditorBackground#fcf0f8
welcomePage.background#fef8fc
welcomePage.progress.background#f0d8e8
welcomePage.progress.foreground#dca9cc
welcomePage.tileBackground#fcf0f8
welcomePage.tileBorder#f0d8e8
welcomePage.tileHoverBackground#f0d8e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8a9fb8	italic
keyword, storage	#dca9cc	bold
keyword.control, keyword.control.flow	#7a5a9f	bold
entity.name.function, support.function	#b898c8	bold
entity.name.type, support.class, support.type, storage.type	#4b5293	bold
string	#3a2060	—
constant.character.escape	#e888a8	—
variable, support.variable	#483050	—
variable.parameter	#5a4a8f	italic
constant.numeric, constant.character, constant	#c8a8d8	—
constant.language, support.constant, variable.language	#dca9cc	—
keyword.operator	#5a4a8f	—
punctuation	#8a7098	—
entity.name.tag	#dca9cc	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#88ecfb	italic
meta.selector, entity.name.tag.css	#483050	—
meta.property-name, support.type.property-name	#dca9cc	—
meta.property-value, support.constant.property-value	#3a2060	—
keyword.other.unit	#c8a8d8	—
markup.heading	#dca9cc	bold
markup.bold	#483050	bold
markup.italic	#483050	italic
meta.link	#88ecfb	—
markup.list	#dca9cc	—
markup.inline.raw	#3a2060	—
markup.inserted	#88d8c8	—
markup.deleted	#e888a8	—
markup.changed	#c8a8d8	—
support.type.property-name.json	#dca9cc	—
entity.name.tag.yaml	#88ecfb	—
string.regexp	#e888a8	—
meta.decorator, meta.annotation	#e8b888	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}!`;
}