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 (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#14101a
activityBar.foreground#e0d8dc
activityBar.inactiveForeground#5a5058
activityBarBadge.background#c075ae
activityBarBadge.foreground#FFFFFF
badge.background#c075ae
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#c075ae
breadcrumb.background#1e1820
breadcrumb.focusForeground#e0d8dc
breadcrumb.foreground#6a6068
button.background#723458
button.foreground#FFFFFF
button.hoverBackground#8a4870
button.secondaryBackground#4b3e45
button.secondaryForeground#e0d8dc
button.secondaryHoverBackground#5a4855
charts.blue#7888c0
charts.foreground#e0d8dc
charts.green#80b898
charts.lines#38303480
charts.orange#d898c8
charts.purple#9080b0
charts.red#c87088
charts.yellow#c0a070
checkbox.background#14101a
checkbox.border#38303480
checkbox.foreground#e0d8dc
checkbox.selectBackground#723458
checkbox.selectBorder#723458
commandCenter.activeBackground#28222a
commandCenter.activeBorder#723458
commandCenter.activeForeground#c075ae
commandCenter.background#1e1820
commandCenter.border#28222a
commandCenter.debuggingBackground#72345820
commandCenter.foreground#e0d8dc
commandCenter.inactiveBorder#28222a80
commandCenter.inactiveForeground#5a5058
debugConsole.errorForeground#c87088
debugConsole.infoForeground#7888c0
debugConsole.sourceForeground#6a6068
debugConsole.warningForeground#c0a070
debugConsoleInputIcon.foreground#c075ae
debugIcon.breakpointCurrentStackframeForeground#c075ae
debugIcon.breakpointDisabledForeground#5a5058
debugIcon.breakpointForeground#c87088
debugIcon.breakpointStackframeForeground#80b898
debugIcon.breakpointUnverifiedForeground#c0a070
debugIcon.continueForeground#80b898
debugIcon.disconnectForeground#c87088
debugIcon.pauseForeground#c0a070
debugIcon.restartForeground#80b898
debugIcon.startForeground#80b898
debugIcon.stepBackForeground#c075ae
debugIcon.stepIntoForeground#c075ae
debugIcon.stepOutForeground#c075ae
debugIcon.stepOverForeground#c075ae
debugIcon.stopForeground#c87088
debugTokenExpression.boolean#c075ae
debugTokenExpression.error#c87088
debugTokenExpression.name#e0d8dc
debugTokenExpression.number#9080b0
debugTokenExpression.string#c0a8b0
debugTokenExpression.value#c075ae
debugToolBar.background#1e1820
debugToolBar.border#28222a
debugView.exceptionLabelBackground#b86878
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#723458
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#c075ae60
descriptionForeground#6a6068
diffEditor.diagonalFill#28222a40
diffEditor.insertedLineBackground#80b89815
diffEditor.insertedTextBackground#80b89820
diffEditor.insertedTextBorder#80b89800
diffEditor.removedLineBackground#b8687815
diffEditor.removedTextBackground#b8687820
diffEditor.removedTextBorder#b8687800
diffEditorGutter.insertedLineBackground#80b89830
diffEditorGutter.removedLineBackground#b8687830
diffEditorOverview.insertedForeground#80b898
diffEditorOverview.removedForeground#b86878
dropdown.background#14101a
dropdown.border#38303480
dropdown.foreground#e0d8dc
dropdown.listBackground#1e1820
editor.background#18141a
editor.findMatchBackground#c075ae50
editor.findMatchHighlightBackground#c075ae25
editor.focusedStackFrameHighlightBackground#80b89830
editor.foldBackground#72345815
editor.foreground#e0d8dc
editor.lineHighlightBackground#201a22
editor.lineHighlightBorder#30282c40
editor.selectionBackground#72345850
editor.stackFrameHighlightBackground#c0a07030
editor.wordHighlightBackground#72345830
editor.wordHighlightStrongBackground#72345850
editorBracketHighlight.foreground1#c075ae
editorBracketHighlight.foreground2#c87088
editorBracketHighlight.foreground3#7888c0
editorBracketHighlight.foreground4#80b898
editorBracketHighlight.foreground5#c0a070
editorBracketHighlight.foreground6#9080b0
editorBracketHighlight.unexpectedBracket.foreground#c87088
editorBracketMatch.background#72345840
editorBracketMatch.border#723458
editorCodeLens.foreground#5a5058
editorCursor.foreground#c075ae
editorError.border#c8708800
editorError.foreground#c87088
editorGroup.border#28222a
editorGroup.dropBackground#72345830
editorGroup.dropIntoPromptBackground#1e1820
editorGroup.dropIntoPromptBorder#723458
editorGroup.dropIntoPromptForeground#e0d8dc
editorGroup.emptyBackground#1e1820
editorGroup.focusedEmptyBorder#723458
editorGroupHeader.tabsBackground#1e1820
editorGutter.addedBackground#70a888
editorGutter.deletedBackground#b86878
editorGutter.modifiedBackground#9080b0
editorHint.border#80b89800
editorHint.foreground#80b898
editorHoverWidget.background#1e1820
editorHoverWidget.border#38303480
editorIndentGuide.activeBackground1#723458
editorIndentGuide.background1#38303480
editorInfo.border#7888c000
editorInfo.foreground#7888c0
editorInlayHint.background#28222a80
editorInlayHint.foreground#7a7078
editorInlayHint.parameterForeground#9080b0
editorInlayHint.typeForeground#c075ae
editorLineNumber.activeForeground#c075ae
editorLineNumber.foreground#5a5058
editorOverviewRuler.addedForeground#80b898
editorOverviewRuler.background#1e1820
editorOverviewRuler.border#28222a
editorOverviewRuler.bracketMatchForeground#723458
editorOverviewRuler.commonContentForeground#6a6068
editorOverviewRuler.currentContentForeground#80b898
editorOverviewRuler.deletedForeground#b86878
editorOverviewRuler.errorForeground#c87088
editorOverviewRuler.findMatchForeground#c075ae80
editorOverviewRuler.incomingContentForeground#9080b0
editorOverviewRuler.infoForeground#7888c0
editorOverviewRuler.modifiedForeground#9080b0
editorOverviewRuler.rangeHighlightForeground#72345840
editorOverviewRuler.selectionHighlightForeground#72345860
editorOverviewRuler.warningForeground#c0a070
editorOverviewRuler.wordHighlightForeground#72345860
editorOverviewRuler.wordHighlightStrongForeground#72345880
editorStickyScroll.background#1e1820
editorStickyScrollHover.background#28222a
editorSuggestWidget.background#1e1820
editorSuggestWidget.foreground#e0d8dc
editorSuggestWidget.highlightForeground#c075ae
editorSuggestWidget.selectedBackground#723458
editorWarning.border#c0a07000
editorWarning.foreground#c0a070
editorWhitespace.foreground#38303460
editorWidget.background#1e1820
editorWidget.border#38303480
editorWidget.foreground#e0d8dc
errorForeground#c87088
extensionBadge.remoteBackground#723458
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#723458
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#4b3e45
extensionIcon.preReleaseForeground#c075ae
extensionIcon.sponsorForeground#c075ae
extensionIcon.starForeground#c0a070
extensionIcon.verifiedForeground#80b898
focusBorder#723458
gitDecoration.addedResourceForeground#80b898
gitDecoration.conflictingResourceForeground#c87088
gitDecoration.deletedResourceForeground#c87088
gitDecoration.ignoredResourceForeground#5a5058
gitDecoration.modifiedResourceForeground#9080b0
gitDecoration.untrackedResourceForeground#c0a070
icon.foreground#e0d8dc
input.background#14101a
input.border#38303480
input.foreground#e0d8dc
input.placeholderForeground#5a5058
inputOption.activeBackground#723458
inputOption.activeForeground#FFFFFF
keybindingLabel.background#28222a
keybindingLabel.border#28222a
keybindingLabel.bottomBorder#5a5058
keybindingLabel.foreground#e0d8dc
list.activeSelectionBackground#723458
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#72345850
list.focusForeground#e0d8dc
list.hoverBackground#28222a
list.hoverForeground#e0d8dc
list.inactiveSelectionBackground#28222a80
list.inactiveSelectionForeground#e0d8dc
menu.background#14101a
menu.border#28222a
menu.foreground#e0d8dc
menu.selectionBackground#723458
menu.selectionBorder#72345800
menu.selectionForeground#FFFFFF
menu.separatorBackground#38303480
menubar.selectionBackground#28222a
menubar.selectionForeground#e0d8dc
merge.border#28222a
merge.commonContentBackground#6a606820
merge.commonHeaderBackground#6a606840
merge.currentContentBackground#80b89820
merge.currentHeaderBackground#80b89840
merge.incomingContentBackground#9080b020
merge.incomingHeaderBackground#9080b040
mergeEditor.change.background#9080b020
mergeEditor.change.word.background#9080b040
mergeEditor.conflict.handledFocused.border#80b898
mergeEditor.conflict.handledUnfocused.border#80b89880
mergeEditor.conflict.unhandledFocused.border#c0a070
mergeEditor.conflict.unhandledUnfocused.border#c0a07080
minimap.background#1e1820
minimap.selectionHighlight#72345860
notifications.background#1e1820
notifications.border#28222a
notifications.foreground#e0d8dc
notificationsErrorIcon.foreground#c87088
notificationsInfoIcon.foreground#7888c0
notificationsWarningIcon.foreground#c0a070
panel.background#1e1820
panel.border#28222a
panelTitle.activeBorder#723458
panelTitle.activeForeground#e0d8dc
panelTitle.inactiveForeground#6a6068
peekView.border#723458
peekViewEditor.background#1e1820
peekViewResult.background#1e1820
peekViewResult.matchHighlightBackground#c075ae50
peekViewTitle.background#28222a
peekViewTitleLabel.foreground#e0d8dc
progressBar.background#723458
quickInput.background#1e1820
quickInput.foreground#e0d8dc
quickInputList.focusBackground#723458
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#28222a
scrollbarSlider.activeBackground#723458
scrollbarSlider.background#38303480
scrollbarSlider.hoverBackground#48404a
selection.background#72345860
settings.checkboxBackground#14101a
settings.checkboxBorder#723458
settings.checkboxForeground#e0d8dc
settings.dropdownBackground#14101a
settings.dropdownBorder#28222a
settings.dropdownForeground#e0d8dc
settings.dropdownListBorder#28222a
settings.focusedRowBackground#28222a40
settings.focusedRowBorder#72345880
settings.headerForeground#e0d8dc
settings.modifiedItemIndicator#723458
settings.numberInputBackground#14101a
settings.numberInputBorder#723458
settings.numberInputForeground#e0d8dc
settings.rowHoverBackground#28222a20
settings.sashBorder#28222a
settings.textInputBackground#14101a
settings.textInputBorder#723458
settings.textInputForeground#e0d8dc
sideBar.background#1e1820
sideBar.border#28222a
sideBar.foreground#e0d8dc
sideBarSectionHeader.background#28222a
sideBarSectionHeader.foreground#e0d8dc
sideBarTitle.foreground#c075ae
statusBar.background#723458
statusBar.debuggingBackground#4b3e45
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#18141a
statusBar.noFolderForeground#e0d8dc
symbolIcon.arrayForeground#e0d8dc
symbolIcon.booleanForeground#c075ae
symbolIcon.classForeground#7888c0
symbolIcon.colorForeground#d898c8
symbolIcon.constantForeground#9080b0
symbolIcon.constructorForeground#c075ae
symbolIcon.enumeratorForeground#c0a070
symbolIcon.enumeratorMemberForeground#9080b0
symbolIcon.eventForeground#c0a070
symbolIcon.fieldForeground#7888c0
symbolIcon.fileForeground#6a6068
symbolIcon.folderForeground#c0a070
symbolIcon.functionForeground#c075ae
symbolIcon.interfaceForeground#80b898
symbolIcon.keyForeground#e0d8dc
symbolIcon.keywordForeground#c075ae
symbolIcon.methodForeground#c075ae
symbolIcon.moduleForeground#7888c0
symbolIcon.namespaceForeground#7888c0
symbolIcon.nullForeground#c87088
symbolIcon.numberForeground#9080b0
symbolIcon.objectForeground#e0d8dc
symbolIcon.operatorForeground#6a6068
symbolIcon.packageForeground#7888c0
symbolIcon.propertyForeground#7888c0
symbolIcon.referenceForeground#9080b0
symbolIcon.snippetForeground#6a6068
symbolIcon.stringForeground#c0a8b0
symbolIcon.structForeground#e0d8dc
symbolIcon.textForeground#e0d8dc
symbolIcon.typeParameterForeground#80b898
symbolIcon.unitForeground#9080b0
symbolIcon.variableForeground#7888c0
tab.activeBackground#18141a
tab.activeBorder#723458
tab.activeForeground#c075ae
tab.border#28222a
tab.hoverBackground#28222a
tab.hoverForeground#e0d8dc
tab.inactiveBackground#1e1820
tab.inactiveForeground#6a6068
terminal.ansiBlack#28222a
terminal.ansiBlue#7888c0
terminal.ansiBrightBlack#6a6068
terminal.ansiBrightBlue#90a0d0
terminal.ansiBrightCyan#88b8c8
terminal.ansiBrightGreen#98d0b0
terminal.ansiBrightMagenta#d898c8
terminal.ansiBrightRed#d898a8
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#d8b888
terminal.ansiCyan#70a0b0
terminal.ansiGreen#80b898
terminal.ansiMagenta#c075ae
terminal.ansiRed#c87088
terminal.ansiWhite#e0d8dc
terminal.ansiYellow#c0a070
terminal.background#18141a
terminal.foreground#e0d8dc
testing.iconErrored#b86878
testing.iconFailed#b86878
testing.iconPassed#80b898
testing.iconQueued#c0a070
testing.iconSkipped#5a5058
testing.iconUnset#5a5058
testing.peekBorder#b86878
testing.peekHeaderBackground#b8687820
testing.runAction#80b898
textLink.activeForeground#d898c8
textLink.foreground#c075ae
titleBar.activeBackground#1e1820
titleBar.activeForeground#e0d8dc
titleBar.inactiveBackground#18141a
titleBar.inactiveForeground#5a5058
walkThrough.embeddedEditorBackground#1e1820
welcomePage.background#18141a
welcomePage.progress.background#28222a
welcomePage.progress.foreground#723458
welcomePage.tileBackground#1e1820
welcomePage.tileBorder#28222a
welcomePage.tileHoverBackground#28222a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6a6068	italic
keyword, storage	#c075ae	bold
keyword.control, keyword.control.flow	#d080b8	bold
entity.name.function, support.function	#a090c0	bold
entity.name.type, support.class, support.type, storage.type	#b8a8c0	bold
string	#c0a8b0	—
constant.character.escape	#c87088	—
variable, support.variable	#e0d8dc	—
variable.parameter	#b0a0b8	italic
constant.numeric, constant.character, constant	#9080b0	—
constant.language, support.constant, variable.language	#c075ae	—
keyword.operator	#9088a0	—
punctuation	#807880	—
entity.name.tag	#c075ae	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#d898c8	italic
meta.selector, entity.name.tag.css	#e0d8dc	—
meta.property-name, support.type.property-name	#c075ae	—
meta.property-value, support.constant.property-value	#c0a8b0	—
keyword.other.unit	#9080b0	—
markup.heading	#c075ae	bold
markup.bold	#e0d8dc	bold
markup.italic	#e0d8dc	italic
meta.link	#d898c8	—
markup.list	#c075ae	—
markup.inline.raw	#c0a8b0	—
markup.inserted	#80b898	—
markup.deleted	#c87088	—
markup.changed	#9080b0	—
support.type.property-name.json	#c075ae	—
entity.name.tag.yaml	#d898c8	—
string.regexp	#c87088	—
meta.decorator, meta.annotation	#c0a070	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}!`;
}