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 - Dan Heng (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#061014
activityBar.foreground#E8ECEC
activityBar.inactiveForeground#3A5560
activityBarBadge.background#790000
activityBarBadge.foreground#FFFFFF
badge.background#790000
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#A03030
breadcrumb.background#0A1418
breadcrumb.focusForeground#E8ECEC
breadcrumb.foreground#4A6670
button.background#2E5B63
button.foreground#FFFFFF
button.hoverBackground#3A6E78
button.secondaryBackground#162428
button.secondaryForeground#E8ECEC
button.secondaryHoverBackground#1A2A30
charts.blue#790000
charts.foreground#E8ECEC
charts.green#4A8898
charts.lines#790000
charts.orange#A03030
charts.purple#790000
charts.red#A03030
charts.yellow#B87000
checkbox.background#061014
checkbox.border#790000
checkbox.foreground#E8ECEC
checkbox.selectBackground#790000
checkbox.selectBorder#790000
commandCenter.activeBackground#0E1A1E
commandCenter.activeBorder#790000
commandCenter.activeForeground#790000
commandCenter.background#0A1418
commandCenter.border#0E1A1E
commandCenter.debuggingBackground#79000020
commandCenter.foreground#E8ECEC
commandCenter.inactiveBorder#0E1A1E80
commandCenter.inactiveForeground#4A6670
debugConsole.errorForeground#A03030
debugConsole.infoForeground#4A8898
debugConsole.sourceForeground#4A6670
debugConsole.warningForeground#B87000
debugConsoleInputIcon.foreground#A03030
debugIcon.breakpointCurrentStackframeForeground#A03030
debugIcon.breakpointDisabledForeground#4A6670
debugIcon.breakpointForeground#A03030
debugIcon.breakpointStackframeForeground#4A8898
debugIcon.breakpointUnverifiedForeground#B87000
debugIcon.continueForeground#4A8898
debugIcon.disconnectForeground#A03030
debugIcon.pauseForeground#B87000
debugIcon.restartForeground#4A8898
debugIcon.startForeground#4A8898
debugIcon.stepBackForeground#790000
debugIcon.stepIntoForeground#790000
debugIcon.stepOutForeground#790000
debugIcon.stepOverForeground#790000
debugIcon.stopForeground#A03030
debugTokenExpression.boolean#790000
debugTokenExpression.error#A03030
debugTokenExpression.name#790000
debugTokenExpression.number#2E5B63
debugTokenExpression.string#A03030
debugTokenExpression.value#A03030
debugToolBar.background#0A1418
debugToolBar.border#0E1A1E
debugView.exceptionLabelBackground#A03030
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#790000
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#A0303060
descriptionForeground#4A6670
diffEditor.diagonalFill#0E1A1E40
diffEditor.insertedLineBackground#4A889815
diffEditor.insertedTextBackground#4A889820
diffEditor.insertedTextBorder#4A889800
diffEditor.removedLineBackground#A0303015
diffEditor.removedTextBackground#A0303020
diffEditor.removedTextBorder#A0303000
diffEditorGutter.insertedLineBackground#4A889830
diffEditorGutter.removedLineBackground#A0303030
diffEditorOverview.insertedForeground#4A8898
diffEditorOverview.removedForeground#A03030
dropdown.background#061014
dropdown.border#2E5B63
dropdown.foreground#E8ECEC
dropdown.listBackground#0A1418
editor.background#0E1A1E
editor.findMatchBackground#79000060
editor.findMatchHighlightBackground#79000030
editor.focusedStackFrameHighlightBackground#4A889830
editor.foldBackground#79000015
editor.foreground#E8ECEC
editor.lineHighlightBackground#162428
editor.lineHighlightBorder#2E5B6340
editor.selectionBackground#2E5B6350
editor.stackFrameHighlightBackground#B8700030
editor.wordHighlightBackground#2E5B6330
editor.wordHighlightStrongBackground#2E5B6350
editorBracketHighlight.foreground1#790000
editorBracketHighlight.foreground2#A03030
editorBracketHighlight.foreground3#790000
editorBracketHighlight.foreground4#4A8898
editorBracketHighlight.foreground5#B87000
editorBracketHighlight.foreground6#2E5B63
editorBracketHighlight.unexpectedBracket.foreground#A03030
editorBracketMatch.background#2E5B6330
editorBracketMatch.border#2E5B63
editorCodeLens.foreground#4A6670
editorCursor.foreground#C04040
editorError.border#A0303000
editorError.foreground#A03030
editorGroup.border#0E1A1E
editorGroup.dropBackground#79000030
editorGroup.dropIntoPromptBackground#0A1418
editorGroup.dropIntoPromptBorder#790000
editorGroup.dropIntoPromptForeground#E8ECEC
editorGroup.emptyBackground#0A1418
editorGroup.focusedEmptyBorder#790000
editorGroupHeader.tabsBackground#061014
editorGutter.addedBackground#4A8898
editorGutter.deletedBackground#790000
editorGutter.modifiedBackground#A03030
editorHint.border#4A889800
editorHint.foreground#4A8898
editorHoverWidget.background#0A1418
editorHoverWidget.border#2E5B63
editorIndentGuide.activeBackground1#2E5B63
editorIndentGuide.background1#1A2A30
editorInfo.border#4A889800
editorInfo.foreground#4A8898
editorInlayHint.background#0E1A1E80
editorInlayHint.foreground#4A6670
editorInlayHint.parameterForeground#A03030
editorInlayHint.typeForeground#790000
editorLineNumber.activeForeground#E8ECEC
editorLineNumber.foreground#4A6670
editorOverviewRuler.addedForeground#4A8898
editorOverviewRuler.background#0A1418
editorOverviewRuler.border#0E1A1E
editorOverviewRuler.bracketMatchForeground#790000
editorOverviewRuler.commonContentForeground#4A6670
editorOverviewRuler.currentContentForeground#4A8898
editorOverviewRuler.deletedForeground#A03030
editorOverviewRuler.errorForeground#A03030
editorOverviewRuler.findMatchForeground#A0303080
editorOverviewRuler.incomingContentForeground#A03030
editorOverviewRuler.infoForeground#4A8898
editorOverviewRuler.modifiedForeground#A03030
editorOverviewRuler.rangeHighlightForeground#79000040
editorOverviewRuler.selectionHighlightForeground#79000060
editorOverviewRuler.warningForeground#B87000
editorOverviewRuler.wordHighlightForeground#79000060
editorOverviewRuler.wordHighlightStrongForeground#79000080
editorStickyScroll.background#0A1418
editorStickyScrollHover.background#0E1A1E
editorSuggestWidget.background#0A1418
editorSuggestWidget.foreground#E8ECEC
editorSuggestWidget.highlightForeground#A03030
editorSuggestWidget.selectedBackground#162428
editorWarning.border#B8700000
editorWarning.foreground#B87000
editorWhitespace.foreground#2E5B6340
editorWidget.background#0A1418
editorWidget.border#2E5B63
editorWidget.foreground#E8ECEC
errorForeground#A03030
extensionBadge.remoteBackground#A03030
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#790000
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#061014
extensionIcon.preReleaseForeground#790000
extensionIcon.sponsorForeground#A03030
extensionIcon.starForeground#B87000
extensionIcon.verifiedForeground#4A8898
focusBorder#2E5B63
gitDecoration.addedResourceForeground#4A8898
gitDecoration.conflictingResourceForeground#C04040
gitDecoration.deletedResourceForeground#790000
gitDecoration.ignoredResourceForeground#4A6670
gitDecoration.modifiedResourceForeground#A03030
gitDecoration.untrackedResourceForeground#B87000
icon.foreground#E8ECEC
input.background#061014
input.border#2E5B63
input.foreground#E8ECEC
input.placeholderForeground#4A6670
inputOption.activeBackground#2E5B63
inputOption.activeForeground#FFFFFF
keybindingLabel.background#0E1A1E
keybindingLabel.border#0E1A1E
keybindingLabel.bottomBorder#4A6670
keybindingLabel.foreground#E8ECEC
list.activeSelectionBackground#2E5B63
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#2E5B63
list.focusForeground#FFFFFF
list.hoverBackground#162428
list.hoverForeground#E8ECEC
list.inactiveSelectionBackground#2E5B6340
list.inactiveSelectionForeground#E8ECEC
menu.background#061014
menu.border#0E1A1E
menu.foreground#E8ECEC
menu.selectionBackground#790000
menu.selectionBorder#79000000
menu.selectionForeground#FFFFFF
menu.separatorBackground#0E1A1E
menubar.selectionBackground#0E1A1E
menubar.selectionForeground#E8ECEC
merge.border#0E1A1E
merge.commonContentBackground#4A667020
merge.commonHeaderBackground#4A667040
merge.currentContentBackground#4A889820
merge.currentHeaderBackground#4A889840
merge.incomingContentBackground#A0303020
merge.incomingHeaderBackground#A0303040
mergeEditor.change.background#A0303020
mergeEditor.change.word.background#A0303040
mergeEditor.conflict.handledFocused.border#4A8898
mergeEditor.conflict.handledUnfocused.border#4A889880
mergeEditor.conflict.unhandledFocused.border#B87000
mergeEditor.conflict.unhandledUnfocused.border#B8700080
minimap.background#0A1418
minimap.selectionHighlight#2E5B6340
notifications.background#0A1418
notifications.border#2E5B63
notifications.foreground#E8ECEC
notificationsErrorIcon.foreground#A03030
notificationsInfoIcon.foreground#4A8898
notificationsWarningIcon.foreground#B87000
panel.background#0A1418
panel.border#2E5B63
panelTitle.activeBorder#A03030
panelTitle.activeForeground#E8ECEC
panelTitle.inactiveForeground#4A6670
peekView.border#A03030
peekViewEditor.background#0A1418
peekViewResult.background#0A1418
peekViewResult.matchHighlightBackground#79000050
peekViewTitle.background#061014
peekViewTitleLabel.foreground#E8ECEC
progressBar.background#A03030
quickInput.background#0A1418
quickInput.foreground#E8ECEC
quickInputList.focusBackground#790000
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#061014
scrollbarSlider.activeBackground#A03030
scrollbarSlider.background#2E5B6340
scrollbarSlider.hoverBackground#2E5B6380
selection.background#2E5B6350
settings.checkboxBackground#061014
settings.checkboxBorder#790000
settings.checkboxForeground#E8ECEC
settings.dropdownBackground#061014
settings.dropdownBorder#0E1A1E
settings.dropdownForeground#E8ECEC
settings.dropdownListBorder#0E1A1E
settings.focusedRowBackground#0E1A1E40
settings.focusedRowBorder#79000080
settings.headerForeground#E8ECEC
settings.modifiedItemIndicator#A03030
settings.numberInputBackground#061014
settings.numberInputBorder#790000
settings.numberInputForeground#E8ECEC
settings.rowHoverBackground#0E1A1E20
settings.sashBorder#0E1A1E
settings.textInputBackground#061014
settings.textInputBorder#790000
settings.textInputForeground#E8ECEC
sideBar.background#0A1418
sideBar.border#0E1A1E
sideBar.foreground#E8ECEC
sideBarSectionHeader.background#0E1A1E
sideBarSectionHeader.foreground#E8ECEC
sideBarTitle.foreground#4A8898
statusBar.background#2E5B63
statusBar.debuggingBackground#790000
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#0E1A1E
statusBar.noFolderForeground#E8ECEC
symbolIcon.arrayForeground#790000
symbolIcon.booleanForeground#790000
symbolIcon.classForeground#E8ECEC
symbolIcon.colorForeground#A03030
symbolIcon.constantForeground#2E5B63
symbolIcon.constructorForeground#790000
symbolIcon.enumeratorForeground#B87000
symbolIcon.enumeratorMemberForeground#2E5B63
symbolIcon.eventForeground#B87000
symbolIcon.fieldForeground#2E5B63
symbolIcon.fileForeground#4A6670
symbolIcon.folderForeground#4A6670
symbolIcon.functionForeground#A03030
symbolIcon.interfaceForeground#4A8898
symbolIcon.keyForeground#790000
symbolIcon.keywordForeground#790000
symbolIcon.methodForeground#A03030
symbolIcon.moduleForeground#790000
symbolIcon.namespaceForeground#790000
symbolIcon.nullForeground#A03030
symbolIcon.numberForeground#2E5B63
symbolIcon.objectForeground#E8ECEC
symbolIcon.operatorForeground#4A6670
symbolIcon.packageForeground#790000
symbolIcon.propertyForeground#790000
symbolIcon.referenceForeground#2E5B63
symbolIcon.snippetForeground#4A6670
symbolIcon.stringForeground#A03030
symbolIcon.structForeground#E8ECEC
symbolIcon.textForeground#E8ECEC
symbolIcon.typeParameterForeground#4A8898
symbolIcon.unitForeground#2E5B63
symbolIcon.variableForeground#E8ECEC
tab.activeBackground#0E1A1E
tab.activeBorder#A03030
tab.activeForeground#E8ECEC
tab.border#061014
tab.hoverBackground#162428
tab.hoverForeground#E8ECEC
tab.inactiveBackground#0A1418
tab.inactiveForeground#4A6670
terminal.ansiBlack#061014
terminal.ansiBlue#2E5B63
terminal.ansiBrightBlack#4A6670
terminal.ansiBrightBlue#3A6E78
terminal.ansiBrightCyan#5A9AA8
terminal.ansiBrightGreen#5A9AA8
terminal.ansiBrightMagenta#A03030
terminal.ansiBrightRed#C04040
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#D09020
terminal.ansiCyan#4A8898
terminal.ansiGreen#4A8898
terminal.ansiMagenta#790000
terminal.ansiRed#A03030
terminal.ansiWhite#E8ECEC
terminal.ansiYellow#B87000
terminal.background#0E1A1E
terminal.foreground#E8ECEC
testing.iconErrored#A03030
testing.iconFailed#A03030
testing.iconPassed#4A8898
testing.iconQueued#B87000
testing.iconSkipped#4A6670
testing.iconUnset#4A6670
testing.peekBorder#A03030
testing.peekHeaderBackground#A0303020
testing.runAction#4A8898
textLink.activeForeground#A03030
textLink.foreground#4A8898
titleBar.activeBackground#0A1418
titleBar.activeForeground#E8ECEC
titleBar.inactiveBackground#061014
titleBar.inactiveForeground#3A5560
walkThrough.embeddedEditorBackground#0A1418
welcomePage.background#0E1A1E
welcomePage.progress.background#0E1A1E
welcomePage.progress.foreground#790000
welcomePage.tileBackground#0A1418
welcomePage.tileBorder#0E1A1E
welcomePage.tileHoverBackground#0E1A1E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#5A7A80	italic
keyword, storage	#C04040	bold
entity.name.function, support.function	#5A9AA8	bold
entity.name.type, support.class, support.type, storage.type	#E8ECEC	bold
string	#6AB0B8	—
constant.character.escape	#C04040	—
variable, support.variable	#E8ECEC	—
constant.numeric, constant.character, constant	#D05050	—
constant.language, support.constant, variable.language	#C04040	—
keyword.operator	#6AB0B8	—
punctuation	#5A8A90	—
entity.name.tag	#C04040	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#5A9AA8	italic
meta.selector, entity.name.tag.css	#E8ECEC	—
meta.property-name, support.type.property-name	#C04040	—
meta.property-value, support.constant.property-value	#6AB0B8	—
markup.heading	#C04040	bold
markup.bold	#E8ECEC	bold
markup.italic	#E8ECEC	italic
meta.link	#5A9AA8	—
markup.list	#C04040	—
markup.inline.raw	#6AB0B8	—
markup.inserted	#5A9AA8	—
markup.deleted	#C04040	—
markup.changed	#B87000	—

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