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 (Dark)

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#181220
activityBar.foreground#EAE0F0
activityBar.inactiveForeground#7A6888
activityBarBadge.background#d473a4
activityBarBadge.foreground#FFFFFF
badge.background#d473a4
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#E090C0
breadcrumb.background#241A30
breadcrumb.focusForeground#EAE0F0
breadcrumb.foreground#7A6888
button.background#d473a4
button.foreground#FFFFFF
button.hoverBackground#C05090
button.secondaryBackground#4A4050
button.secondaryForeground#EAE0F0
button.secondaryHoverBackground#5A5060
charts.blue#8b95db
charts.foreground#EAE0F0
charts.green#8AAA8A
charts.lines#d473a4
charts.orange#D0A070
charts.purple#a05dd4
charts.red#C08080
charts.yellow#C8A070
checkbox.background#151020
checkbox.border#d473a4
checkbox.foreground#EAE0F0
checkbox.selectBackground#d473a4
checkbox.selectBorder#d473a4
commandCenter.activeBackground#2A2035
commandCenter.activeBorder#d473a4
commandCenter.activeForeground#d473a4
commandCenter.background#241A30
commandCenter.border#352840
commandCenter.debuggingBackground#d473a420
commandCenter.foreground#EAE0F0
commandCenter.inactiveBorder#35284080
commandCenter.inactiveForeground#7A6888
debugConsole.errorForeground#C08080
debugConsole.infoForeground#8b95db
debugConsole.sourceForeground#7A6888
debugConsole.warningForeground#C8A070
debugConsoleInputIcon.foreground#d473a4
debugIcon.breakpointCurrentStackframeForeground#d473a4
debugIcon.breakpointDisabledForeground#5A5060
debugIcon.breakpointForeground#C08080
debugIcon.breakpointStackframeForeground#8AAA8A
debugIcon.breakpointUnverifiedForeground#C8A070
debugIcon.continueForeground#8AAA8A
debugIcon.disconnectForeground#C08080
debugIcon.pauseForeground#C8A070
debugIcon.restartForeground#8AAA8A
debugIcon.startForeground#8AAA8A
debugIcon.stepBackForeground#8b95db
debugIcon.stepIntoForeground#8b95db
debugIcon.stepOutForeground#8b95db
debugIcon.stepOverForeground#8b95db
debugIcon.stopForeground#C08080
debugTokenExpression.boolean#a05dd4
debugTokenExpression.error#C08080
debugTokenExpression.name#a05dd4
debugTokenExpression.number#8b95db
debugTokenExpression.string#8AAA8A
debugTokenExpression.value#d473a4
debugToolBar.background#241A30
debugToolBar.border#352840
debugView.exceptionLabelBackground#C08080
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#d473a4
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#d473a460
descriptionForeground#7A6888
diffEditor.diagonalFill#35284040
diffEditor.insertedLineBackground#8AAA8A15
diffEditor.insertedTextBackground#8AAA8A20
diffEditor.insertedTextBorder#8AAA8A00
diffEditor.removedLineBackground#C0808015
diffEditor.removedTextBackground#C0808020
diffEditor.removedTextBorder#C0808000
diffEditorGutter.insertedLineBackground#8AAA8A30
diffEditorGutter.removedLineBackground#C0808030
diffEditorOverview.insertedForeground#8AAA8A
diffEditorOverview.removedForeground#C08080
dropdown.background#151020
dropdown.border#4A4050
dropdown.foreground#EAE0F0
dropdown.listBackground#241A30
editor.background#1E1828
editor.findMatchBackground#d473a455
editor.findMatchHighlightBackground#d473a428
editor.focusedStackFrameHighlightBackground#8AAA8A30
editor.foldBackground#d473a412
editor.foreground#EAE0F0
editor.lineHighlightBackground#2A2035
editor.lineHighlightBorder#d473a418
editor.selectionBackground#d473a450
editor.stackFrameHighlightBackground#C8A07030
editor.wordHighlightBackground#4A405040
editor.wordHighlightStrongBackground#4A405060
editorBracketHighlight.foreground1#d473a4
editorBracketHighlight.foreground2#a05dd4
editorBracketHighlight.foreground3#8b95db
editorBracketHighlight.foreground4#8AAA8A
editorBracketHighlight.foreground5#C8B090
editorBracketHighlight.foreground6#7090A8
editorBracketHighlight.unexpectedBracket.foreground#C08080
editorBracketMatch.background#d473a430
editorBracketMatch.border#d473a4
editorCodeLens.foreground#7A6888
editorCursor.foreground#d473a4
editorError.border#C0808000
editorError.foreground#C08080
editorGroup.border#352840
editorGroup.dropBackground#d473a430
editorGroup.dropIntoPromptBackground#241A30
editorGroup.dropIntoPromptBorder#d473a4
editorGroup.dropIntoPromptForeground#EAE0F0
editorGroup.emptyBackground#241A30
editorGroup.focusedEmptyBorder#d473a4
editorGroupHeader.tabsBackground#241A30
editorGutter.addedBackground#8AAA8A
editorGutter.deletedBackground#C08080
editorGutter.modifiedBackground#8b95db
editorHint.border#8AAA8A00
editorHint.foreground#8AAA8A
editorHoverWidget.background#241A30
editorHoverWidget.border#352840
editorIndentGuide.activeBackground1#d473a4
editorIndentGuide.background1#352840
editorInfo.border#8b95db00
editorInfo.foreground#8b95db
editorInlayHint.background#35284080
editorInlayHint.foreground#7A6888
editorInlayHint.parameterForeground#d473a4
editorInlayHint.typeForeground#d473a4
editorLineNumber.activeForeground#d473a4
editorLineNumber.foreground#7A6888
editorOverviewRuler.addedForeground#8AAA8A
editorOverviewRuler.background#241A30
editorOverviewRuler.border#352840
editorOverviewRuler.bracketMatchForeground#d473a4
editorOverviewRuler.commonContentForeground#5A5060
editorOverviewRuler.currentContentForeground#8AAA8A
editorOverviewRuler.deletedForeground#C08080
editorOverviewRuler.errorForeground#C08080
editorOverviewRuler.findMatchForeground#d473a480
editorOverviewRuler.incomingContentForeground#8b95db
editorOverviewRuler.infoForeground#8b95db
editorOverviewRuler.modifiedForeground#8b95db
editorOverviewRuler.rangeHighlightForeground#d473a440
editorOverviewRuler.selectionHighlightForeground#d473a460
editorOverviewRuler.warningForeground#C8A070
editorOverviewRuler.wordHighlightForeground#d473a460
editorOverviewRuler.wordHighlightStrongForeground#d473a480
editorStickyScroll.background#241A30
editorStickyScrollHover.background#2A2035
editorSuggestWidget.background#241A30
editorSuggestWidget.foreground#EAE0F0
editorSuggestWidget.highlightForeground#E090C0
editorSuggestWidget.selectedBackground#2A2035
editorWarning.border#C8A07000
editorWarning.foreground#C8A070
editorWhitespace.foreground#4A405050
editorWidget.background#241A30
editorWidget.border#352840
editorWidget.foreground#EAE0F0
errorForeground#C08080
extensionBadge.remoteBackground#d473a4
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#d473a4
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#C05090
extensionIcon.preReleaseForeground#8b95db
extensionIcon.sponsorForeground#d473a4
extensionIcon.starForeground#C8A070
extensionIcon.verifiedForeground#8AAA8A
focusBorder#d473a4
gitDecoration.addedResourceForeground#8AAA8A
gitDecoration.conflictingResourceForeground#C09090
gitDecoration.deletedResourceForeground#C08080
gitDecoration.ignoredResourceForeground#5A5060
gitDecoration.modifiedResourceForeground#8b95db
gitDecoration.untrackedResourceForeground#C0A878
icon.foreground#EAE0F0
input.background#151020
input.border#4A4050
input.foreground#EAE0F0
input.placeholderForeground#7A6888
inputOption.activeBackground#d473a4
inputOption.activeForeground#FFFFFF
keybindingLabel.background#352840
keybindingLabel.border#352840
keybindingLabel.bottomBorder#5A5060
keybindingLabel.foreground#EAE0F0
list.activeSelectionBackground#d473a4
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#2A2035
list.focusForeground#EAE0F0
list.hoverBackground#2A2035
list.hoverForeground#EAE0F0
list.inactiveSelectionBackground#35284080
list.inactiveSelectionForeground#EAE0F0
menu.background#151020
menu.border#352840
menu.foreground#EAE0F0
menu.selectionBackground#d473a4
menu.selectionBorder#d473a400
menu.selectionForeground#FFFFFF
menu.separatorBackground#352840
menubar.selectionBackground#2A2035
menubar.selectionForeground#EAE0F0
merge.border#352840
merge.commonContentBackground#5A506020
merge.commonHeaderBackground#5A506040
merge.currentContentBackground#8AAA8A20
merge.currentHeaderBackground#8AAA8A40
merge.incomingContentBackground#8b95db20
merge.incomingHeaderBackground#8b95db40
mergeEditor.change.background#8b95db20
mergeEditor.change.word.background#8b95db40
mergeEditor.conflict.handledFocused.border#8AAA8A
mergeEditor.conflict.handledUnfocused.border#8AAA8A80
mergeEditor.conflict.unhandledFocused.border#C8A070
mergeEditor.conflict.unhandledUnfocused.border#C8A07080
minimap.background#241A30
minimap.selectionHighlight#d473a460
notifications.background#241A30
notifications.border#352840
notifications.foreground#EAE0F0
notificationsErrorIcon.foreground#C08080
notificationsInfoIcon.foreground#8b95db
notificationsWarningIcon.foreground#C8A070
panel.background#241A30
panel.border#352840
panelTitle.activeBorder#d473a4
panelTitle.activeForeground#EAE0F0
panelTitle.inactiveForeground#7A6888
peekView.border#d473a4
peekViewEditor.background#241A30
peekViewResult.background#241A30
peekViewResult.matchHighlightBackground#d473a460
peekViewTitle.background#181220
peekViewTitleLabel.foreground#EAE0F0
progressBar.background#d473a4
quickInput.background#241A30
quickInput.foreground#EAE0F0
quickInputList.focusBackground#d473a4
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#181220
scrollbarSlider.activeBackground#d473a4
scrollbarSlider.background#4A405050
scrollbarSlider.hoverBackground#5A5060
selection.background#d473a450
settings.checkboxBackground#151020
settings.checkboxBorder#d473a4
settings.checkboxForeground#EAE0F0
settings.dropdownBackground#151020
settings.dropdownBorder#352840
settings.dropdownForeground#EAE0F0
settings.dropdownListBorder#352840
settings.focusedRowBackground#2A203540
settings.focusedRowBorder#d473a480
settings.headerForeground#EAE0F0
settings.modifiedItemIndicator#d473a4
settings.numberInputBackground#151020
settings.numberInputBorder#4A4050
settings.numberInputForeground#EAE0F0
settings.rowHoverBackground#2A203520
settings.sashBorder#352840
settings.textInputBackground#151020
settings.textInputBorder#4A4050
settings.textInputForeground#EAE0F0
sideBar.background#241A30
sideBar.border#352840
sideBar.foreground#EAE0F0
sideBarSectionHeader.background#352840
sideBarSectionHeader.foreground#EAE0F0
sideBarTitle.foreground#d473a4
statusBar.background#a05dd4
statusBar.debuggingBackground#8b95db
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#181220
statusBar.noFolderForeground#EAE0F0
symbolIcon.arrayForeground#d473a4
symbolIcon.booleanForeground#a05dd4
symbolIcon.classForeground#EAE0F0
symbolIcon.colorForeground#d473a4
symbolIcon.constantForeground#8b95db
symbolIcon.constructorForeground#8b95db
symbolIcon.enumeratorForeground#C8A070
symbolIcon.enumeratorMemberForeground#8b95db
symbolIcon.eventForeground#C8A070
symbolIcon.fieldForeground#8b95db
symbolIcon.fileForeground#7A6888
symbolIcon.folderForeground#7A6888
symbolIcon.functionForeground#d473a4
symbolIcon.interfaceForeground#8b95db
symbolIcon.keyForeground#d473a4
symbolIcon.keywordForeground#a05dd4
symbolIcon.methodForeground#d473a4
symbolIcon.moduleForeground#8b95db
symbolIcon.namespaceForeground#8b95db
symbolIcon.nullForeground#C08080
symbolIcon.numberForeground#8b95db
symbolIcon.objectForeground#EAE0F0
symbolIcon.operatorForeground#7A6888
symbolIcon.packageForeground#8b95db
symbolIcon.propertyForeground#d473a4
symbolIcon.referenceForeground#8b95db
symbolIcon.snippetForeground#7A6888
symbolIcon.stringForeground#8AAA8A
symbolIcon.structForeground#EAE0F0
symbolIcon.textForeground#EAE0F0
symbolIcon.typeParameterForeground#8b95db
symbolIcon.unitForeground#8b95db
symbolIcon.variableForeground#EAE0F0
tab.activeBackground#1E1828
tab.activeBorder#d473a4
tab.activeForeground#EAE0F0
tab.border#352840
tab.hoverBackground#2A2035
tab.hoverForeground#EAE0F0
tab.inactiveBackground#241A30
tab.inactiveForeground#7A6888
terminal.ansiBlack#181220
terminal.ansiBlue#8b95db
terminal.ansiBrightBlack#5A5060
terminal.ansiBrightBlue#9BA5E8
terminal.ansiBrightCyan#80A0B8
terminal.ansiBrightGreen#9ABA9A
terminal.ansiBrightMagenta#B080E0
terminal.ansiBrightRed#d473a4
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#D8C0A0
terminal.ansiCyan#7090A8
terminal.ansiGreen#8AAA8A
terminal.ansiMagenta#a05dd4
terminal.ansiRed#C08080
terminal.ansiWhite#EAE0F0
terminal.ansiYellow#C8B090
terminal.background#1E1828
terminal.foreground#EAE0F0
testing.iconErrored#C08080
testing.iconFailed#C08080
testing.iconPassed#8AAA8A
testing.iconQueued#C8A070
testing.iconSkipped#5A5060
testing.iconUnset#5A5060
testing.peekBorder#C08080
testing.peekHeaderBackground#C0808020
testing.runAction#8AAA8A
textLink.activeForeground#fed4e9
textLink.foreground#E090C0
titleBar.activeBackground#181220
titleBar.activeForeground#EAE0F0
titleBar.inactiveBackground#1E1828
titleBar.inactiveForeground#7A6888
walkThrough.embeddedEditorBackground#241A30
welcomePage.background#1E1828
welcomePage.progress.background#352840
welcomePage.progress.foreground#d473a4
welcomePage.tileBackground#241A30
welcomePage.tileBorder#352840
welcomePage.tileHoverBackground#2A2035

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7A6888	italic
keyword, storage	#a05dd4	bold
entity.name.function, support.function	#E090C0	bold
entity.name.type, support.class, support.type, storage.type	#EAE0F0	bold
string	#8AAA8A	—
constant.character.escape	#E090C0	—
variable, support.variable	#EAE0F0	—
constant.numeric, constant.character, constant	#9BA5E8	—
constant.language, support.constant, variable.language	#E090C0	—
keyword.operator	#A0A0B0	—
punctuation	#908898	—
entity.name.tag	#d473a4	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#a05dd4	italic
meta.selector, entity.name.tag.css	#EAE0F0	—
meta.property-name, support.type.property-name	#d473a4	—
meta.property-value, support.constant.property-value	#8AAA8A	—
markup.heading	#d473a4	bold
markup.bold	#EAE0F0	bold
markup.italic	#EAE0F0	italic
meta.link	#E090C0	—
markup.list	#a05dd4	—
markup.inline.raw	#8AAA8A	—
markup.inserted	#8AAA8A	—
markup.deleted	#C08080	—
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}!`;
}