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 - Robin (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#100c18
activityBar.foreground#d8dce8
activityBar.inactiveForeground#6858a0
activityBarBadge.background#b57eff
activityBarBadge.foreground#141018
badge.background#b57eff
badge.foreground#141018
breadcrumb.activeSelectionForeground#ccd7fb
breadcrumb.background#18142a
breadcrumb.focusForeground#d8dce8
breadcrumb.foreground#7868a0
button.background#6858a0
button.foreground#d8dce8
button.hoverBackground#7868b0
button.secondaryBackground#2a2440
button.secondaryForeground#d8dce8
button.secondaryHoverBackground#3a3050
charts.blue#a0a8d8
charts.foreground#d8dce8
charts.green#a0c8b8
charts.lines#d8dce8
charts.orange#d0b8a0
charts.purple#d0baff
charts.red#b08090
charts.yellow#d8c8a0
checkbox.background#100c18
checkbox.border#6858a0
checkbox.foreground#d8dce8
checkbox.selectBackground#6858a0
checkbox.selectBorder#b57eff
commandCenter.activeBackground#2a2440
commandCenter.activeBorder#b57eff
commandCenter.activeForeground#ccd7fb
commandCenter.background#18142a
commandCenter.border#2a2440
commandCenter.debuggingBackground#6858a020
commandCenter.foreground#d8dce8
commandCenter.inactiveBorder#2a244080
commandCenter.inactiveForeground#6858a0
debugConsole.errorForeground#d0a0b0
debugConsole.infoForeground#ccd7fb
debugConsole.sourceForeground#7868a0
debugConsole.warningForeground#d8c8a0
debugConsoleInputIcon.foreground#ccd7fb
debugIcon.breakpointCurrentStackframeForeground#ccd7fb
debugIcon.breakpointDisabledForeground#6858a0
debugIcon.breakpointForeground#d0a0b0
debugIcon.breakpointStackframeForeground#a0c8b8
debugIcon.breakpointUnverifiedForeground#d8c8a0
debugIcon.continueForeground#a0c8b8
debugIcon.disconnectForeground#d0a0b0
debugIcon.pauseForeground#d8c8a0
debugIcon.restartForeground#a0c8b8
debugIcon.startForeground#a0c8b8
debugIcon.stepBackForeground#ccd7fb
debugIcon.stepIntoForeground#ccd7fb
debugIcon.stepOutForeground#ccd7fb
debugIcon.stepOverForeground#ccd7fb
debugIcon.stopForeground#d0a0b0
debugTokenExpression.boolean#a0a8d8
debugTokenExpression.error#d0a0b0
debugTokenExpression.name#d8dce8
debugTokenExpression.number#a0a8d8
debugTokenExpression.string#d0baff
debugTokenExpression.value#ccd7fb
debugToolBar.background#18142a
debugToolBar.border#2a2440
debugView.exceptionLabelBackground#b08090
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#ccd7fb
debugView.stateLabelForeground#141018
debugView.valueChangedHighlight#b57eff60
descriptionForeground#7868a0
diffEditor.diagonalFill#2a244040
diffEditor.insertedLineBackground#a0c8b815
diffEditor.insertedTextBackground#a0c8b820
diffEditor.insertedTextBorder#a0c8b800
diffEditor.removedLineBackground#b0809015
diffEditor.removedTextBackground#b0809020
diffEditor.removedTextBorder#b0809000
diffEditorGutter.insertedLineBackground#a0c8b830
diffEditorGutter.removedLineBackground#b0809030
diffEditorOverview.insertedForeground#a0c8b8
diffEditorOverview.removedForeground#b08090
dropdown.background#100c18
dropdown.border#6858a0
dropdown.foreground#d8dce8
dropdown.listBackground#18142a
editor.background#141018
editor.findMatchBackground#b57eff40
editor.findMatchHighlightBackground#b57eff20
editor.focusedStackFrameHighlightBackground#a0c8b830
editor.foldBackground#6858a015
editor.foreground#d8dce8
editor.lineHighlightBackground#1c182a
editor.lineHighlightBorder#2a2440
editor.selectionBackground#6858a060
editor.stackFrameHighlightBackground#d8c8a030
editor.wordHighlightBackground#6858a030
editor.wordHighlightStrongBackground#6858a050
editorBracketHighlight.foreground1#ccd7fb
editorBracketHighlight.foreground2#d0baff
editorBracketHighlight.foreground3#de8bfe
editorBracketHighlight.foreground4#a0c8b8
editorBracketHighlight.foreground5#d8c8a0
editorBracketHighlight.foreground6#a0a8d8
editorBracketHighlight.unexpectedBracket.foreground#d0a0b0
editorBracketMatch.background#6858a030
editorBracketMatch.border#b57eff
editorCodeLens.foreground#7868a0
editorCursor.foreground#d0baff
editorError.border#d0a0b000
editorError.foreground#d0a0b0
editorGroup.border#2a2440
editorGroup.dropBackground#6858a030
editorGroup.dropIntoPromptBackground#18142a
editorGroup.dropIntoPromptBorder#b57eff
editorGroup.dropIntoPromptForeground#d8dce8
editorGroup.emptyBackground#18142a
editorGroup.focusedEmptyBorder#b57eff
editorGroupHeader.tabsBackground#18142a
editorGutter.addedBackground#78b8a0
editorGutter.deletedBackground#b08090
editorGutter.modifiedBackground#8080c0
editorHint.border#a0c8b800
editorHint.foreground#a0c8b8
editorHoverWidget.background#18142a
editorHoverWidget.border#2a2440
editorIndentGuide.activeBackground1#8078b0
editorIndentGuide.background1#2a2440
editorInfo.border#ccd7fb00
editorInfo.foreground#ccd7fb
editorInlayHint.background#2a244080
editorInlayHint.foreground#7868a0
editorInlayHint.parameterForeground#d0baff
editorInlayHint.typeForeground#ccd7fb
editorLineNumber.activeForeground#ccd7fb
editorLineNumber.foreground#6858a0
editorOverviewRuler.addedForeground#a0c8b8
editorOverviewRuler.background#18142a
editorOverviewRuler.border#2a2440
editorOverviewRuler.bracketMatchForeground#b57eff
editorOverviewRuler.commonContentForeground#7868a0
editorOverviewRuler.currentContentForeground#a0c8b8
editorOverviewRuler.deletedForeground#b08090
editorOverviewRuler.errorForeground#d0a0b0
editorOverviewRuler.findMatchForeground#b57eff80
editorOverviewRuler.incomingContentForeground#a0a8d8
editorOverviewRuler.infoForeground#ccd7fb
editorOverviewRuler.modifiedForeground#a0a8d8
editorOverviewRuler.rangeHighlightForeground#6858a040
editorOverviewRuler.selectionHighlightForeground#6858a060
editorOverviewRuler.warningForeground#d8c8a0
editorOverviewRuler.wordHighlightForeground#6858a060
editorOverviewRuler.wordHighlightStrongForeground#6858a080
editorStickyScroll.background#18142a
editorStickyScrollHover.background#2a2440
editorSuggestWidget.background#18142a
editorSuggestWidget.foreground#d8dce8
editorSuggestWidget.highlightForeground#ccd7fb
editorSuggestWidget.selectedBackground#6858a0
editorWarning.border#d8c8a000
editorWarning.foreground#d8c8a0
editorWhitespace.foreground#302848
editorWidget.background#18142a
editorWidget.border#2a2440
editorWidget.foreground#d8dce8
errorForeground#d0a0b0
extensionBadge.remoteBackground#b57eff
extensionBadge.remoteForeground#141018
extensionButton.prominentBackground#6858a0
extensionButton.prominentForeground#d8dce8
extensionButton.prominentHoverBackground#7868b0
extensionIcon.preReleaseForeground#d0baff
extensionIcon.sponsorForeground#ccd7fb
extensionIcon.starForeground#d8c8a0
extensionIcon.verifiedForeground#a0c8b8
focusBorder#b57eff
gitDecoration.addedResourceForeground#a0c8b8
gitDecoration.conflictingResourceForeground#d0baff
gitDecoration.deletedResourceForeground#b08090
gitDecoration.ignoredResourceForeground#6858a0
gitDecoration.modifiedResourceForeground#a0a8d8
gitDecoration.untrackedResourceForeground#d8c8a0
icon.foreground#d8dce8
input.background#100c18
input.border#6858a0
input.foreground#d8dce8
input.placeholderForeground#6858a0
inputOption.activeBackground#6858a0
inputOption.activeForeground#FFFFFF
keybindingLabel.background#2a2440
keybindingLabel.border#2a2440
keybindingLabel.bottomBorder#6858a0
keybindingLabel.foreground#d8dce8
list.activeSelectionBackground#6858a0
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#ccd7fb
list.focusBackground#6858a0
list.focusForeground#FFFFFF
list.hoverBackground#2a2440
list.hoverForeground#d8dce8
list.inactiveSelectionBackground#6858a050
list.inactiveSelectionForeground#d8dce8
menu.background#100c18
menu.border#2a2440
menu.foreground#d8dce8
menu.selectionBackground#6858a0
menu.selectionBorder#6858a000
menu.selectionForeground#FFFFFF
menu.separatorBackground#2a2440
menubar.selectionBackground#2a2440
menubar.selectionForeground#d8dce8
merge.border#2a2440
merge.commonContentBackground#7868a020
merge.commonHeaderBackground#7868a040
merge.currentContentBackground#a0c8b820
merge.currentHeaderBackground#a0c8b840
merge.incomingContentBackground#a0a8d820
merge.incomingHeaderBackground#a0a8d840
mergeEditor.change.background#a0a8d820
mergeEditor.change.word.background#a0a8d840
mergeEditor.conflict.handledFocused.border#a0c8b8
mergeEditor.conflict.handledUnfocused.border#a0c8b880
mergeEditor.conflict.unhandledFocused.border#d8c8a0
mergeEditor.conflict.unhandledUnfocused.border#d8c8a080
minimap.background#18142a
minimap.selectionHighlight#6858a050
notifications.background#18142a
notifications.border#2a2440
notifications.foreground#d8dce8
notificationsErrorIcon.foreground#d0a0b0
notificationsInfoIcon.foreground#ccd7fb
notificationsWarningIcon.foreground#d8c8a0
panel.background#18142a
panel.border#2a2440
panelTitle.activeBorder#b57eff
panelTitle.activeForeground#d8dce8
panelTitle.inactiveForeground#7868a0
peekView.border#b57eff
peekViewEditor.background#18142a
peekViewResult.background#18142a
peekViewResult.matchHighlightBackground#b57eff40
peekViewTitle.background#2a2440
peekViewTitleLabel.foreground#d8dce8
progressBar.background#b57eff
quickInput.background#18142a
quickInput.foreground#d8dce8
quickInputList.focusBackground#6858a0
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#ccd7fb
quickInputTitle.background#2a2440
scrollbarSlider.activeBackground#b57eff
scrollbarSlider.background#6858a050
scrollbarSlider.hoverBackground#6858a0
selection.background#6858a060
settings.checkboxBackground#100c18
settings.checkboxBorder#6858a0
settings.checkboxForeground#d8dce8
settings.dropdownBackground#100c18
settings.dropdownBorder#2a2440
settings.dropdownForeground#d8dce8
settings.dropdownListBorder#2a2440
settings.focusedRowBackground#2a244040
settings.focusedRowBorder#b57eff80
settings.headerForeground#d8dce8
settings.modifiedItemIndicator#b57eff
settings.numberInputBackground#100c18
settings.numberInputBorder#6858a0
settings.numberInputForeground#d8dce8
settings.rowHoverBackground#2a244020
settings.sashBorder#2a2440
settings.textInputBackground#100c18
settings.textInputBorder#6858a0
settings.textInputForeground#d8dce8
sideBar.background#18142a
sideBar.border#2a2440
sideBar.foreground#d8dce8
sideBarSectionHeader.background#2a2440
sideBarSectionHeader.foreground#d8dce8
sideBarTitle.foreground#ccd7fb
statusBar.background#6241bc
statusBar.debuggingBackground#b57eff
statusBar.debuggingForeground#141018
statusBar.foreground#d8dce8
statusBar.noFolderBackground#141018
statusBar.noFolderForeground#d8dce8
symbolIcon.arrayForeground#d8dce8
symbolIcon.booleanForeground#a0a8d8
symbolIcon.classForeground#d0baff
symbolIcon.colorForeground#b57eff
symbolIcon.constantForeground#a0a8d8
symbolIcon.constructorForeground#d0baff
symbolIcon.enumeratorForeground#d8c8a0
symbolIcon.enumeratorMemberForeground#a0a8d8
symbolIcon.eventForeground#d8c8a0
symbolIcon.fieldForeground#a0a8d8
symbolIcon.fileForeground#7868a0
symbolIcon.folderForeground#7868a0
symbolIcon.functionForeground#ccd7fb
symbolIcon.interfaceForeground#a0c8b8
symbolIcon.keyForeground#d8dce8
symbolIcon.keywordForeground#d0baff
symbolIcon.methodForeground#ccd7fb
symbolIcon.moduleForeground#d0baff
symbolIcon.namespaceForeground#d0baff
symbolIcon.nullForeground#b08090
symbolIcon.numberForeground#a0a8d8
symbolIcon.objectForeground#d8dce8
symbolIcon.operatorForeground#7868a0
symbolIcon.packageForeground#d0baff
symbolIcon.propertyForeground#d8dce8
symbolIcon.referenceForeground#a0a8d8
symbolIcon.snippetForeground#7868a0
symbolIcon.stringForeground#d0baff
symbolIcon.structForeground#d8dce8
symbolIcon.textForeground#d8dce8
symbolIcon.typeParameterForeground#a0c8b8
symbolIcon.unitForeground#a0a8d8
symbolIcon.variableForeground#d8dce8
tab.activeBackground#141018
tab.activeBorder#b57eff
tab.activeForeground#ccd7fb
tab.border#2a2440
tab.hoverBackground#2a2440
tab.hoverForeground#d8dce8
tab.inactiveBackground#18142a
tab.inactiveForeground#7868a0
terminal.ansiBlack#2a2440
terminal.ansiBlue#a0a8d8
terminal.ansiBrightBlack#6858a0
terminal.ansiBrightBlue#b0b8e8
terminal.ansiBrightCyan#b0d8f0
terminal.ansiBrightGreen#b0d8c8
terminal.ansiBrightMagenta#e0c8ff
terminal.ansiBrightRed#e0b8c0
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#e8d8b0
terminal.ansiCyan#a0c8e0
terminal.ansiGreen#a0c8b8
terminal.ansiMagenta#d0baff
terminal.ansiRed#d0a0b0
terminal.ansiWhite#d8dce8
terminal.ansiYellow#d8c8a0
terminal.background#141018
terminal.foreground#d8dce8
testing.iconErrored#b08090
testing.iconFailed#b08090
testing.iconPassed#a0c8b8
testing.iconQueued#d8c8a0
testing.iconSkipped#6858a0
testing.iconUnset#6858a0
testing.peekBorder#b08090
testing.peekHeaderBackground#b0809020
testing.runAction#a0c8b8
textLink.activeForeground#e0e8ff
textLink.foreground#ccd7fb
titleBar.activeBackground#18142a
titleBar.activeForeground#d8dce8
titleBar.inactiveBackground#141018
titleBar.inactiveForeground#6858a0
walkThrough.embeddedEditorBackground#18142a
welcomePage.background#141018
welcomePage.progress.background#2a2440
welcomePage.progress.foreground#b57eff
welcomePage.tileBackground#18142a
welcomePage.tileBorder#2a2440
welcomePage.tileHoverBackground#2a2440

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6868a0	italic
keyword, storage	#ccd7fb	bold
entity.name.function, support.function	#de8bfe	bold
entity.name.type, support.class, support.type, storage.type	#d8dce8	bold
string	#d0baff	—
constant.character.escape	#ccd7fb	—
variable, support.variable	#d8dce8	—
constant.numeric, constant.character, constant	#a0b0e0	—
constant.language, support.constant, variable.language	#b0a8d8	—
keyword.operator	#9090b8	—
punctuation	#8080a8	—
entity.name.tag	#ccd7fb	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#de8bfe	italic
meta.selector, entity.name.tag.css	#d8dce8	—
meta.property-name, support.type.property-name	#ccd7fb	—
meta.property-value, support.constant.property-value	#d0baff	—
markup.heading	#ccd7fb	bold
markup.bold	#d8dce8	bold
markup.italic	#d8dce8	italic
meta.link	#b0a8d8	—
markup.list	#ccd7fb	—
markup.inline.raw	#d0baff	—
markup.inserted	#a0c8b8	—
markup.deleted	#b08090	—
markup.changed	#a0a8d8	—

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