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 — Genshin Impact - Layla (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#0a1420
activityBar.foreground#d8ecf8
activityBar.inactiveForeground#7a80a8
activityBarBadge.background#c0e9f7
activityBarBadge.foreground#FFFFFF
badge.background#c0e9f7
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#c0e9f7
breadcrumb.background#1c2438
breadcrumb.focusForeground#d8ecf8
breadcrumb.foreground#8090a8
button.background#5f689d
button.foreground#FFFFFF
button.hoverBackground#8898c8
button.secondaryBackground#16255f
button.secondaryForeground#d8ecf8
button.secondaryHoverBackground#3a4f8f
charts.blue#a8b8d8
charts.foreground#d8ecf8
charts.green#a0d8c8
charts.lines#2a384880
charts.orange#c8e0f8
charts.purple#a8b8d8
charts.red#e8a8c8
charts.yellow#ddab6d
checkbox.background#0a1420
checkbox.border#2a384880
checkbox.foreground#d8ecf8
checkbox.selectBackground#5f689d
checkbox.selectBorder#5f689d
commandCenter.activeBackground#2a3850
commandCenter.activeBorder#5f689d
commandCenter.activeForeground#c0e9f7
commandCenter.background#1c2438
commandCenter.border#2a3850
commandCenter.debuggingBackground#5f689d20
commandCenter.foreground#d8ecf8
commandCenter.inactiveBorder#2a385080
commandCenter.inactiveForeground#7a80a8
debugConsole.errorForeground#e8a8c8
debugConsole.infoForeground#a8b8d8
debugConsole.sourceForeground#8090a8
debugConsole.warningForeground#ddab6d
debugConsoleInputIcon.foreground#c0e9f7
debugIcon.breakpointCurrentStackframeForeground#c0e9f7
debugIcon.breakpointDisabledForeground#7a80a8
debugIcon.breakpointForeground#e8a8c8
debugIcon.breakpointStackframeForeground#a0d8c8
debugIcon.breakpointUnverifiedForeground#ddab6d
debugIcon.continueForeground#a0d8c8
debugIcon.disconnectForeground#e8a8c8
debugIcon.pauseForeground#ddab6d
debugIcon.restartForeground#a0d8c8
debugIcon.startForeground#a0d8c8
debugIcon.stepBackForeground#c0e9f7
debugIcon.stepIntoForeground#c0e9f7
debugIcon.stepOutForeground#c0e9f7
debugIcon.stepOverForeground#c0e9f7
debugIcon.stopForeground#e8a8c8
debugTokenExpression.boolean#c0e9f7
debugTokenExpression.error#e8a8c8
debugTokenExpression.name#d8ecf8
debugTokenExpression.number#a8b8d8
debugTokenExpression.string#d8e8f8
debugTokenExpression.value#c0e9f7
debugToolBar.background#1c2438
debugToolBar.border#2a3850
debugView.exceptionLabelBackground#e8a8c0
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#5f689d
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#c0e9f760
descriptionForeground#8090a8
diffEditor.diagonalFill#2a385040
diffEditor.insertedLineBackground#a0d8c815
diffEditor.insertedTextBackground#a0d8c820
diffEditor.insertedTextBorder#a0d8c800
diffEditor.removedLineBackground#e8a8c015
diffEditor.removedTextBackground#e8a8c020
diffEditor.removedTextBorder#e8a8c000
diffEditorGutter.insertedLineBackground#a0d8c830
diffEditorGutter.removedLineBackground#e8a8c030
diffEditorOverview.insertedForeground#a0d8c8
diffEditorOverview.removedForeground#e8a8c0
dropdown.background#0a1420
dropdown.border#2a384880
dropdown.foreground#d8ecf8
dropdown.listBackground#1c2438
editor.background#181c2a
editor.findMatchBackground#c0e9f750
editor.findMatchHighlightBackground#c0e9f725
editor.focusedStackFrameHighlightBackground#a0d8c830
editor.foldBackground#5f689d15
editor.foreground#d8ecf8
editor.lineHighlightBackground#1c2030
editor.lineHighlightBorder#2a384840
editor.selectionBackground#c0e9f750
editor.stackFrameHighlightBackground#ddab6d30
editor.wordHighlightBackground#5f689d30
editor.wordHighlightStrongBackground#c0e9f750
editorBracketHighlight.foreground1#c0e9f7
editorBracketHighlight.foreground2#e8a8c8
editorBracketHighlight.foreground3#a8b8d8
editorBracketHighlight.foreground4#a0d8c8
editorBracketHighlight.foreground5#ddab6d
editorBracketHighlight.foreground6#a8b8d8
editorBracketHighlight.unexpectedBracket.foreground#e8a8c8
editorBracketMatch.background#5f689d40
editorBracketMatch.border#5f689d
editorCodeLens.foreground#7a80a8
editorCursor.foreground#c0e9f7
editorError.border#e8a8c800
editorError.foreground#e8a8c8
editorGroup.border#2a3850
editorGroup.dropBackground#5f689d30
editorGroup.dropIntoPromptBackground#1c2438
editorGroup.dropIntoPromptBorder#5f689d
editorGroup.dropIntoPromptForeground#d8ecf8
editorGroup.emptyBackground#1c2438
editorGroup.focusedEmptyBorder#5f689d
editorGroupHeader.tabsBackground#1c2438
editorGutter.addedBackground#a0d8c8
editorGutter.deletedBackground#e8a8c0
editorGutter.modifiedBackground#a8b8d8
editorHint.border#a0d8c800
editorHint.foreground#a0d8c8
editorHoverWidget.background#1c2438
editorHoverWidget.border#2a384880
editorIndentGuide.activeBackground1#5f689d
editorIndentGuide.background1#2a384880
editorInfo.border#a8b8d800
editorInfo.foreground#a8b8d8
editorInlayHint.background#2a385080
editorInlayHint.foreground#98acd0
editorInlayHint.parameterForeground#a8b8d8
editorInlayHint.typeForeground#c0e9f7
editorLineNumber.activeForeground#c0e9f7
editorLineNumber.foreground#7a80a8
editorOverviewRuler.addedForeground#a0d8c8
editorOverviewRuler.background#1c2438
editorOverviewRuler.border#2a3850
editorOverviewRuler.bracketMatchForeground#5f689d
editorOverviewRuler.commonContentForeground#8090a8
editorOverviewRuler.currentContentForeground#a0d8c8
editorOverviewRuler.deletedForeground#e8a8c0
editorOverviewRuler.errorForeground#e8a8c8
editorOverviewRuler.findMatchForeground#c0e9f780
editorOverviewRuler.incomingContentForeground#a8b8d8
editorOverviewRuler.infoForeground#a8b8d8
editorOverviewRuler.modifiedForeground#a8b8d8
editorOverviewRuler.rangeHighlightForeground#5f689d40
editorOverviewRuler.selectionHighlightForeground#c0e9f760
editorOverviewRuler.warningForeground#ddab6d
editorOverviewRuler.wordHighlightForeground#c0e9f760
editorOverviewRuler.wordHighlightStrongForeground#5f689d80
editorStickyScroll.background#1c2438
editorStickyScrollHover.background#2a3850
editorSuggestWidget.background#1c2438
editorSuggestWidget.foreground#d8ecf8
editorSuggestWidget.highlightForeground#c0e9f7
editorSuggestWidget.selectedBackground#5f689d
editorWarning.border#ddab6d00
editorWarning.foreground#ddab6d
editorWhitespace.foreground#2a384860
editorWidget.background#1c2438
editorWidget.border#2a384880
editorWidget.foreground#d8ecf8
errorForeground#e8a8c8
extensionBadge.remoteBackground#5f689d
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#5f689d
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#16255f
extensionIcon.preReleaseForeground#c0e9f7
extensionIcon.sponsorForeground#c0e9f7
extensionIcon.starForeground#ddab6d
extensionIcon.verifiedForeground#a0d8c8
focusBorder#5f689d
gitDecoration.addedResourceForeground#a0d8c8
gitDecoration.conflictingResourceForeground#e8a8c8
gitDecoration.deletedResourceForeground#e8a8c8
gitDecoration.ignoredResourceForeground#7a80a8
gitDecoration.modifiedResourceForeground#a8b8d8
gitDecoration.untrackedResourceForeground#ddab6d
icon.foreground#d8ecf8
input.background#0a1420
input.border#2a384880
input.foreground#d8ecf8
input.placeholderForeground#7a80a8
inputOption.activeBackground#5f689d
inputOption.activeForeground#FFFFFF
keybindingLabel.background#2a3850
keybindingLabel.border#2a3850
keybindingLabel.bottomBorder#7a80a8
keybindingLabel.foreground#d8ecf8
list.activeSelectionBackground#5f689d
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#c0e9f750
list.focusForeground#d8ecf8
list.hoverBackground#2a3850
list.hoverForeground#d8ecf8
list.inactiveSelectionBackground#2a385080
list.inactiveSelectionForeground#d8ecf8
menu.background#0a1420
menu.border#2a3850
menu.foreground#d8ecf8
menu.selectionBackground#5f689d
menu.selectionBorder#5f689d00
menu.selectionForeground#FFFFFF
menu.separatorBackground#2a384880
menubar.selectionBackground#2a3850
menubar.selectionForeground#d8ecf8
merge.border#2a3850
merge.commonContentBackground#8090a820
merge.commonHeaderBackground#8090a840
merge.currentContentBackground#a0d8c820
merge.currentHeaderBackground#a0d8c840
merge.incomingContentBackground#a8b8d820
merge.incomingHeaderBackground#a8b8d840
mergeEditor.change.background#a8b8d820
mergeEditor.change.word.background#a8b8d840
mergeEditor.conflict.handledFocused.border#a0d8c8
mergeEditor.conflict.handledUnfocused.border#a0d8c880
mergeEditor.conflict.unhandledFocused.border#ddab6d
mergeEditor.conflict.unhandledUnfocused.border#ddab6d80
minimap.background#1c2438
minimap.selectionHighlight#c0e9f760
notifications.background#1c2438
notifications.border#2a3850
notifications.foreground#d8ecf8
notificationsErrorIcon.foreground#e8a8c8
notificationsInfoIcon.foreground#a8b8d8
notificationsWarningIcon.foreground#ddab6d
panel.background#1c2438
panel.border#2a3850
panelTitle.activeBorder#5f689d
panelTitle.activeForeground#d8ecf8
panelTitle.inactiveForeground#8090a8
peekView.border#5f689d
peekViewEditor.background#1c2438
peekViewResult.background#1c2438
peekViewResult.matchHighlightBackground#c0e9f750
peekViewTitle.background#2a3850
peekViewTitleLabel.foreground#d8ecf8
progressBar.background#5f689d
quickInput.background#1c2438
quickInput.foreground#d8ecf8
quickInputList.focusBackground#5f689d
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#2a3850
scrollbarSlider.activeBackground#5f689d
scrollbarSlider.background#2a384880
scrollbarSlider.hoverBackground#48404a
selection.background#c0e9f760
settings.checkboxBackground#0a1420
settings.checkboxBorder#5f689d
settings.checkboxForeground#d8ecf8
settings.dropdownBackground#0a1420
settings.dropdownBorder#2a3850
settings.dropdownForeground#d8ecf8
settings.dropdownListBorder#2a3850
settings.focusedRowBackground#2a385040
settings.focusedRowBorder#5f689d80
settings.headerForeground#d8ecf8
settings.modifiedItemIndicator#5f689d
settings.numberInputBackground#0a1420
settings.numberInputBorder#5f689d
settings.numberInputForeground#d8ecf8
settings.rowHoverBackground#2a385020
settings.sashBorder#2a3850
settings.textInputBackground#0a1420
settings.textInputBorder#5f689d
settings.textInputForeground#d8ecf8
sideBar.background#1c2438
sideBar.border#2a3850
sideBar.foreground#d8ecf8
sideBarSectionHeader.background#2a3850
sideBarSectionHeader.foreground#d8ecf8
sideBarTitle.foreground#c0e9f7
statusBar.background#5f689d
statusBar.debuggingBackground#16255f
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#181c2a
statusBar.noFolderForeground#d8ecf8
symbolIcon.arrayForeground#d8ecf8
symbolIcon.booleanForeground#c0e9f7
symbolIcon.classForeground#a8b8d8
symbolIcon.colorForeground#c8e0f8
symbolIcon.constantForeground#a8b8d8
symbolIcon.constructorForeground#c0e9f7
symbolIcon.enumeratorForeground#ddab6d
symbolIcon.enumeratorMemberForeground#a8b8d8
symbolIcon.eventForeground#ddab6d
symbolIcon.fieldForeground#a8b8d8
symbolIcon.fileForeground#8090a8
symbolIcon.folderForeground#ddab6d
symbolIcon.functionForeground#c0e9f7
symbolIcon.interfaceForeground#a0d8c8
symbolIcon.keyForeground#d8ecf8
symbolIcon.keywordForeground#c0e9f7
symbolIcon.methodForeground#c0e9f7
symbolIcon.moduleForeground#a8b8d8
symbolIcon.namespaceForeground#a8b8d8
symbolIcon.nullForeground#e8a8c8
symbolIcon.numberForeground#a8b8d8
symbolIcon.objectForeground#d8ecf8
symbolIcon.operatorForeground#8090a8
symbolIcon.packageForeground#a8b8d8
symbolIcon.propertyForeground#a8b8d8
symbolIcon.referenceForeground#a8b8d8
symbolIcon.snippetForeground#8090a8
symbolIcon.stringForeground#d8e8f8
symbolIcon.structForeground#d8ecf8
symbolIcon.textForeground#d8ecf8
symbolIcon.typeParameterForeground#a0d8c8
symbolIcon.unitForeground#a8b8d8
symbolIcon.variableForeground#a8b8d8
tab.activeBackground#181c2a
tab.activeBorder#5f689d
tab.activeForeground#c0e9f7
tab.border#2a3850
tab.hoverBackground#2a3850
tab.hoverForeground#d8ecf8
tab.inactiveBackground#1c2438
tab.inactiveForeground#8090a8
terminal.ansiBlack#2a3850
terminal.ansiBlue#a8b8d8
terminal.ansiBrightBlack#8090a8
terminal.ansiBrightBlue#c8c0e8
terminal.ansiBrightCyan#c8e0f8
terminal.ansiBrightGreen#b8e8d8
terminal.ansiBrightMagenta#c8e0f8
terminal.ansiBrightRed#f0c8e0
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#e8e8b8
terminal.ansiCyan#c0e9f7
terminal.ansiGreen#a0d8c8
terminal.ansiMagenta#c0e9f7
terminal.ansiRed#e8a8c8
terminal.ansiWhite#d8ecf8
terminal.ansiYellow#ddab6d
terminal.background#181c2a
terminal.foreground#d8ecf8
testing.iconErrored#e8a8c0
testing.iconFailed#e8a8c0
testing.iconPassed#a0d8c8
testing.iconQueued#ddab6d
testing.iconSkipped#7a80a8
testing.iconUnset#7a80a8
testing.peekBorder#e8a8c0
testing.peekHeaderBackground#e8a8c020
testing.runAction#a0d8c8
textLink.activeForeground#c8e0f8
textLink.foreground#c0e9f7
titleBar.activeBackground#1c2438
titleBar.activeForeground#d8ecf8
titleBar.inactiveBackground#181c2a
titleBar.inactiveForeground#7a80a8
walkThrough.embeddedEditorBackground#1c2438
welcomePage.background#181c2a
welcomePage.progress.background#2a3850
welcomePage.progress.foreground#5f689d
welcomePage.tileBackground#1c2438
welcomePage.tileBorder#2a3850
welcomePage.tileHoverBackground#2a3850

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8090a8	italic
keyword, storage	#c0e9f7	bold
keyword.control, keyword.control.flow	#b8c8e8	bold
entity.name.function, support.function	#a8b8d8	bold
entity.name.type, support.class, support.type, storage.type	#c8d8e8	bold
string	#d8e8f8	—
constant.character.escape	#e8a8c8	—
variable, support.variable	#d8ecf8	—
variable.parameter	#c8d8e0	italic
constant.numeric, constant.character, constant	#a8b8d8	—
constant.language, support.constant, variable.language	#c0e9f7	—
keyword.operator	#9098d8	—
punctuation	#9098c8	—
entity.name.tag	#c0e9f7	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#c8e0f8	italic
meta.selector, entity.name.tag.css	#d8ecf8	—
meta.property-name, support.type.property-name	#c0e9f7	—
meta.property-value, support.constant.property-value	#d8e8f8	—
keyword.other.unit	#a8b8d8	—
markup.heading	#c0e9f7	bold
markup.bold	#d8ecf8	bold
markup.italic	#d8ecf8	italic
meta.link	#c8e0f8	—
markup.list	#c0e9f7	—
markup.inline.raw	#d8e8f8	—
markup.inserted	#a0d8c8	—
markup.deleted	#e8a8c8	—
markup.changed	#a8b8d8	—
support.type.property-name.json	#c0e9f7	—
entity.name.tag.yaml	#c8e0f8	—
string.regexp	#e8a8c8	—
meta.decorator, meta.annotation	#ddab6d	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}!`;
}