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 - Sandrone (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#0e1018
activityBar.foreground#e0dce8
activityBar.inactiveForeground#586070
activityBarBadge.background#a83848
activityBarBadge.foreground#FFFFFF
badge.background#a07080
badge.foreground#161418
breadcrumb.activeSelectionForeground#d0a0a8
breadcrumb.background#181a20
breadcrumb.focusForeground#d0dce8
breadcrumb.foreground#607080
button.background#483848
button.foreground#d8d0e0
button.hoverBackground#584858
button.secondaryBackground#282430
button.secondaryForeground#d8d0e0
button.secondaryHoverBackground#383440
charts.blue#7090b8
charts.foreground#d0dce8
charts.green#88b098
charts.lines#d0dce8
charts.orange#b0a080
charts.purple#a088a0
charts.red#906878
charts.yellow#c0b090
checkbox.background#101218
checkbox.border#506888
checkbox.foreground#d0dce8
checkbox.selectBackground#506888
checkbox.selectBorder#a83848
commandCenter.activeBackground#242830
commandCenter.activeBorder#a83848
commandCenter.activeForeground#d0a0a8
commandCenter.background#181a20
commandCenter.border#242830
commandCenter.debuggingBackground#50688820
commandCenter.foreground#d0dce8
commandCenter.inactiveBorder#24283080
commandCenter.inactiveForeground#506878
debugConsole.errorForeground#b08090
debugConsole.infoForeground#90a8d0
debugConsole.sourceForeground#607080
debugConsole.warningForeground#c0b090
debugConsoleInputIcon.foreground#d0a0a8
debugIcon.breakpointCurrentStackframeForeground#d0a0a8
debugIcon.breakpointDisabledForeground#506878
debugIcon.breakpointForeground#b08090
debugIcon.breakpointStackframeForeground#88b098
debugIcon.breakpointUnverifiedForeground#c0b090
debugIcon.continueForeground#88b098
debugIcon.disconnectForeground#b08090
debugIcon.pauseForeground#c0b090
debugIcon.restartForeground#88b098
debugIcon.startForeground#88b098
debugIcon.stepBackForeground#90a8d0
debugIcon.stepIntoForeground#90a8d0
debugIcon.stepOutForeground#90a8d0
debugIcon.stepOverForeground#90a8d0
debugIcon.stopForeground#b08090
debugTokenExpression.boolean#7090b8
debugTokenExpression.error#b08090
debugTokenExpression.name#d0dce8
debugTokenExpression.number#7090b8
debugTokenExpression.string#b0a0a8
debugTokenExpression.value#90a8d0
debugToolBar.background#181a20
debugToolBar.border#242830
debugView.exceptionLabelBackground#906878
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#d0a0a8
debugView.stateLabelForeground#141618
debugView.valueChangedHighlight#90a8d060
descriptionForeground#607080
diffEditor.diagonalFill#24283040
diffEditor.insertedLineBackground#88b09815
diffEditor.insertedTextBackground#88b09820
diffEditor.insertedTextBorder#88b09800
diffEditor.removedLineBackground#90687815
diffEditor.removedTextBackground#90687820
diffEditor.removedTextBorder#90687800
diffEditorGutter.insertedLineBackground#88b09830
diffEditorGutter.removedLineBackground#90687830
diffEditorOverview.insertedForeground#88b098
diffEditorOverview.removedForeground#906878
dropdown.background#121018
dropdown.border#483848
dropdown.foreground#d8d0e0
dropdown.listBackground#1a181e
editor.background#12141a
editor.findMatchBackground#90a8d040
editor.findMatchHighlightBackground#90a8d020
editor.focusedStackFrameHighlightBackground#88b09830
editor.foldBackground#50688815
editor.foreground#e0dce8
editor.lineHighlightBackground#1a1c24
editor.lineHighlightBorder#48384830
editor.selectionBackground#48384850
editor.stackFrameHighlightBackground#c0b09030
editor.wordHighlightBackground#48384830
editor.wordHighlightStrongBackground#48384850
editorBracketHighlight.foreground1#d0a0a8
editorBracketHighlight.foreground2#90a8d0
editorBracketHighlight.foreground3#a88868
editorBracketHighlight.foreground4#88b098
editorBracketHighlight.foreground5#c0b090
editorBracketHighlight.foreground6#7090b8
editorBracketHighlight.unexpectedBracket.foreground#b08090
editorBracketMatch.background#48384840
editorBracketMatch.border#a87080
editorCodeLens.foreground#607080
editorCursor.foreground#d05060
editorError.border#b0809000
editorError.foreground#b08090
editorGroup.border#242830
editorGroup.dropBackground#50688830
editorGroup.dropIntoPromptBackground#181a20
editorGroup.dropIntoPromptBorder#a83848
editorGroup.dropIntoPromptForeground#d0dce8
editorGroup.emptyBackground#181a20
editorGroup.focusedEmptyBorder#a83848
editorGroupHeader.tabsBackground#161820
editorGutter.addedBackground#78a088
editorGutter.deletedBackground#a07888
editorGutter.modifiedBackground#7888b0
editorHint.border#88b09800
editorHint.foreground#88b098
editorHoverWidget.background#1a181e
editorHoverWidget.border#282430
editorIndentGuide.activeBackground1#a83848
editorIndentGuide.background1#222430
editorInfo.border#90a8d000
editorInfo.foreground#90a8d0
editorInlayHint.background#24283080
editorInlayHint.foreground#607080
editorInlayHint.parameterForeground#a088a0
editorInlayHint.typeForeground#90a8d0
editorLineNumber.activeForeground#d05060
editorLineNumber.foreground#586070
editorOverviewRuler.addedForeground#88b098
editorOverviewRuler.background#181a20
editorOverviewRuler.border#242830
editorOverviewRuler.bracketMatchForeground#a83848
editorOverviewRuler.commonContentForeground#607080
editorOverviewRuler.currentContentForeground#88b098
editorOverviewRuler.deletedForeground#906878
editorOverviewRuler.errorForeground#b08090
editorOverviewRuler.findMatchForeground#90a8d080
editorOverviewRuler.incomingContentForeground#7090b8
editorOverviewRuler.infoForeground#90a8d0
editorOverviewRuler.modifiedForeground#7090b8
editorOverviewRuler.rangeHighlightForeground#50688840
editorOverviewRuler.selectionHighlightForeground#50688860
editorOverviewRuler.warningForeground#c0b090
editorOverviewRuler.wordHighlightForeground#50688860
editorOverviewRuler.wordHighlightStrongForeground#50688880
editorStickyScroll.background#181a20
editorStickyScrollHover.background#242830
editorSuggestWidget.background#1a181e
editorSuggestWidget.foreground#d8d0e0
editorSuggestWidget.highlightForeground#d0a0a8
editorSuggestWidget.selectedBackground#483848
editorWarning.border#c0b09000
editorWarning.foreground#c0b090
editorWhitespace.foreground#282830
editorWidget.background#1a181e
editorWidget.border#282430
editorWidget.foreground#d8d0e0
errorForeground#b08090
extensionBadge.remoteBackground#a83848
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#506888
extensionButton.prominentForeground#d0dce8
extensionButton.prominentHoverBackground#607898
extensionIcon.preReleaseForeground#a088a0
extensionIcon.sponsorForeground#90a8d0
extensionIcon.starForeground#c0b090
extensionIcon.verifiedForeground#88b098
focusBorder#a87080
gitDecoration.addedResourceForeground#88b098
gitDecoration.conflictingResourceForeground#a088a0
gitDecoration.deletedResourceForeground#906878
gitDecoration.ignoredResourceForeground#506878
gitDecoration.modifiedResourceForeground#7090b8
gitDecoration.untrackedResourceForeground#c0b090
icon.foreground#d0dce8
input.background#0e1018
input.border#483848
input.foreground#d8d0e0
input.placeholderForeground#686070
inputOption.activeBackground#483848
inputOption.activeForeground#FFFFFF
keybindingLabel.background#242830
keybindingLabel.border#242830
keybindingLabel.bottomBorder#506878
keybindingLabel.foreground#d0dce8
list.activeSelectionBackground#483848
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#f0a0a8
list.focusBackground#483848
list.focusForeground#FFFFFF
list.hoverBackground#222630
list.hoverForeground#e0dce8
list.inactiveSelectionBackground#48384850
list.inactiveSelectionForeground#e0dce8
menu.background#101218
menu.border#242830
menu.foreground#d0dce8
menu.selectionBackground#506888
menu.selectionBorder#50688800
menu.selectionForeground#FFFFFF
menu.separatorBackground#242830
menubar.selectionBackground#242830
menubar.selectionForeground#d0dce8
merge.border#242830
merge.commonContentBackground#60708020
merge.commonHeaderBackground#60708040
merge.currentContentBackground#88b09820
merge.currentHeaderBackground#88b09840
merge.incomingContentBackground#7090b820
merge.incomingHeaderBackground#7090b840
mergeEditor.change.background#7090b820
mergeEditor.change.word.background#7090b840
mergeEditor.conflict.handledFocused.border#88b098
mergeEditor.conflict.handledUnfocused.border#88b09880
mergeEditor.conflict.unhandledFocused.border#c0b090
mergeEditor.conflict.unhandledUnfocused.border#c0b09080
minimap.background#181a20
minimap.selectionHighlight#50688850
notifications.background#181a20
notifications.border#242830
notifications.foreground#d0dce8
notificationsErrorIcon.foreground#b08090
notificationsInfoIcon.foreground#90a8d0
notificationsWarningIcon.foreground#c0b090
panel.background#161820
panel.border#222630
panelTitle.activeBorder#a83848
panelTitle.activeForeground#e0dce8
panelTitle.inactiveForeground#687080
peekView.border#a83848
peekViewEditor.background#181a20
peekViewResult.background#181a20
peekViewResult.matchHighlightBackground#90a8d040
peekViewTitle.background#242830
peekViewTitleLabel.foreground#d0dce8
progressBar.background#a87080
quickInput.background#181a20
quickInput.foreground#d0dce8
quickInputList.focusBackground#506888
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#d0a0a8
quickInputTitle.background#242830
scrollbarSlider.activeBackground#a87080
scrollbarSlider.background#48384850
scrollbarSlider.hoverBackground#483848
selection.background#483848
settings.checkboxBackground#101218
settings.checkboxBorder#506888
settings.checkboxForeground#d0dce8
settings.dropdownBackground#101218
settings.dropdownBorder#242830
settings.dropdownForeground#d0dce8
settings.dropdownListBorder#242830
settings.focusedRowBackground#24283040
settings.focusedRowBorder#a8384880
settings.headerForeground#d0dce8
settings.modifiedItemIndicator#a83848
settings.numberInputBackground#101218
settings.numberInputBorder#506888
settings.numberInputForeground#d0dce8
settings.rowHoverBackground#24283020
settings.sashBorder#242830
settings.textInputBackground#101218
settings.textInputBorder#506888
settings.textInputForeground#d0dce8
sideBar.background#161820
sideBar.border#222630
sideBar.foreground#e0dce8
sideBarSectionHeader.background#222630
sideBarSectionHeader.foreground#e0dce8
sideBarTitle.foreground#d05060
statusBar.background#a83848
statusBar.debuggingBackground#2838a0
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#12141a
statusBar.noFolderForeground#e0dce8
symbolIcon.arrayForeground#d0dce8
symbolIcon.booleanForeground#7090b8
symbolIcon.classForeground#a088a0
symbolIcon.colorForeground#a83848
symbolIcon.constantForeground#7090b8
symbolIcon.constructorForeground#a088a0
symbolIcon.enumeratorForeground#c0b090
symbolIcon.enumeratorMemberForeground#7090b8
symbolIcon.eventForeground#c0b090
symbolIcon.fieldForeground#7090b8
symbolIcon.fileForeground#607080
symbolIcon.folderForeground#a88868
symbolIcon.functionForeground#90a8d0
symbolIcon.interfaceForeground#88b098
symbolIcon.keyForeground#d0dce8
symbolIcon.keywordForeground#a088a0
symbolIcon.methodForeground#90a8d0
symbolIcon.moduleForeground#a088a0
symbolIcon.namespaceForeground#a088a0
symbolIcon.nullForeground#906878
symbolIcon.numberForeground#7090b8
symbolIcon.objectForeground#d0dce8
symbolIcon.operatorForeground#607080
symbolIcon.packageForeground#a088a0
symbolIcon.propertyForeground#d0dce8
symbolIcon.referenceForeground#7090b8
symbolIcon.snippetForeground#607080
symbolIcon.stringForeground#b0a0a8
symbolIcon.structForeground#d0dce8
symbolIcon.textForeground#d0dce8
symbolIcon.typeParameterForeground#88b098
symbolIcon.unitForeground#7090b8
symbolIcon.variableForeground#d0dce8
tab.activeBackground#12141a
tab.activeBorder#a83848
tab.activeForeground#d05060
tab.border#222630
tab.hoverBackground#222630
tab.hoverForeground#e0dce8
tab.inactiveBackground#161820
tab.inactiveForeground#687080
terminal.ansiBlack#282430
terminal.ansiBlue#8090c0
terminal.ansiBrightBlack#787080
terminal.ansiBrightBlue#a0b0d8
terminal.ansiBrightCyan#b0c0d8
terminal.ansiBrightGreen#a8d0b8
terminal.ansiBrightMagenta#d0b0b8
terminal.ansiBrightRed#d0a8b0
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#e0d8b0
terminal.ansiCyan#90a8c0
terminal.ansiGreen#90b8a0
terminal.ansiMagenta#b08898
terminal.ansiRed#c08090
terminal.ansiWhite#d8d0e0
terminal.ansiYellow#c8b890
terminal.background#161418
terminal.foreground#d8d0e0
testing.iconErrored#906878
testing.iconFailed#906878
testing.iconPassed#88b098
testing.iconQueued#c0b090
testing.iconSkipped#506878
testing.iconUnset#506878
testing.peekBorder#906878
testing.peekHeaderBackground#90687820
testing.runAction#88b098
textLink.activeForeground#b0c0e0
textLink.foreground#90a8d0
titleBar.activeBackground#161820
titleBar.activeForeground#e0dce8
titleBar.inactiveBackground#12141a
titleBar.inactiveForeground#586070
walkThrough.embeddedEditorBackground#181a20
welcomePage.background#141618
welcomePage.progress.background#242830
welcomePage.progress.foreground#a83848
welcomePage.tileBackground#181a20
welcomePage.tileBorder#242830
welcomePage.tileHoverBackground#242830

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#607080	italic
keyword, storage	#d05060	bold
entity.name.function, support.function	#80a0d0	bold
entity.name.type, support.class, support.type, storage.type	#c0a888	bold
string	#d098a8	—
constant.character.escape	#b898a0	—
variable, support.variable	#d8d0e0	—
constant.numeric, constant.character, constant	#98a8c8	—
constant.language, support.constant, variable.language	#a098b0	—
keyword.operator	#9090a8	—
punctuation	#708890	—
entity.name.tag	#a088a0	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#90a8d0	italic
meta.selector, entity.name.tag.css	#d0dce8	—
meta.property-name, support.type.property-name	#a088a0	—
meta.property-value, support.constant.property-value	#b0a0a8	—
markup.heading	#d0a0a8	bold
markup.bold	#d0dce8	bold
markup.italic	#d0dce8	italic
meta.link	#7090b8	—
markup.list	#a088a0	—
markup.inline.raw	#b0a0a8	—
markup.inserted	#88b098	—
markup.deleted	#906878	—
markup.changed	#7090b8	—

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