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 - March 7th (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#180a20
activityBar.foreground#f0d8e8
activityBar.inactiveForeground#a880a8
activityBarBadge.background#fab3ca
activityBarBadge.foreground#FFFFFF
badge.background#fab3ca
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#fab3ca
breadcrumb.background#281c38
breadcrumb.focusForeground#f0d8e8
breadcrumb.foreground#a890b8
button.background#dca9cc
button.foreground#FFFFFF
button.hoverBackground#b898d8
button.secondaryBackground#16255f
button.secondaryForeground#f0d8e8
button.secondaryHoverBackground#4a3f8f
charts.blue#c8b8e8
charts.foreground#f0d8e8
charts.green#90e8d8
charts.lines#38283880
charts.orange#88ecfb
charts.purple#c8b8e8
charts.red#f0b8d8
charts.yellow#e8b888
checkbox.background#180a20
checkbox.border#38283880
checkbox.foreground#f0d8e8
checkbox.selectBackground#dca9cc
checkbox.selectBorder#dca9cc
commandCenter.activeBackground#382850
commandCenter.activeBorder#dca9cc
commandCenter.activeForeground#fab3ca
commandCenter.background#281c38
commandCenter.border#382850
commandCenter.debuggingBackground#dca9cc20
commandCenter.foreground#f0d8e8
commandCenter.inactiveBorder#38285080
commandCenter.inactiveForeground#a880a8
debugConsole.errorForeground#f0b8d8
debugConsole.infoForeground#c8b8e8
debugConsole.sourceForeground#a890b8
debugConsole.warningForeground#e8b888
debugConsoleInputIcon.foreground#fab3ca
debugIcon.breakpointCurrentStackframeForeground#fab3ca
debugIcon.breakpointDisabledForeground#a880a8
debugIcon.breakpointForeground#f0b8d8
debugIcon.breakpointStackframeForeground#90e8d8
debugIcon.breakpointUnverifiedForeground#e8b888
debugIcon.continueForeground#90e8d8
debugIcon.disconnectForeground#f0b8d8
debugIcon.pauseForeground#e8b888
debugIcon.restartForeground#90e8d8
debugIcon.startForeground#90e8d8
debugIcon.stepBackForeground#fab3ca
debugIcon.stepIntoForeground#fab3ca
debugIcon.stepOutForeground#fab3ca
debugIcon.stepOverForeground#fab3ca
debugIcon.stopForeground#f0b8d8
debugTokenExpression.boolean#fab3ca
debugTokenExpression.error#f0b8d8
debugTokenExpression.name#f0d8e8
debugTokenExpression.number#c8b8e8
debugTokenExpression.string#f0e8f8
debugTokenExpression.value#fab3ca
debugToolBar.background#281c38
debugToolBar.border#382850
debugView.exceptionLabelBackground#f0b8d0
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#dca9cc
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#fab3ca60
descriptionForeground#a890b8
diffEditor.diagonalFill#38285040
diffEditor.insertedLineBackground#90e8d815
diffEditor.insertedTextBackground#90e8d820
diffEditor.insertedTextBorder#90e8d800
diffEditor.removedLineBackground#f0b8d015
diffEditor.removedTextBackground#f0b8d020
diffEditor.removedTextBorder#f0b8d000
diffEditorGutter.insertedLineBackground#90e8d830
diffEditorGutter.removedLineBackground#f0b8d030
diffEditorOverview.insertedForeground#90e8d8
diffEditorOverview.removedForeground#f0b8d0
dropdown.background#180a20
dropdown.border#38283880
dropdown.foreground#f0d8e8
dropdown.listBackground#281c38
editor.background#281828
editor.findMatchBackground#fab3ca50
editor.findMatchHighlightBackground#fab3ca25
editor.focusedStackFrameHighlightBackground#90e8d830
editor.foldBackground#dca9cc15
editor.foreground#f0d8e8
editor.lineHighlightBackground#201828
editor.lineHighlightBorder#38283840
editor.selectionBackground#fab3ca50
editor.stackFrameHighlightBackground#e8b88830
editor.wordHighlightBackground#dca9cc30
editor.wordHighlightStrongBackground#fab3ca50
editorBracketHighlight.foreground1#fab3ca
editorBracketHighlight.foreground2#f0b8d8
editorBracketHighlight.foreground3#c8b8e8
editorBracketHighlight.foreground4#90e8d8
editorBracketHighlight.foreground5#e8b888
editorBracketHighlight.foreground6#c8b8e8
editorBracketHighlight.unexpectedBracket.foreground#f0b8d8
editorBracketMatch.background#dca9cc40
editorBracketMatch.border#dca9cc
editorCodeLens.foreground#a880a8
editorCursor.foreground#fab3ca
editorError.border#f0b8d800
editorError.foreground#f0b8d8
editorGroup.border#382850
editorGroup.dropBackground#dca9cc30
editorGroup.dropIntoPromptBackground#281c38
editorGroup.dropIntoPromptBorder#dca9cc
editorGroup.dropIntoPromptForeground#f0d8e8
editorGroup.emptyBackground#281c38
editorGroup.focusedEmptyBorder#dca9cc
editorGroupHeader.tabsBackground#281c38
editorGutter.addedBackground#90e8d8
editorGutter.deletedBackground#f0b8d0
editorGutter.modifiedBackground#c8b8e8
editorHint.border#90e8d800
editorHint.foreground#90e8d8
editorHoverWidget.background#281c38
editorHoverWidget.border#38283880
editorIndentGuide.activeBackground1#dca9cc
editorIndentGuide.background1#38283880
editorInfo.border#c8b8e800
editorInfo.foreground#c8b8e8
editorInlayHint.background#38285080
editorInlayHint.foreground#c8acd0
editorInlayHint.parameterForeground#c8b8e8
editorInlayHint.typeForeground#fab3ca
editorLineNumber.activeForeground#fab3ca
editorLineNumber.foreground#a880a8
editorOverviewRuler.addedForeground#90e8d8
editorOverviewRuler.background#281c38
editorOverviewRuler.border#382850
editorOverviewRuler.bracketMatchForeground#dca9cc
editorOverviewRuler.commonContentForeground#a890b8
editorOverviewRuler.currentContentForeground#90e8d8
editorOverviewRuler.deletedForeground#f0b8d0
editorOverviewRuler.errorForeground#f0b8d8
editorOverviewRuler.findMatchForeground#fab3ca80
editorOverviewRuler.incomingContentForeground#c8b8e8
editorOverviewRuler.infoForeground#c8b8e8
editorOverviewRuler.modifiedForeground#c8b8e8
editorOverviewRuler.rangeHighlightForeground#dca9cc40
editorOverviewRuler.selectionHighlightForeground#fab3ca60
editorOverviewRuler.warningForeground#e8b888
editorOverviewRuler.wordHighlightForeground#fab3ca60
editorOverviewRuler.wordHighlightStrongForeground#dca9cc80
editorStickyScroll.background#281c38
editorStickyScrollHover.background#382850
editorSuggestWidget.background#281c38
editorSuggestWidget.foreground#f0d8e8
editorSuggestWidget.highlightForeground#fab3ca
editorSuggestWidget.selectedBackground#dca9cc
editorWarning.border#e8b88800
editorWarning.foreground#e8b888
editorWhitespace.foreground#38283860
editorWidget.background#281c38
editorWidget.border#38283880
editorWidget.foreground#f0d8e8
errorForeground#f0b8d8
extensionBadge.remoteBackground#dca9cc
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#dca9cc
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#16255f
extensionIcon.preReleaseForeground#fab3ca
extensionIcon.sponsorForeground#fab3ca
extensionIcon.starForeground#e8b888
extensionIcon.verifiedForeground#90e8d8
focusBorder#dca9cc
gitDecoration.addedResourceForeground#90e8d8
gitDecoration.conflictingResourceForeground#f0b8d8
gitDecoration.deletedResourceForeground#f0b8d8
gitDecoration.ignoredResourceForeground#a880a8
gitDecoration.modifiedResourceForeground#c8b8e8
gitDecoration.untrackedResourceForeground#e8b888
icon.foreground#f0d8e8
input.background#180a20
input.border#38283880
input.foreground#f0d8e8
input.placeholderForeground#a880a8
inputOption.activeBackground#dca9cc
inputOption.activeForeground#FFFFFF
keybindingLabel.background#382850
keybindingLabel.border#382850
keybindingLabel.bottomBorder#a880a8
keybindingLabel.foreground#f0d8e8
list.activeSelectionBackground#dca9cc
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#fab3ca50
list.focusForeground#f0d8e8
list.hoverBackground#382850
list.hoverForeground#f0d8e8
list.inactiveSelectionBackground#38285080
list.inactiveSelectionForeground#f0d8e8
menu.background#180a20
menu.border#382850
menu.foreground#f0d8e8
menu.selectionBackground#dca9cc
menu.selectionBorder#dca9cc00
menu.selectionForeground#FFFFFF
menu.separatorBackground#38283880
menubar.selectionBackground#382850
menubar.selectionForeground#f0d8e8
merge.border#382850
merge.commonContentBackground#a890b820
merge.commonHeaderBackground#a890b840
merge.currentContentBackground#90e8d820
merge.currentHeaderBackground#90e8d840
merge.incomingContentBackground#c8b8e820
merge.incomingHeaderBackground#c8b8e840
mergeEditor.change.background#c8b8e820
mergeEditor.change.word.background#c8b8e840
mergeEditor.conflict.handledFocused.border#90e8d8
mergeEditor.conflict.handledUnfocused.border#90e8d880
mergeEditor.conflict.unhandledFocused.border#e8b888
mergeEditor.conflict.unhandledUnfocused.border#e8b88880
minimap.background#281c38
minimap.selectionHighlight#fab3ca60
notifications.background#281c38
notifications.border#382850
notifications.foreground#f0d8e8
notificationsErrorIcon.foreground#f0b8d8
notificationsInfoIcon.foreground#c8b8e8
notificationsWarningIcon.foreground#e8b888
panel.background#281c38
panel.border#382850
panelTitle.activeBorder#dca9cc
panelTitle.activeForeground#f0d8e8
panelTitle.inactiveForeground#a890b8
peekView.border#dca9cc
peekViewEditor.background#281c38
peekViewResult.background#281c38
peekViewResult.matchHighlightBackground#fab3ca50
peekViewTitle.background#382850
peekViewTitleLabel.foreground#f0d8e8
progressBar.background#dca9cc
quickInput.background#281c38
quickInput.foreground#f0d8e8
quickInputList.focusBackground#dca9cc
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#382850
scrollbarSlider.activeBackground#dca9cc
scrollbarSlider.background#38283880
scrollbarSlider.hoverBackground#48404a
selection.background#fab3ca60
settings.checkboxBackground#180a20
settings.checkboxBorder#dca9cc
settings.checkboxForeground#f0d8e8
settings.dropdownBackground#180a20
settings.dropdownBorder#382850
settings.dropdownForeground#f0d8e8
settings.dropdownListBorder#382850
settings.focusedRowBackground#38285040
settings.focusedRowBorder#dca9cc80
settings.headerForeground#f0d8e8
settings.modifiedItemIndicator#dca9cc
settings.numberInputBackground#180a20
settings.numberInputBorder#dca9cc
settings.numberInputForeground#f0d8e8
settings.rowHoverBackground#38285020
settings.sashBorder#382850
settings.textInputBackground#180a20
settings.textInputBorder#dca9cc
settings.textInputForeground#f0d8e8
sideBar.background#281c38
sideBar.border#382850
sideBar.foreground#f0d8e8
sideBarSectionHeader.background#382850
sideBarSectionHeader.foreground#f0d8e8
sideBarTitle.foreground#fab3ca
statusBar.background#dca9cc
statusBar.debuggingBackground#16255f
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#281828
statusBar.noFolderForeground#f0d8e8
symbolIcon.arrayForeground#f0d8e8
symbolIcon.booleanForeground#fab3ca
symbolIcon.classForeground#c8b8e8
symbolIcon.colorForeground#88ecfb
symbolIcon.constantForeground#c8b8e8
symbolIcon.constructorForeground#fab3ca
symbolIcon.enumeratorForeground#e8b888
symbolIcon.enumeratorMemberForeground#c8b8e8
symbolIcon.eventForeground#e8b888
symbolIcon.fieldForeground#c8b8e8
symbolIcon.fileForeground#a890b8
symbolIcon.folderForeground#e8b888
symbolIcon.functionForeground#fab3ca
symbolIcon.interfaceForeground#90e8d8
symbolIcon.keyForeground#f0d8e8
symbolIcon.keywordForeground#fab3ca
symbolIcon.methodForeground#fab3ca
symbolIcon.moduleForeground#c8b8e8
symbolIcon.namespaceForeground#c8b8e8
symbolIcon.nullForeground#f0b8d8
symbolIcon.numberForeground#c8b8e8
symbolIcon.objectForeground#f0d8e8
symbolIcon.operatorForeground#a890b8
symbolIcon.packageForeground#c8b8e8
symbolIcon.propertyForeground#c8b8e8
symbolIcon.referenceForeground#c8b8e8
symbolIcon.snippetForeground#a890b8
symbolIcon.stringForeground#f0e8f8
symbolIcon.structForeground#f0d8e8
symbolIcon.textForeground#f0d8e8
symbolIcon.typeParameterForeground#90e8d8
symbolIcon.unitForeground#c8b8e8
symbolIcon.variableForeground#c8b8e8
tab.activeBackground#281828
tab.activeBorder#dca9cc
tab.activeForeground#fab3ca
tab.border#382850
tab.hoverBackground#382850
tab.hoverForeground#f0d8e8
tab.inactiveBackground#281c38
tab.inactiveForeground#a890b8
terminal.ansiBlack#382850
terminal.ansiBlue#c8b8e8
terminal.ansiBrightBlack#a890b8
terminal.ansiBrightBlue#d8d0f8
terminal.ansiBrightCyan#88ecfb
terminal.ansiBrightGreen#c8f8e8
terminal.ansiBrightMagenta#88ecfb
terminal.ansiBrightRed#f8d8f0
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#f8f8c8
terminal.ansiCyan#fab3ca
terminal.ansiGreen#90e8d8
terminal.ansiMagenta#fab3ca
terminal.ansiRed#f0b8d8
terminal.ansiWhite#f0d8e8
terminal.ansiYellow#e8b888
terminal.background#281828
terminal.foreground#f0d8e8
testing.iconErrored#f0b8d0
testing.iconFailed#f0b8d0
testing.iconPassed#90e8d8
testing.iconQueued#e8b888
testing.iconSkipped#a880a8
testing.iconUnset#a880a8
testing.peekBorder#f0b8d0
testing.peekHeaderBackground#f0b8d020
testing.runAction#90e8d8
textLink.activeForeground#88ecfb
textLink.foreground#fab3ca
titleBar.activeBackground#281c38
titleBar.activeForeground#f0d8e8
titleBar.inactiveBackground#281828
titleBar.inactiveForeground#a880a8
walkThrough.embeddedEditorBackground#281c38
welcomePage.background#281828
welcomePage.progress.background#382850
welcomePage.progress.foreground#dca9cc
welcomePage.tileBackground#281c38
welcomePage.tileBorder#382850
welcomePage.tileHoverBackground#382850

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#a890b8	italic
keyword, storage	#fab3ca	bold
keyword.control, keyword.control.flow	#d8b8e8	bold
entity.name.function, support.function	#c8b8e8	bold
entity.name.type, support.class, support.type, storage.type	#e8d8f8	bold
string	#f0e8f8	—
constant.character.escape	#f0b8d8	—
variable, support.variable	#f0d8e8	—
variable.parameter	#e8d8f0	italic
constant.numeric, constant.character, constant	#c8b8e8	—
constant.language, support.constant, variable.language	#fab3ca	—
keyword.operator	#b098e8	—
punctuation	#b098d8	—
entity.name.tag	#fab3ca	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#88ecfb	italic
meta.selector, entity.name.tag.css	#f0d8e8	—
meta.property-name, support.type.property-name	#fab3ca	—
meta.property-value, support.constant.property-value	#f0e8f8	—
keyword.other.unit	#c8b8e8	—
markup.heading	#fab3ca	bold
markup.bold	#f0d8e8	bold
markup.italic	#f0d8e8	italic
meta.link	#88ecfb	—
markup.list	#fab3ca	—
markup.inline.raw	#f0e8f8	—
markup.inserted	#90e8d8	—
markup.deleted	#f0b8d8	—
markup.changed	#c8b8e8	—
support.type.property-name.json	#fab3ca	—
entity.name.tag.yaml	#88ecfb	—
string.regexp	#f0b8d8	—
meta.decorator, meta.annotation	#e8b888	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}!`;
}