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

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#4a6b9a
activityBar.foreground#f5f9fc
activityBar.inactiveForeground#a8c0d8
activityBarBadge.background#c94e51
activityBarBadge.foreground#FFFFFF
badge.background#c94e51
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#4a6b9a
breadcrumb.background#edf4f9
breadcrumb.focusForeground#2a3545
breadcrumb.foreground#6a7888
button.background#5a7ba8
button.foreground#FFFFFF
button.hoverBackground#4a6b9a
button.secondaryBackground#c94e51
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#b04048
charts.blue#2d39aa
charts.foreground#2a3545
charts.green#5a9a78
charts.lines#d8e8f2
charts.orange#c6a270
charts.purple#8a5a95
charts.red#c94e51
charts.yellow#b89850
checkbox.background#FFFFFF
checkbox.border#b8d4e8
checkbox.foreground#2a3545
checkbox.selectBackground#5a7ba8
checkbox.selectBorder#5a7ba8
commandCenter.activeBackground#e5f0f7
commandCenter.activeBorder#4a6b9a
commandCenter.activeForeground#4a6b9a
commandCenter.background#edf4f9
commandCenter.border#d8e8f2
commandCenter.debuggingBackground#d1e2f920
commandCenter.foreground#2a3545
commandCenter.inactiveBorder#d8e8f280
commandCenter.inactiveForeground#6a7888
debugConsole.errorForeground#c94e51
debugConsole.infoForeground#2d39aa
debugConsole.sourceForeground#6a7888
debugConsole.warningForeground#b89850
debugConsoleInputIcon.foreground#4a6b9a
debugIcon.breakpointCurrentStackframeForeground#5a7ba8
debugIcon.breakpointDisabledForeground#a0a8b0
debugIcon.breakpointForeground#c94e51
debugIcon.breakpointStackframeForeground#5a9a78
debugIcon.breakpointUnverifiedForeground#b89850
debugIcon.continueForeground#5a9a78
debugIcon.disconnectForeground#c94e51
debugIcon.pauseForeground#b89850
debugIcon.restartForeground#5a9a78
debugIcon.startForeground#5a9a78
debugIcon.stepBackForeground#2d39aa
debugIcon.stepIntoForeground#2d39aa
debugIcon.stepOutForeground#2d39aa
debugIcon.stepOverForeground#2d39aa
debugIcon.stopForeground#c94e51
debugTokenExpression.boolean#4a6b9a
debugTokenExpression.error#c94e51
debugTokenExpression.name#2a3545
debugTokenExpression.number#8a5a95
debugTokenExpression.string#6f535a
debugTokenExpression.value#2d39aa
debugToolBar.background#edf4f9
debugToolBar.border#d8e8f2
debugView.exceptionLabelBackground#c94e51
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#5a7ba8
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#2d39aa60
descriptionForeground#6a7888
diffEditor.diagonalFill#d8e8f240
diffEditor.insertedLineBackground#5a9a7815
diffEditor.insertedTextBackground#5a9a7820
diffEditor.insertedTextBorder#5a9a7800
diffEditor.removedLineBackground#c94e5115
diffEditor.removedTextBackground#c94e5120
diffEditor.removedTextBorder#c94e5100
diffEditorGutter.insertedLineBackground#5a9a7830
diffEditorGutter.removedLineBackground#c94e5130
diffEditorOverview.insertedForeground#5a9a78
diffEditorOverview.removedForeground#c94e51
dropdown.background#FFFFFF
dropdown.border#b8d4e8
dropdown.foreground#2a3545
dropdown.listBackground#FFFFFF
editor.background#f5f9fc
editor.findMatchBackground#d1e2f960
editor.findMatchHighlightBackground#d1e2f930
editor.focusedStackFrameHighlightBackground#5a9a7830
editor.foldBackground#b8d4e815
editor.foreground#2a3545
editor.lineHighlightBackground#edf4f9
editor.lineHighlightBorder#d1e2f920
editor.selectionBackground#b8d4e840
editor.stackFrameHighlightBackground#b8985030
editor.wordHighlightBackground#b8d4e825
editor.wordHighlightStrongBackground#b8d4e845
editorBracketHighlight.foreground1#4a6b9a
editorBracketHighlight.foreground2#c94e51
editorBracketHighlight.foreground3#5a9aaa
editorBracketHighlight.foreground4#5a9a78
editorBracketHighlight.foreground5#b89850
editorBracketHighlight.foreground6#8a5a95
editorBracketHighlight.unexpectedBracket.foreground#c94e51
editorBracketMatch.background#b8d4e840
editorBracketMatch.border#5a7ba8
editorCodeLens.foreground#98a8b8
editorCursor.foreground#4a6b9a
editorError.border#c94e5100
editorError.foreground#c94e51
editorGroup.border#d8e8f2
editorGroup.dropBackground#b8d4e830
editorGroup.dropIntoPromptBackground#edf4f9
editorGroup.dropIntoPromptBorder#5a7ba8
editorGroup.dropIntoPromptForeground#2a3545
editorGroup.emptyBackground#edf4f9
editorGroup.focusedEmptyBorder#5a7ba8
editorGroupHeader.tabsBackground#edf4f9
editorGutter.addedBackground#5a9a78
editorGutter.deletedBackground#c94e51
editorGutter.modifiedBackground#5a7ba8
editorHint.border#5a9a7800
editorHint.foreground#5a9a78
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#d8e8f2
editorIndentGuide.activeBackground1#4a6b9a
editorIndentGuide.background1#e0ebf4
editorInfo.border#2d39aa00
editorInfo.foreground#2d39aa
editorInlayHint.background#e0ebf480
editorInlayHint.foreground#6a7888
editorInlayHint.parameterForeground#4a6b9a
editorInlayHint.typeForeground#2d39aa
editorLineNumber.activeForeground#4a6b9a
editorLineNumber.foreground#98a8b8
editorOverviewRuler.addedForeground#5a9a78
editorOverviewRuler.background#edf4f9
editorOverviewRuler.border#d8e8f2
editorOverviewRuler.bracketMatchForeground#5a7ba8
editorOverviewRuler.commonContentForeground#6a7888
editorOverviewRuler.currentContentForeground#5a9a78
editorOverviewRuler.deletedForeground#c94e51
editorOverviewRuler.errorForeground#c94e51
editorOverviewRuler.findMatchForeground#4a6b9a80
editorOverviewRuler.incomingContentForeground#5a7ba8
editorOverviewRuler.infoForeground#2d39aa
editorOverviewRuler.modifiedForeground#5a7ba8
editorOverviewRuler.rangeHighlightForeground#b8d4e840
editorOverviewRuler.selectionHighlightForeground#b8d4e860
editorOverviewRuler.warningForeground#b89850
editorOverviewRuler.wordHighlightForeground#b8d4e860
editorOverviewRuler.wordHighlightStrongForeground#b8d4e880
editorStickyScroll.background#edf4f9
editorStickyScrollHover.background#e5f0f7
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.foreground#2a3545
editorSuggestWidget.highlightForeground#4a6b9a
editorSuggestWidget.selectedBackground#e5f0f7
editorWarning.border#b8985000
editorWarning.foreground#b89850
editorWhitespace.foreground#d8e4ef
editorWidget.background#edf4f9
editorWidget.border#d8e8f2
editorWidget.foreground#2a3545
errorForeground#c94e51
extensionBadge.remoteBackground#5a7ba8
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#5a7ba8
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#4a6b9a
extensionIcon.preReleaseForeground#c94e51
extensionIcon.sponsorForeground#2d39aa
extensionIcon.starForeground#c6a270
extensionIcon.verifiedForeground#5a9a78
focusBorder#5a7ba8
gitDecoration.addedResourceForeground#5a9a78
gitDecoration.conflictingResourceForeground#c94e51
gitDecoration.deletedResourceForeground#c94e51
gitDecoration.ignoredResourceForeground#a8b0b8
gitDecoration.modifiedResourceForeground#5a7ba8
gitDecoration.untrackedResourceForeground#b89850
icon.foreground#2a3545
input.background#FFFFFF
input.border#b8d4e8
input.foreground#2a3545
input.placeholderForeground#98a8b880
inputOption.activeBackground#5a7ba8
inputOption.activeForeground#FFFFFF
keybindingLabel.background#e0ebf4
keybindingLabel.border#e0ebf4
keybindingLabel.bottomBorder#4a6b9a
keybindingLabel.foreground#2a3545
list.activeSelectionBackground#5a7ba8
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#b8d4e840
list.focusForeground#2a3545
list.hoverBackground#e5f0f7
list.hoverForeground#2a3545
list.inactiveSelectionBackground#b8d4e830
list.inactiveSelectionForeground#2a3545
menu.background#FFFFFF
menu.border#d8e8f2
menu.foreground#2a3545
menu.selectionBackground#5a7ba8
menu.selectionBorder#5a7ba800
menu.selectionForeground#FFFFFF
menu.separatorBackground#d8e8f2
menubar.selectionBackground#e5f0f7
menubar.selectionForeground#2a3545
merge.border#d8e8f2
merge.commonContentBackground#68708020
merge.commonHeaderBackground#68708040
merge.currentContentBackground#5a9a7820
merge.currentHeaderBackground#5a9a7840
merge.incomingContentBackground#5a7ba820
merge.incomingHeaderBackground#5a7ba840
mergeEditor.change.background#d1e2f920
mergeEditor.change.word.background#d1e2f940
mergeEditor.conflict.handledFocused.border#5a9a78
mergeEditor.conflict.handledUnfocused.border#5a9a7880
mergeEditor.conflict.unhandledFocused.border#b89850
mergeEditor.conflict.unhandledUnfocused.border#b8985080
minimap.background#edf4f9
minimap.selectionHighlight#b8d4e850
notifications.background#FFFFFF
notifications.border#d8e8f2
notifications.foreground#2a3545
notificationsErrorIcon.foreground#c94e51
notificationsInfoIcon.foreground#2d39aa
notificationsWarningIcon.foreground#b89850
panel.background#edf4f9
panel.border#d8e8f2
panelTitle.activeBorder#5a7ba8
panelTitle.activeForeground#2a3545
panelTitle.inactiveForeground#6a7888
peekView.border#5a7ba8
peekViewEditor.background#edf4f9
peekViewResult.background#edf4f9
peekViewResult.matchHighlightBackground#d1e2f950
peekViewTitle.background#4a6b9a
peekViewTitleLabel.foreground#f5f9fc
progressBar.background#5a7ba8
quickInput.background#edf4f9
quickInput.foreground#2a3545
quickInputList.focusBackground#5a7ba8
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#5a7ba8
scrollbarSlider.activeBackground#5a7ba8
scrollbarSlider.background#b8d4e850
scrollbarSlider.hoverBackground#b8d4e8
selection.background#b8d4e8
settings.checkboxBackground#FFFFFF
settings.checkboxBorder#4a6b9a
settings.checkboxForeground#2a3545
settings.dropdownBackground#FFFFFF
settings.dropdownBorder#d8e8f2
settings.dropdownForeground#2a3545
settings.dropdownListBorder#d8e8f2
settings.focusedRowBackground#edf4f940
settings.focusedRowBorder#5a7ba880
settings.headerForeground#2a3545
settings.modifiedItemIndicator#5a7ba8
settings.numberInputBackground#FFFFFF
settings.numberInputBorder#4a6b9a
settings.numberInputForeground#2a3545
settings.rowHoverBackground#edf4f920
settings.sashBorder#d8e8f2
settings.textInputBackground#FFFFFF
settings.textInputBorder#4a6b9a
settings.textInputForeground#2a3545
sideBar.background#edf4f9
sideBar.border#d8e8f2
sideBar.foreground#2a3545
sideBarSectionHeader.background#e0ebf4
sideBarSectionHeader.foreground#2a3545
sideBarTitle.foreground#4a6b9a
statusBar.background#5a7ba8
statusBar.debuggingBackground#2d39aa
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#4a6b9a
statusBar.noFolderForeground#f5f9fc
symbolIcon.arrayForeground#2a3545
symbolIcon.booleanForeground#4a6b9a
symbolIcon.classForeground#5a7ba8
symbolIcon.colorForeground#8a5a95
symbolIcon.constantForeground#c94e51
symbolIcon.constructorForeground#5a7ba8
symbolIcon.enumeratorForeground#b89850
symbolIcon.enumeratorMemberForeground#c94e51
symbolIcon.eventForeground#b89850
symbolIcon.fieldForeground#5a9aaa
symbolIcon.fileForeground#6a7888
symbolIcon.folderForeground#c6a270
symbolIcon.functionForeground#4a6b9a
symbolIcon.interfaceForeground#5a9a78
symbolIcon.keyForeground#2a3545
symbolIcon.keywordForeground#4a6b9a
symbolIcon.methodForeground#4a6b9a
symbolIcon.moduleForeground#5a7ba8
symbolIcon.namespaceForeground#5a7ba8
symbolIcon.nullForeground#c94e51
symbolIcon.numberForeground#8a5a95
symbolIcon.objectForeground#2a3545
symbolIcon.operatorForeground#6a7888
symbolIcon.packageForeground#5a7ba8
symbolIcon.propertyForeground#5a9aaa
symbolIcon.referenceForeground#c94e51
symbolIcon.snippetForeground#6a7888
symbolIcon.stringForeground#6f535a
symbolIcon.structForeground#2a3545
symbolIcon.textForeground#2a3545
symbolIcon.typeParameterForeground#5a9a78
symbolIcon.unitForeground#8a5a95
symbolIcon.variableForeground#5a9aaa
tab.activeBackground#f5f9fc
tab.activeBorder#5a7ba8
tab.activeForeground#4a6b9a
tab.border#d8e8f2
tab.hoverBackground#f5f9fc
tab.hoverForeground#4a6b9a
tab.inactiveBackground#edf4f9
tab.inactiveForeground#6a7888
terminal.ansiBlack#2a3545
terminal.ansiBlue#2d39aa
terminal.ansiBrightBlack#6a7888
terminal.ansiBrightBlue#4a6b9a
terminal.ansiBrightCyan#72b2c0
terminal.ansiBrightGreen#72b290
terminal.ansiBrightMagenta#a878a8
terminal.ansiBrightRed#d87080
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#c6a270
terminal.ansiCyan#5a9aaa
terminal.ansiGreen#5a9a78
terminal.ansiMagenta#8a5a95
terminal.ansiRed#c94e51
terminal.ansiWhite#edf4f9
terminal.ansiYellow#b89850
terminal.background#f5f9fc
terminal.foreground#2a3545
testing.iconErrored#c94e51
testing.iconFailed#c94e51
testing.iconPassed#5a9a78
testing.iconQueued#b89850
testing.iconSkipped#a0a8b0
testing.iconUnset#a0a8b0
testing.peekBorder#c94e51
testing.peekHeaderBackground#c94e5120
testing.runAction#5a9a78
textLink.activeForeground#2d39aa
textLink.foreground#4a6b9a
titleBar.activeBackground#4a6b9a
titleBar.activeForeground#f5f9fc
titleBar.inactiveBackground#edf4f9
titleBar.inactiveForeground#5a7ba8
walkThrough.embeddedEditorBackground#edf4f9
welcomePage.background#f5f9fc
welcomePage.progress.background#d8e8f2
welcomePage.progress.foreground#5a7ba8
welcomePage.tileBackground#edf4f9
welcomePage.tileBorder#d8e8f2
welcomePage.tileHoverBackground#e5f0f7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8898a8	italic
keyword, storage	#4a6b9a	bold
keyword.control, keyword.control.flow	#3a5888	bold
entity.name.function, support.function	#4a6b9a	bold
entity.name.type, support.class, support.type, storage.type	#5a9aaa	bold
string	#6f535a	—
constant.character.escape	#c94e51	—
variable, support.variable	#2a3545	—
variable.parameter	#5a7088	italic
constant.numeric, constant.character, constant	#8a5a95	—
constant.language, support.constant, variable.language	#4a6b9a	—
keyword.operator	#586878	—
punctuation	#687888	—
entity.name.tag	#4a6b9a	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#5a9aaa	italic
meta.selector, entity.name.tag.css	#2a3545	—
meta.property-name, support.type.property-name	#4a6b9a	—
meta.property-value, support.constant.property-value	#6f535a	—
keyword.other.unit	#8a5a95	—
markup.heading	#4a6b9a	bold
markup.bold	#2a3545	bold
markup.italic	#2a3545	italic
meta.link	#5a7ba8	—
markup.list	#4a6b9a	—
markup.inline.raw	#6f535a	—
markup.inserted	#5a9a78	—
markup.deleted	#c94e51	—
markup.changed	#5a7ba8	—
support.type.property-name.json	#4a6b9a	—
entity.name.tag.yaml	#5a9aaa	—
string.regexp	#c94e51	—
meta.decorator, meta.annotation	#c6a270	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}!`;
}