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 - Cyrene

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#a05dd4
activityBar.foreground#FFFFFF
activityBar.inactiveForeground#E0C0D8
activityBarBadge.background#d473a4
activityBarBadge.foreground#FFFFFF
badge.background#d473a4
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#d473a4
breadcrumb.background#F8F0F5
breadcrumb.focusForeground#4A3A50
breadcrumb.foreground#8A7090
button.background#d473a4
button.foreground#FFFFFF
button.hoverBackground#C05090
button.secondaryBackground#8b95db
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#7080C0
charts.blue#8b95db
charts.foreground#4A3A50
charts.green#7AAA7A
charts.lines#d473a4
charts.orange#D0A070
charts.purple#a05dd4
charts.red#C06080
charts.yellow#C8A060
checkbox.background#FFFFFF
checkbox.border#d473a4
checkbox.foreground#4A3A50
checkbox.selectBackground#d473a4
checkbox.selectBorder#d473a4
commandCenter.activeBackground#fed4e960
commandCenter.activeBorder#d473a4
commandCenter.activeForeground#d473a4
commandCenter.background#F8F0F5
commandCenter.border#F0E0E8
commandCenter.debuggingBackground#d473a420
commandCenter.foreground#4A3A50
commandCenter.inactiveBorder#F0E0E880
commandCenter.inactiveForeground#8A7090
debugConsole.errorForeground#C06080
debugConsole.infoForeground#8b95db
debugConsole.sourceForeground#8A7090
debugConsole.warningForeground#C8A060
debugConsoleInputIcon.foreground#d473a4
debugIcon.breakpointCurrentStackframeForeground#d473a4
debugIcon.breakpointDisabledForeground#B090A0
debugIcon.breakpointForeground#C06080
debugIcon.breakpointStackframeForeground#7AAA7A
debugIcon.breakpointUnverifiedForeground#C8A060
debugIcon.continueForeground#7AAA7A
debugIcon.disconnectForeground#C06080
debugIcon.pauseForeground#C8A060
debugIcon.restartForeground#7AAA7A
debugIcon.startForeground#7AAA7A
debugIcon.stepBackForeground#8b95db
debugIcon.stepIntoForeground#8b95db
debugIcon.stepOutForeground#8b95db
debugIcon.stepOverForeground#8b95db
debugIcon.stopForeground#C06080
debugTokenExpression.boolean#a05dd4
debugTokenExpression.error#C06080
debugTokenExpression.name#a05dd4
debugTokenExpression.number#8A7090
debugTokenExpression.string#5A8A5A
debugTokenExpression.value#d473a4
debugToolBar.background#F8F0F5
debugToolBar.border#F0E0E8
debugView.exceptionLabelBackground#C06080
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#d473a4
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#d473a460
descriptionForeground#8A7090
diffEditor.diagonalFill#F0E0E840
diffEditor.insertedLineBackground#7AAA7A15
diffEditor.insertedTextBackground#7AAA7A20
diffEditor.insertedTextBorder#7AAA7A00
diffEditor.removedLineBackground#C0608015
diffEditor.removedTextBackground#C0608020
diffEditor.removedTextBorder#C0608000
diffEditorGutter.insertedLineBackground#7AAA7A30
diffEditorGutter.removedLineBackground#C0608030
diffEditorOverview.insertedForeground#7AAA7A
diffEditorOverview.removedForeground#C06080
dropdown.background#FFFFFF
dropdown.border#E0CCD8
dropdown.foreground#4A3A50
dropdown.listBackground#FFFFFF
editor.background#FDF8FB
editor.findMatchBackground#d473a445
editor.findMatchHighlightBackground#d473a422
editor.focusedStackFrameHighlightBackground#7AAA7A30
editor.foldBackground#d473a412
editor.foreground#4A3A50
editor.lineHighlightBackground#fed4e920
editor.lineHighlightBorder#d473a420
editor.selectionBackground#d473a440
editor.stackFrameHighlightBackground#C8A06030
editor.wordHighlightBackground#E0CCD830
editor.wordHighlightStrongBackground#E0CCD850
editorBracketHighlight.foreground1#d473a4
editorBracketHighlight.foreground2#a05dd4
editorBracketHighlight.foreground3#8b95db
editorBracketHighlight.foreground4#7AAA7A
editorBracketHighlight.foreground5#C8A080
editorBracketHighlight.foreground6#8A7090
editorBracketHighlight.unexpectedBracket.foreground#C06080
editorBracketMatch.background#d473a430
editorBracketMatch.border#d473a4
editorCodeLens.foreground#B090A0
editorCursor.foreground#d473a4
editorError.border#C0608000
editorError.foreground#C06080
editorGroup.border#F0E0E8
editorGroup.dropBackground#d473a430
editorGroup.dropIntoPromptBackground#F8F0F5
editorGroup.dropIntoPromptBorder#d473a4
editorGroup.dropIntoPromptForeground#4A3A50
editorGroup.emptyBackground#F8F0F5
editorGroup.focusedEmptyBorder#d473a4
editorGroupHeader.tabsBackground#F8F0F5
editorGutter.addedBackground#7AAA7A
editorGutter.deletedBackground#A07070
editorGutter.modifiedBackground#8b95db
editorHint.border#7AAA7A00
editorHint.foreground#7AAA7A
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#F0E0E8
editorIndentGuide.activeBackground1#d473a4
editorIndentGuide.background1#F0E0E8
editorInfo.border#8b95db00
editorInfo.foreground#8b95db
editorInlayHint.background#F0E0E880
editorInlayHint.foreground#8A7090
editorInlayHint.parameterForeground#d473a4
editorInlayHint.typeForeground#a05dd4
editorLineNumber.activeForeground#d473a4
editorLineNumber.foreground#B090A0
editorOverviewRuler.addedForeground#7AAA7A
editorOverviewRuler.background#F8F0F5
editorOverviewRuler.border#F0E0E8
editorOverviewRuler.bracketMatchForeground#d473a4
editorOverviewRuler.commonContentForeground#8A7090
editorOverviewRuler.currentContentForeground#7AAA7A
editorOverviewRuler.deletedForeground#C06080
editorOverviewRuler.errorForeground#C06080
editorOverviewRuler.findMatchForeground#d473a480
editorOverviewRuler.incomingContentForeground#8b95db
editorOverviewRuler.infoForeground#8b95db
editorOverviewRuler.modifiedForeground#8b95db
editorOverviewRuler.rangeHighlightForeground#d473a440
editorOverviewRuler.selectionHighlightForeground#d473a460
editorOverviewRuler.warningForeground#C8A060
editorOverviewRuler.wordHighlightForeground#d473a460
editorOverviewRuler.wordHighlightStrongForeground#d473a480
editorStickyScroll.background#F8F0F5
editorStickyScrollHover.background#fed4e940
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.foreground#4A3A50
editorSuggestWidget.highlightForeground#d473a4
editorSuggestWidget.selectedBackground#fed4e960
editorWarning.border#C8A06000
editorWarning.foreground#C8A060
editorWhitespace.foreground#E0CCD850
editorWidget.background#F8F0F5
editorWidget.border#F0E0E8
editorWidget.foreground#4A3A50
errorForeground#C06080
extensionBadge.remoteBackground#d473a4
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#d473a4
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#C05090
extensionIcon.preReleaseForeground#8b95db
extensionIcon.sponsorForeground#d473a4
extensionIcon.starForeground#C8A060
extensionIcon.verifiedForeground#7AAA7A
focusBorder#d473a4
gitDecoration.addedResourceForeground#5A8A5A
gitDecoration.conflictingResourceForeground#C08080
gitDecoration.deletedResourceForeground#C06080
gitDecoration.ignoredResourceForeground#B090A0
gitDecoration.modifiedResourceForeground#a05dd4
gitDecoration.untrackedResourceForeground#9A8860
icon.foreground#4A3A50
input.background#FFFFFF
input.border#E0CCD8
input.foreground#4A3A50
input.placeholderForeground#B090A080
inputOption.activeBackground#d473a4
inputOption.activeForeground#FFFFFF
keybindingLabel.background#F0E0E8
keybindingLabel.border#F0E0E8
keybindingLabel.bottomBorder#8A7090
keybindingLabel.foreground#4A3A50
list.activeSelectionBackground#d473a4
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#d473a425
list.focusForeground#4A3A50
list.hoverBackground#fed4e940
list.hoverForeground#4A3A50
list.inactiveSelectionBackground#fed4e980
list.inactiveSelectionForeground#4A3A50
menu.background#FFFFFF
menu.border#F0E0E8
menu.foreground#4A3A50
menu.selectionBackground#d473a4
menu.selectionBorder#d473a400
menu.selectionForeground#FFFFFF
menu.separatorBackground#F0E0E8
menubar.selectionBackground#fed4e960
menubar.selectionForeground#4A3A50
merge.border#F0E0E8
merge.commonContentBackground#8A709020
merge.commonHeaderBackground#8A709040
merge.currentContentBackground#7AAA7A20
merge.currentHeaderBackground#7AAA7A40
merge.incomingContentBackground#8b95db20
merge.incomingHeaderBackground#8b95db40
mergeEditor.change.background#8b95db20
mergeEditor.change.word.background#8b95db40
mergeEditor.conflict.handledFocused.border#7AAA7A
mergeEditor.conflict.handledUnfocused.border#7AAA7A80
mergeEditor.conflict.unhandledFocused.border#C8A060
mergeEditor.conflict.unhandledUnfocused.border#C8A06080
minimap.background#F8F0F5
minimap.selectionHighlight#d473a450
notifications.background#FFFFFF
notifications.border#F0E0E8
notifications.foreground#4A3A50
notificationsErrorIcon.foreground#C06080
notificationsInfoIcon.foreground#8b95db
notificationsWarningIcon.foreground#C8A060
panel.background#F8F0F5
panel.border#F0E0E8
panelTitle.activeBorder#d473a4
panelTitle.activeForeground#4A3A50
panelTitle.inactiveForeground#8A7090
peekView.border#d473a4
peekViewEditor.background#F8F0F5
peekViewResult.background#F8F0F5
peekViewResult.matchHighlightBackground#d473a450
peekViewTitle.background#a05dd4
peekViewTitleLabel.foreground#FFFFFF
progressBar.background#d473a4
quickInput.background#F8F0F5
quickInput.foreground#4A3A50
quickInputList.focusBackground#d473a4
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#a05dd4
scrollbarSlider.activeBackground#d473a4
scrollbarSlider.background#E0CCD850
scrollbarSlider.hoverBackground#E0CCD8
selection.background#d473a440
settings.checkboxBackground#FFFFFF
settings.checkboxBorder#d473a4
settings.checkboxForeground#4A3A50
settings.dropdownBackground#FFFFFF
settings.dropdownBorder#F0E0E8
settings.dropdownForeground#4A3A50
settings.dropdownListBorder#F0E0E8
settings.focusedRowBackground#fed4e940
settings.focusedRowBorder#d473a480
settings.headerForeground#4A3A50
settings.modifiedItemIndicator#d473a4
settings.numberInputBackground#FFFFFF
settings.numberInputBorder#E0CCD8
settings.numberInputForeground#4A3A50
settings.rowHoverBackground#fed4e920
settings.sashBorder#F0E0E8
settings.textInputBackground#FFFFFF
settings.textInputBorder#E0CCD8
settings.textInputForeground#4A3A50
sideBar.background#F8F0F5
sideBar.border#F0E0E8
sideBar.foreground#4A3A50
sideBarSectionHeader.background#F0E0E8
sideBarSectionHeader.foreground#4A3A50
sideBarTitle.foreground#a05dd4
statusBar.background#d473a4
statusBar.debuggingBackground#8b95db
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#a05dd4
statusBar.noFolderForeground#FFFFFF
symbolIcon.arrayForeground#d473a4
symbolIcon.booleanForeground#a05dd4
symbolIcon.classForeground#a05dd4
symbolIcon.colorForeground#d473a4
symbolIcon.constantForeground#8A7090
symbolIcon.constructorForeground#8b95db
symbolIcon.enumeratorForeground#C8A060
symbolIcon.enumeratorMemberForeground#8A7090
symbolIcon.eventForeground#C8A060
symbolIcon.fieldForeground#8A7090
symbolIcon.fileForeground#8A7090
symbolIcon.folderForeground#8A7090
symbolIcon.functionForeground#d473a4
symbolIcon.interfaceForeground#8b95db
symbolIcon.keyForeground#d473a4
symbolIcon.keywordForeground#a05dd4
symbolIcon.methodForeground#d473a4
symbolIcon.moduleForeground#8b95db
symbolIcon.namespaceForeground#8b95db
symbolIcon.nullForeground#C06080
symbolIcon.numberForeground#8A7090
symbolIcon.objectForeground#a05dd4
symbolIcon.operatorForeground#8A7090
symbolIcon.packageForeground#8b95db
symbolIcon.propertyForeground#d473a4
symbolIcon.referenceForeground#8A7090
symbolIcon.snippetForeground#8A7090
symbolIcon.stringForeground#5A8A5A
symbolIcon.structForeground#a05dd4
symbolIcon.textForeground#4A3A50
symbolIcon.typeParameterForeground#8b95db
symbolIcon.unitForeground#8A7090
symbolIcon.variableForeground#4A3A50
tab.activeBackground#FFFFFF
tab.activeBorder#d473a4
tab.activeForeground#4A3A50
tab.border#F0E0E8
tab.hoverBackground#FFFFFF
tab.hoverForeground#d473a4
tab.inactiveBackground#F8F0F5
tab.inactiveForeground#8A7090
terminal.ansiBlack#4A3A50
terminal.ansiBlue#8b95db
terminal.ansiBrightBlack#8A7090
terminal.ansiBrightBlue#9BA5E8
terminal.ansiBrightCyan#80A0B0
terminal.ansiBrightGreen#8ABA8A
terminal.ansiBrightMagenta#B080E0
terminal.ansiBrightRed#d473a4
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#D8B090
terminal.ansiCyan#7090A0
terminal.ansiGreen#7AAA7A
terminal.ansiMagenta#a05dd4
terminal.ansiRed#C06080
terminal.ansiWhite#F0E0E8
terminal.ansiYellow#C8A080
terminal.background#FFFFFF
terminal.foreground#4A3A50
testing.iconErrored#C06080
testing.iconFailed#C06080
testing.iconPassed#7AAA7A
testing.iconQueued#C8A060
testing.iconSkipped#B090A0
testing.iconUnset#B090A0
testing.peekBorder#C06080
testing.peekHeaderBackground#C0608020
testing.runAction#7AAA7A
textLink.activeForeground#8040B0
textLink.foreground#a05dd4
titleBar.activeBackground#a05dd4
titleBar.activeForeground#FFFFFF
titleBar.inactiveBackground#B080C0
titleBar.inactiveForeground#E0D0E8
walkThrough.embeddedEditorBackground#F8F0F5
welcomePage.background#FDF8FB
welcomePage.progress.background#F0E0E8
welcomePage.progress.foreground#d473a4
welcomePage.tileBackground#F8F0F5
welcomePage.tileBorder#F0E0E8
welcomePage.tileHoverBackground#fed4e960

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#B090A0	italic
keyword, storage	#a05dd4	bold
entity.name.function, support.function	#d473a4	bold
entity.name.type, support.class, support.type, storage.type	#8040A0	bold
string	#5A8A5A	—
constant.character.escape	#8b95db	—
variable, support.variable	#4A3A50	—
constant.numeric, constant.character, constant	#8b95db	—
constant.language, support.constant, variable.language	#a05dd4	—
keyword.operator	#8A7090	—
punctuation	#B090A0	—
entity.name.tag	#d473a4	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#a05dd4	italic
meta.selector, entity.name.tag.css	#8040A0	—
meta.property-name, support.type.property-name	#d473a4	—
meta.property-value, support.constant.property-value	#5A8A5A	—
markup.heading	#a05dd4	bold
markup.bold	#4A3A50	bold
markup.italic	#4A3A50	italic
meta.link	#d473a4	—
markup.list	#a05dd4	—
markup.inline.raw	#5A8A5A	—
markup.inserted	#5A8A5A	—
markup.deleted	#C06080	—
markup.changed	#8b95db	—

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