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

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#4b3e45
activityBar.foreground#f8f5f7
activityBar.inactiveForeground#a89098
activityBarBadge.background#c075ae
activityBarBadge.foreground#FFFFFF
badge.background#c075ae
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#723458
breadcrumb.background#f2eef0
breadcrumb.focusForeground#2a2530
breadcrumb.foreground#6a5a62
button.background#723458
button.foreground#FFFFFF
button.hoverBackground#5a2a48
button.secondaryBackground#4b3e45
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#36383e
charts.blue#5868a0
charts.foreground#2a2530
charts.green#5a8a6a
charts.lines#e8dce4
charts.orange#c075ae
charts.purple#7a68a0
charts.red#a04860
charts.yellow#9a7850
checkbox.background#FFFFFF
checkbox.border#d8c8d0
checkbox.foreground#2a2530
checkbox.selectBackground#723458
checkbox.selectBorder#723458
commandCenter.activeBackground#e8dce4
commandCenter.activeBorder#723458
commandCenter.activeForeground#723458
commandCenter.background#f2eef0
commandCenter.border#e8dce4
commandCenter.debuggingBackground#72345820
commandCenter.foreground#2a2530
commandCenter.inactiveBorder#e8dce480
commandCenter.inactiveForeground#6a5a62
debugConsole.errorForeground#a04860
debugConsole.infoForeground#5868a0
debugConsole.sourceForeground#6a5a62
debugConsole.warningForeground#9a7850
debugConsoleInputIcon.foreground#723458
debugIcon.breakpointCurrentStackframeForeground#723458
debugIcon.breakpointDisabledForeground#a0909a
debugIcon.breakpointForeground#a04860
debugIcon.breakpointStackframeForeground#5a8a6a
debugIcon.breakpointUnverifiedForeground#9a7850
debugIcon.continueForeground#5a8a6a
debugIcon.disconnectForeground#a04860
debugIcon.pauseForeground#9a7850
debugIcon.restartForeground#5a8a6a
debugIcon.startForeground#5a8a6a
debugIcon.stepBackForeground#723458
debugIcon.stepIntoForeground#723458
debugIcon.stepOutForeground#723458
debugIcon.stepOverForeground#723458
debugIcon.stopForeground#a04860
debugTokenExpression.boolean#723458
debugTokenExpression.error#a04860
debugTokenExpression.name#2a2530
debugTokenExpression.number#7a68a0
debugTokenExpression.string#5a4550
debugTokenExpression.value#723458
debugToolBar.background#f2eef0
debugToolBar.border#e8dce4
debugView.exceptionLabelBackground#a04860
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#723458
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#72345860
descriptionForeground#6a5a62
diffEditor.diagonalFill#e8dce440
diffEditor.insertedLineBackground#5a8a6a15
diffEditor.insertedTextBackground#5a8a6a20
diffEditor.insertedTextBorder#5a8a6a00
diffEditor.removedLineBackground#a0486015
diffEditor.removedTextBackground#a0486020
diffEditor.removedTextBorder#a0486000
diffEditorGutter.insertedLineBackground#5a8a6a30
diffEditorGutter.removedLineBackground#a0486030
diffEditorOverview.insertedForeground#5a8a6a
diffEditorOverview.removedForeground#a04860
dropdown.background#FFFFFF
dropdown.border#d8c8d0
dropdown.foreground#2a2530
dropdown.listBackground#FFFFFF
editor.background#faf7f9
editor.findMatchBackground#c075ae50
editor.findMatchHighlightBackground#c075ae25
editor.focusedStackFrameHighlightBackground#5a8a6a30
editor.foldBackground#72345815
editor.foreground#2a2530
editor.lineHighlightBackground#f2eef0
editor.lineHighlightBorder#e8dce420
editor.selectionBackground#72345840
editor.stackFrameHighlightBackground#9a785030
editor.wordHighlightBackground#72345820
editor.wordHighlightStrongBackground#72345840
editorBracketHighlight.foreground1#723458
editorBracketHighlight.foreground2#c075ae
editorBracketHighlight.foreground3#5868a0
editorBracketHighlight.foreground4#5a8a6a
editorBracketHighlight.foreground5#9a7850
editorBracketHighlight.foreground6#7a68a0
editorBracketHighlight.unexpectedBracket.foreground#a04860
editorBracketMatch.background#72345830
editorBracketMatch.border#723458
editorCodeLens.foreground#8a7a82
editorCursor.foreground#723458
editorError.border#a0486000
editorError.foreground#a04860
editorGroup.border#e8dce4
editorGroup.dropBackground#72345830
editorGroup.dropIntoPromptBackground#f2eef0
editorGroup.dropIntoPromptBorder#723458
editorGroup.dropIntoPromptForeground#2a2530
editorGroup.emptyBackground#f2eef0
editorGroup.focusedEmptyBorder#723458
editorGroupHeader.tabsBackground#f2eef0
editorGutter.addedBackground#5a8a6a
editorGutter.deletedBackground#a04860
editorGutter.modifiedBackground#7a68a0
editorHint.border#5a8a6a00
editorHint.foreground#5a8a6a
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#e8dce4
editorIndentGuide.activeBackground1#723458
editorIndentGuide.background1#e8dce4
editorInfo.border#5868a000
editorInfo.foreground#5868a0
editorInlayHint.background#e8dce480
editorInlayHint.foreground#6a5a62
editorInlayHint.parameterForeground#c075ae
editorInlayHint.typeForeground#723458
editorLineNumber.activeForeground#723458
editorLineNumber.foreground#8a7a82
editorOverviewRuler.addedForeground#5a8a6a
editorOverviewRuler.background#f2eef0
editorOverviewRuler.border#e8dce4
editorOverviewRuler.bracketMatchForeground#723458
editorOverviewRuler.commonContentForeground#6a5a62
editorOverviewRuler.currentContentForeground#5a8a6a
editorOverviewRuler.deletedForeground#a04860
editorOverviewRuler.errorForeground#a04860
editorOverviewRuler.findMatchForeground#72345880
editorOverviewRuler.incomingContentForeground#7a68a0
editorOverviewRuler.infoForeground#5868a0
editorOverviewRuler.modifiedForeground#7a68a0
editorOverviewRuler.rangeHighlightForeground#72345840
editorOverviewRuler.selectionHighlightForeground#72345860
editorOverviewRuler.warningForeground#9a7850
editorOverviewRuler.wordHighlightForeground#72345860
editorOverviewRuler.wordHighlightStrongForeground#72345880
editorStickyScroll.background#f2eef0
editorStickyScrollHover.background#e8dce4
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.foreground#2a2530
editorSuggestWidget.highlightForeground#723458
editorSuggestWidget.selectedBackground#e8dce4
editorWarning.border#9a785000
editorWarning.foreground#9a7850
editorWhitespace.foreground#d8c8d0
editorWidget.background#f2eef0
editorWidget.border#e8dce4
editorWidget.foreground#2a2530
errorForeground#a04860
extensionBadge.remoteBackground#723458
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#723458
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#4b3e45
extensionIcon.preReleaseForeground#c075ae
extensionIcon.sponsorForeground#723458
extensionIcon.starForeground#9a7850
extensionIcon.verifiedForeground#5a8a6a
focusBorder#723458
gitDecoration.addedResourceForeground#5a8a6a
gitDecoration.conflictingResourceForeground#a04860
gitDecoration.deletedResourceForeground#a04860
gitDecoration.ignoredResourceForeground#a0909a
gitDecoration.modifiedResourceForeground#7a68a0
gitDecoration.untrackedResourceForeground#9a7850
icon.foreground#2a2530
input.background#FFFFFF
input.border#d8c8d0
input.foreground#2a2530
input.placeholderForeground#8a7a8280
inputOption.activeBackground#723458
inputOption.activeForeground#FFFFFF
keybindingLabel.background#e8dce4
keybindingLabel.border#e8dce4
keybindingLabel.bottomBorder#723458
keybindingLabel.foreground#2a2530
list.activeSelectionBackground#723458
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#72345830
list.focusForeground#2a2530
list.hoverBackground#e8dce4
list.hoverForeground#2a2530
list.inactiveSelectionBackground#e8dce480
list.inactiveSelectionForeground#2a2530
menu.background#FFFFFF
menu.border#e8dce4
menu.foreground#2a2530
menu.selectionBackground#723458
menu.selectionBorder#72345800
menu.selectionForeground#FFFFFF
menu.separatorBackground#e8dce4
menubar.selectionBackground#e8dce4
menubar.selectionForeground#2a2530
merge.border#e8dce4
merge.commonContentBackground#6a5a6220
merge.commonHeaderBackground#6a5a6240
merge.currentContentBackground#5a8a6a20
merge.currentHeaderBackground#5a8a6a40
merge.incomingContentBackground#7a68a020
merge.incomingHeaderBackground#7a68a040
mergeEditor.change.background#7a68a020
mergeEditor.change.word.background#7a68a040
mergeEditor.conflict.handledFocused.border#5a8a6a
mergeEditor.conflict.handledUnfocused.border#5a8a6a80
mergeEditor.conflict.unhandledFocused.border#9a7850
mergeEditor.conflict.unhandledUnfocused.border#9a785080
minimap.background#f2eef0
minimap.selectionHighlight#72345850
notifications.background#FFFFFF
notifications.border#e8dce4
notifications.foreground#2a2530
notificationsErrorIcon.foreground#a04860
notificationsInfoIcon.foreground#5868a0
notificationsWarningIcon.foreground#9a7850
panel.background#f2eef0
panel.border#e8dce4
panelTitle.activeBorder#723458
panelTitle.activeForeground#2a2530
panelTitle.inactiveForeground#6a5a62
peekView.border#723458
peekViewEditor.background#f2eef0
peekViewResult.background#f2eef0
peekViewResult.matchHighlightBackground#c075ae50
peekViewTitle.background#4b3e45
peekViewTitleLabel.foreground#f8f5f7
progressBar.background#723458
quickInput.background#f2eef0
quickInput.foreground#2a2530
quickInputList.focusBackground#723458
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#4b3e45
scrollbarSlider.activeBackground#723458
scrollbarSlider.background#d8c8d050
scrollbarSlider.hoverBackground#d8c8d0
selection.background#72345850
settings.checkboxBackground#FFFFFF
settings.checkboxBorder#723458
settings.checkboxForeground#2a2530
settings.dropdownBackground#FFFFFF
settings.dropdownBorder#e8dce4
settings.dropdownForeground#2a2530
settings.dropdownListBorder#e8dce4
settings.focusedRowBackground#e8dce440
settings.focusedRowBorder#72345880
settings.headerForeground#2a2530
settings.modifiedItemIndicator#723458
settings.numberInputBackground#FFFFFF
settings.numberInputBorder#723458
settings.numberInputForeground#2a2530
settings.rowHoverBackground#e8dce420
settings.sashBorder#e8dce4
settings.textInputBackground#FFFFFF
settings.textInputBorder#723458
settings.textInputForeground#2a2530
sideBar.background#f2eef0
sideBar.border#e8dce4
sideBar.foreground#2a2530
sideBarSectionHeader.background#e8dce4
sideBarSectionHeader.foreground#2a2530
sideBarTitle.foreground#723458
statusBar.background#723458
statusBar.debuggingBackground#4b3e45
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#36383e
statusBar.noFolderForeground#f8f5f7
symbolIcon.arrayForeground#2a2530
symbolIcon.booleanForeground#723458
symbolIcon.classForeground#5868a0
symbolIcon.colorForeground#c075ae
symbolIcon.constantForeground#7a68a0
symbolIcon.constructorForeground#723458
symbolIcon.enumeratorForeground#9a7850
symbolIcon.enumeratorMemberForeground#7a68a0
symbolIcon.eventForeground#9a7850
symbolIcon.fieldForeground#5868a0
symbolIcon.fileForeground#6a5a62
symbolIcon.folderForeground#9a7850
symbolIcon.functionForeground#723458
symbolIcon.interfaceForeground#5a8a6a
symbolIcon.keyForeground#2a2530
symbolIcon.keywordForeground#723458
symbolIcon.methodForeground#723458
symbolIcon.moduleForeground#5868a0
symbolIcon.namespaceForeground#5868a0
symbolIcon.nullForeground#a04860
symbolIcon.numberForeground#7a68a0
symbolIcon.objectForeground#2a2530
symbolIcon.operatorForeground#6a5a62
symbolIcon.packageForeground#5868a0
symbolIcon.propertyForeground#5868a0
symbolIcon.referenceForeground#7a68a0
symbolIcon.snippetForeground#6a5a62
symbolIcon.stringForeground#5a4550
symbolIcon.structForeground#2a2530
symbolIcon.textForeground#2a2530
symbolIcon.typeParameterForeground#5a8a6a
symbolIcon.unitForeground#7a68a0
symbolIcon.variableForeground#5868a0
tab.activeBackground#faf7f9
tab.activeBorder#723458
tab.activeForeground#723458
tab.border#e8dce4
tab.hoverBackground#faf7f9
tab.hoverForeground#723458
tab.inactiveBackground#f2eef0
tab.inactiveForeground#6a5a62
terminal.ansiBlack#2a2530
terminal.ansiBlue#5868a0
terminal.ansiBrightBlack#6a5a62
terminal.ansiBrightBlue#6878b0
terminal.ansiBrightCyan#5a90a0
terminal.ansiBrightGreen#6a9a7a
terminal.ansiBrightMagenta#c075ae
terminal.ansiBrightRed#b86078
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#aa8860
terminal.ansiCyan#4a8090
terminal.ansiGreen#5a8a6a
terminal.ansiMagenta#723458
terminal.ansiRed#a04860
terminal.ansiWhite#e8dce4
terminal.ansiYellow#9a7850
terminal.background#faf7f9
terminal.foreground#2a2530
testing.iconErrored#a04860
testing.iconFailed#a04860
testing.iconPassed#5a8a6a
testing.iconQueued#9a7850
testing.iconSkipped#a0909a
testing.iconUnset#a0909a
testing.peekBorder#a04860
testing.peekHeaderBackground#a0486020
testing.runAction#5a8a6a
textLink.activeForeground#5a2a48
textLink.foreground#723458
titleBar.activeBackground#4b3e45
titleBar.activeForeground#f8f5f7
titleBar.inactiveBackground#f2eef0
titleBar.inactiveForeground#6a5a62
walkThrough.embeddedEditorBackground#f2eef0
welcomePage.background#faf7f9
welcomePage.progress.background#e8dce4
welcomePage.progress.foreground#723458
welcomePage.tileBackground#f2eef0
welcomePage.tileBorder#e8dce4
welcomePage.tileHoverBackground#e8dce4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#9a8890	italic
keyword, storage	#723458	bold
keyword.control, keyword.control.flow	#5a2a48	bold
entity.name.function, support.function	#7a58a0	bold
entity.name.type, support.class, support.type, storage.type	#4b3e45	bold
string	#5a4550	—
constant.character.escape	#a04860	—
variable, support.variable	#2a2530	—
variable.parameter	#5a4858	italic
constant.numeric, constant.character, constant	#7a68a0	—
constant.language, support.constant, variable.language	#723458	—
keyword.operator	#5a4858	—
punctuation	#6a5a62	—
entity.name.tag	#723458	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#c075ae	italic
meta.selector, entity.name.tag.css	#2a2530	—
meta.property-name, support.type.property-name	#723458	—
meta.property-value, support.constant.property-value	#5a4550	—
keyword.other.unit	#7a68a0	—
markup.heading	#723458	bold
markup.bold	#2a2530	bold
markup.italic	#2a2530	italic
meta.link	#c075ae	—
markup.list	#723458	—
markup.inline.raw	#5a4550	—
markup.inserted	#5a8a6a	—
markup.deleted	#a04860	—
markup.changed	#7a68a0	—
support.type.property-name.json	#723458	—
entity.name.tag.yaml	#c075ae	—
string.regexp	#a04860	—
meta.decorator, meta.annotation	#9a7850	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}!`;
}