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 - Ganyu (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#101620
activityBar.foreground#d8e0e8
activityBar.inactiveForeground#5a6878
activityBarBadge.background#c94e51
activityBarBadge.foreground#FFFFFF
badge.background#c94e51
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#8ab8e8
breadcrumb.background#181e28
breadcrumb.focusForeground#d0dce8
breadcrumb.foreground#6a788a
button.background#3a5070
button.foreground#d0d8e0
button.hoverBackground#4a6080
button.secondaryBackground#c94e51
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#d86068
charts.blue#6088b8
charts.foreground#d0dce8
charts.green#78b898
charts.lines#d0dce8
charts.orange#c89868
charts.purple#a888b0
charts.red#b86878
charts.yellow#d0b070
checkbox.background#101620
checkbox.border#3a5070
checkbox.foreground#d0dce8
checkbox.selectBackground#3a5070
checkbox.selectBorder#6a9ac8
commandCenter.activeBackground#243040
commandCenter.activeBorder#6a9ac8
commandCenter.activeForeground#8ab8e8
commandCenter.background#181e28
commandCenter.border#243040
commandCenter.debuggingBackground#3a507020
commandCenter.foreground#d0dce8
commandCenter.inactiveBorder#24304080
commandCenter.inactiveForeground#5a6878
debugConsole.errorForeground#d87080
debugConsole.infoForeground#8ab8e8
debugConsole.sourceForeground#6a788a
debugConsole.warningForeground#d0b070
debugConsoleInputIcon.foreground#8ab8e8
debugIcon.breakpointCurrentStackframeForeground#8ab8e8
debugIcon.breakpointDisabledForeground#5a6878
debugIcon.breakpointForeground#d87080
debugIcon.breakpointStackframeForeground#78b898
debugIcon.breakpointUnverifiedForeground#d0b070
debugIcon.continueForeground#78b898
debugIcon.disconnectForeground#d87080
debugIcon.pauseForeground#d0b070
debugIcon.restartForeground#78b898
debugIcon.startForeground#78b898
debugIcon.stepBackForeground#8ab8e8
debugIcon.stepIntoForeground#8ab8e8
debugIcon.stepOutForeground#8ab8e8
debugIcon.stepOverForeground#8ab8e8
debugIcon.stopForeground#d87080
debugTokenExpression.boolean#6088b8
debugTokenExpression.error#d87080
debugTokenExpression.name#d0dce8
debugTokenExpression.number#a888b0
debugTokenExpression.string#b8a098
debugTokenExpression.value#8ab8e8
debugToolBar.background#1a2028
debugToolBar.border#2a3848
debugView.exceptionLabelBackground#b86878
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#8ab8e8
debugView.stateLabelForeground#141a22
debugView.valueChangedHighlight#8ab8e860
descriptionForeground#6a788a
diffEditor.diagonalFill#24304040
diffEditor.insertedLineBackground#78b89815
diffEditor.insertedTextBackground#78b89820
diffEditor.insertedTextBorder#78b89800
diffEditor.removedLineBackground#b8687815
diffEditor.removedTextBackground#b8687820
diffEditor.removedTextBorder#b8687800
diffEditorGutter.insertedLineBackground#78b89830
diffEditorGutter.removedLineBackground#b8687830
diffEditorOverview.insertedForeground#78b898
diffEditorOverview.removedForeground#b86878
dropdown.background#141820
dropdown.border#3a5070
dropdown.foreground#d0d8e0
dropdown.listBackground#1a2028
editor.background#141a22
editor.findMatchBackground#6a9ac840
editor.findMatchHighlightBackground#6a9ac820
editor.focusedStackFrameHighlightBackground#78b89830
editor.foldBackground#3a507015
editor.foreground#d8e0e8
editor.lineHighlightBackground#1a222c
editor.lineHighlightBorder#3a507030
editor.selectionBackground#3a507050
editor.stackFrameHighlightBackground#d0b07030
editor.wordHighlightBackground#3a507030
editor.wordHighlightStrongBackground#3a507050
editorBracketHighlight.foreground1#8ab8e8
editorBracketHighlight.foreground2#d87080
editorBracketHighlight.foreground3#78b0c8
editorBracketHighlight.foreground4#78b898
editorBracketHighlight.foreground5#d0b070
editorBracketHighlight.foreground6#a888b0
editorBracketHighlight.unexpectedBracket.foreground#d87080
editorBracketMatch.background#3a507040
editorBracketMatch.border#6a9ac8
editorCodeLens.foreground#5a6878
editorCursor.foreground#8ab8e8
editorError.border#d8708000
editorError.foreground#d87080
editorGroup.border#243040
editorGroup.dropBackground#3a507030
editorGroup.dropIntoPromptBackground#181e28
editorGroup.dropIntoPromptBorder#6a9ac8
editorGroup.dropIntoPromptForeground#d0dce8
editorGroup.emptyBackground#181e28
editorGroup.focusedEmptyBorder#6a9ac8
editorGroupHeader.tabsBackground#181e28
editorGutter.addedBackground#68a888
editorGutter.deletedBackground#b86878
editorGutter.modifiedBackground#6088b8
editorHint.border#78b89800
editorHint.foreground#78b898
editorHoverWidget.background#1a2028
editorHoverWidget.border#2a3848
editorIndentGuide.activeBackground1#6a9ac8
editorIndentGuide.background1#243040
editorInfo.border#8ab8e800
editorInfo.foreground#8ab8e8
editorInlayHint.background#24304080
editorInlayHint.foreground#6a788a
editorInlayHint.parameterForeground#6088b8
editorInlayHint.typeForeground#8ab8e8
editorLineNumber.activeForeground#8ab8e8
editorLineNumber.foreground#4a6078
editorOverviewRuler.addedForeground#78b898
editorOverviewRuler.background#181e28
editorOverviewRuler.border#243040
editorOverviewRuler.bracketMatchForeground#6a9ac8
editorOverviewRuler.commonContentForeground#6a788a
editorOverviewRuler.currentContentForeground#78b898
editorOverviewRuler.deletedForeground#b86878
editorOverviewRuler.errorForeground#d87080
editorOverviewRuler.findMatchForeground#8ab8e880
editorOverviewRuler.incomingContentForeground#6088b8
editorOverviewRuler.infoForeground#8ab8e8
editorOverviewRuler.modifiedForeground#6088b8
editorOverviewRuler.rangeHighlightForeground#3a507040
editorOverviewRuler.selectionHighlightForeground#3a507060
editorOverviewRuler.warningForeground#d0b070
editorOverviewRuler.wordHighlightForeground#3a507060
editorOverviewRuler.wordHighlightStrongForeground#3a507080
editorStickyScroll.background#181e28
editorStickyScrollHover.background#243040
editorSuggestWidget.background#1a2028
editorSuggestWidget.foreground#d0d8e0
editorSuggestWidget.highlightForeground#8ab8e8
editorSuggestWidget.selectedBackground#3a5070
editorWarning.border#d0b07000
editorWarning.foreground#d0b070
editorWhitespace.foreground#2a3440
editorWidget.background#1a2028
editorWidget.border#2a3848
editorWidget.foreground#d0d8e0
errorForeground#d87080
extensionBadge.remoteBackground#6a9ac8
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#3a5070
extensionButton.prominentForeground#d0dce8
extensionButton.prominentHoverBackground#4a6080
extensionIcon.preReleaseForeground#d87080
extensionIcon.sponsorForeground#8ab8e8
extensionIcon.starForeground#d0b070
extensionIcon.verifiedForeground#78b898
focusBorder#6a9ac8
gitDecoration.addedResourceForeground#78b898
gitDecoration.conflictingResourceForeground#d87080
gitDecoration.deletedResourceForeground#b86878
gitDecoration.ignoredResourceForeground#4a5868
gitDecoration.modifiedResourceForeground#6088b8
gitDecoration.untrackedResourceForeground#d0b070
icon.foreground#d0dce8
input.background#101620
input.border#3a5070
input.foreground#d0d8e0
input.placeholderForeground#5a6878
inputOption.activeBackground#3a5070
inputOption.activeForeground#FFFFFF
keybindingLabel.background#243040
keybindingLabel.border#243040
keybindingLabel.bottomBorder#4a6078
keybindingLabel.foreground#d0dce8
list.activeSelectionBackground#3a5070
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#b8d4f0
list.focusBackground#3a5070
list.focusForeground#FFFFFF
list.hoverBackground#243040
list.hoverForeground#d8e0e8
list.inactiveSelectionBackground#3a507050
list.inactiveSelectionForeground#d8e0e8
menu.background#141820
menu.border#2a3848
menu.foreground#d0dce8
menu.selectionBackground#3a5070
menu.selectionBorder#3a507000
menu.selectionForeground#FFFFFF
menu.separatorBackground#2a3848
menubar.selectionBackground#243040
menubar.selectionForeground#d0dce8
merge.border#243040
merge.commonContentBackground#60708020
merge.commonHeaderBackground#60708040
merge.currentContentBackground#78b89820
merge.currentHeaderBackground#78b89840
merge.incomingContentBackground#6088b820
merge.incomingHeaderBackground#6088b840
mergeEditor.change.background#6088b820
mergeEditor.change.word.background#6088b840
mergeEditor.conflict.handledFocused.border#78b898
mergeEditor.conflict.handledUnfocused.border#78b89880
mergeEditor.conflict.unhandledFocused.border#d0b070
mergeEditor.conflict.unhandledUnfocused.border#d0b07080
minimap.background#181e28
minimap.selectionHighlight#3a507050
notifications.background#1a2028
notifications.border#2a3848
notifications.foreground#d0dce8
notificationsErrorIcon.foreground#d87080
notificationsInfoIcon.foreground#8ab8e8
notificationsWarningIcon.foreground#d0b070
panel.background#181e28
panel.border#243040
panelTitle.activeBorder#6a9ac8
panelTitle.activeForeground#d8e0e8
panelTitle.inactiveForeground#687888
peekView.border#6a9ac8
peekViewEditor.background#181e28
peekViewResult.background#181e28
peekViewResult.matchHighlightBackground#6a9ac840
peekViewTitle.background#243040
peekViewTitleLabel.foreground#d0dce8
progressBar.background#6a9ac8
quickInput.background#181e28
quickInput.foreground#d0dce8
quickInputList.focusBackground#3a5070
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#8ab8e8
quickInputTitle.background#243040
scrollbarSlider.activeBackground#6a9ac8
scrollbarSlider.background#3a507050
scrollbarSlider.hoverBackground#3a5070
selection.background#3a5070
settings.checkboxBackground#141820
settings.checkboxBorder#3a5070
settings.checkboxForeground#d0dce8
settings.dropdownBackground#141820
settings.dropdownBorder#2a3848
settings.dropdownForeground#d0dce8
settings.dropdownListBorder#2a3848
settings.focusedRowBackground#24304040
settings.focusedRowBorder#6a9ac880
settings.headerForeground#d0dce8
settings.modifiedItemIndicator#6a9ac8
settings.numberInputBackground#141820
settings.numberInputBorder#3a5070
settings.numberInputForeground#d0dce8
settings.rowHoverBackground#24304020
settings.sashBorder#243040
settings.textInputBackground#141820
settings.textInputBorder#3a5070
settings.textInputForeground#d0dce8
sideBar.background#181e28
sideBar.border#243040
sideBar.foreground#d8e0e8
sideBarSectionHeader.background#243040
sideBarSectionHeader.foreground#d8e0e8
sideBarTitle.foreground#8ab8e8
statusBar.background#5a7ba8
statusBar.debuggingBackground#3a4888
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#141a22
statusBar.noFolderForeground#d8e0e8
symbolIcon.arrayForeground#d0dce8
symbolIcon.booleanForeground#6088b8
symbolIcon.classForeground#6a9ac8
symbolIcon.colorForeground#a888b0
symbolIcon.constantForeground#d87080
symbolIcon.constructorForeground#6a9ac8
symbolIcon.enumeratorForeground#d0b070
symbolIcon.enumeratorMemberForeground#d87080
symbolIcon.eventForeground#d0b070
symbolIcon.fieldForeground#78b0c8
symbolIcon.fileForeground#6a788a
symbolIcon.folderForeground#d0b070
symbolIcon.functionForeground#8ab8e8
symbolIcon.interfaceForeground#78b898
symbolIcon.keyForeground#d0dce8
symbolIcon.keywordForeground#6a9ac8
symbolIcon.methodForeground#8ab8e8
symbolIcon.moduleForeground#6a9ac8
symbolIcon.namespaceForeground#6a9ac8
symbolIcon.nullForeground#b86878
symbolIcon.numberForeground#a888b0
symbolIcon.objectForeground#d0dce8
symbolIcon.operatorForeground#6a788a
symbolIcon.packageForeground#6a9ac8
symbolIcon.propertyForeground#78b0c8
symbolIcon.referenceForeground#d87080
symbolIcon.snippetForeground#6a788a
symbolIcon.stringForeground#b8a098
symbolIcon.structForeground#d0dce8
symbolIcon.textForeground#d0dce8
symbolIcon.typeParameterForeground#78b898
symbolIcon.unitForeground#a888b0
symbolIcon.variableForeground#78b0c8
tab.activeBackground#141a22
tab.activeBorder#6a9ac8
tab.activeForeground#8ab8e8
tab.border#243040
tab.hoverBackground#243040
tab.hoverForeground#d8e0e8
tab.inactiveBackground#181e28
tab.inactiveForeground#687888
terminal.ansiBlack#2a3440
terminal.ansiBlue#6088b8
terminal.ansiBrightBlack#6a788a
terminal.ansiBrightBlue#88b0d8
terminal.ansiBrightCyan#98c8d8
terminal.ansiBrightGreen#90d0b0
terminal.ansiBrightMagenta#c0a8c8
terminal.ansiBrightRed#e89098
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#e8d098
terminal.ansiCyan#78b0c8
terminal.ansiGreen#78b898
terminal.ansiMagenta#a888b0
terminal.ansiRed#d87080
terminal.ansiWhite#d0d8e0
terminal.ansiYellow#d0b070
terminal.background#141a22
terminal.foreground#d0d8e0
testing.iconErrored#b86878
testing.iconFailed#b86878
testing.iconPassed#78b898
testing.iconQueued#d0b070
testing.iconSkipped#5a6878
testing.iconUnset#5a6878
testing.peekBorder#b86878
testing.peekHeaderBackground#b8687820
testing.runAction#78b898
textLink.activeForeground#a8d0f0
textLink.foreground#8ab8e8
titleBar.activeBackground#181e28
titleBar.activeForeground#d8e0e8
titleBar.inactiveBackground#141a22
titleBar.inactiveForeground#5a6878
walkThrough.embeddedEditorBackground#181e28
welcomePage.background#141618
welcomePage.progress.background#243040
welcomePage.progress.foreground#6a9ac8
welcomePage.tileBackground#181e28
welcomePage.tileBorder#243040
welcomePage.tileHoverBackground#243040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#5a6878	italic
keyword, storage	#8ab8e8	bold
keyword.control, keyword.control.flow	#6aa0d8	bold
entity.name.function, support.function	#8ab8e8	bold
entity.name.type, support.class, support.type, storage.type	#78b0c8	bold
string	#b8a098	—
constant.character.escape	#d87080	—
variable, support.variable	#d0d8e0	—
variable.parameter	#88a0b8	italic
constant.numeric, constant.character, constant	#a888b0	—
constant.language, support.constant, variable.language	#6aa0d8	—
keyword.operator	#8898a8	—
punctuation	#7888a0	—
entity.name.tag	#6a9ac8	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#78b0c8	italic
meta.selector, entity.name.tag.css	#d0dce8	—
meta.property-name, support.type.property-name	#6a9ac8	—
meta.property-value, support.constant.property-value	#b8a098	—
keyword.other.unit	#a888b0	—
markup.heading	#8ab8e8	bold
markup.bold	#d0dce8	bold
markup.italic	#d0dce8	italic
meta.link	#6088b8	—
markup.list	#6a9ac8	—
markup.inline.raw	#b8a098	—
markup.inserted	#78b898	—
markup.deleted	#b86878	—
markup.changed	#6088b8	—
support.type.property-name.json	#8ab8e8	—
entity.name.tag.yaml	#78b0c8	—
string.regexp	#d87080	—
meta.decorator, meta.annotation	#d0b070	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}!`;
}