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

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#1a3050
activityBar.foreground#f5fafe
activityBar.inactiveForeground#7a98b8
activityBarBadge.background#3c8ba2
activityBarBadge.foreground#FFFFFF
badge.background#3c8ba2
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#1a3050
breadcrumb.background#f0f7fb
breadcrumb.focusForeground#1a3050
breadcrumb.foreground#5a7090
button.background#1a3050
button.foreground#FFFFFF
button.hoverBackground#2a4a8a
button.secondaryBackground#1a3050
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#0f1a3f
charts.blue#4888c8
charts.foreground#1a3050
charts.green#6aaa8a
charts.lines#dceef8
charts.orange#3c8ba2
charts.purple#78a8d8
charts.red#3c8ba2
charts.yellow#c8b870
checkbox.background#FFFFFF
checkbox.border#d5e8f0
checkbox.foreground#1a3050
checkbox.selectBackground#1a3050
checkbox.selectBorder#1a3050
commandCenter.activeBackground#dceef8
commandCenter.activeBorder#1a3050
commandCenter.activeForeground#1a3050
commandCenter.background#f0f7fb
commandCenter.border#dceef8
commandCenter.debuggingBackground#1a305020
commandCenter.foreground#1a3050
commandCenter.inactiveBorder#dceef880
commandCenter.inactiveForeground#5a7090
debugConsole.errorForeground#3c8ba2
debugConsole.infoForeground#4888c8
debugConsole.sourceForeground#5a7090
debugConsole.warningForeground#c8b870
debugConsoleInputIcon.foreground#1a3050
debugIcon.breakpointCurrentStackframeForeground#1a3050
debugIcon.breakpointDisabledForeground#a8b0c0
debugIcon.breakpointForeground#3c8ba2
debugIcon.breakpointStackframeForeground#6aaa8a
debugIcon.breakpointUnverifiedForeground#c8b870
debugIcon.continueForeground#6aaa8a
debugIcon.disconnectForeground#3c8ba2
debugIcon.pauseForeground#c8b870
debugIcon.restartForeground#6aaa8a
debugIcon.startForeground#6aaa8a
debugIcon.stepBackForeground#1a3050
debugIcon.stepIntoForeground#1a3050
debugIcon.stepOutForeground#1a3050
debugIcon.stepOverForeground#1a3050
debugIcon.stopForeground#3c8ba2
debugTokenExpression.boolean#1a3050
debugTokenExpression.error#3c8ba2
debugTokenExpression.name#1a3050
debugTokenExpression.number#78a8d8
debugTokenExpression.string#1a3050
debugTokenExpression.value#1a3050
debugToolBar.background#f0f7fb
debugToolBar.border#dceef8
debugView.exceptionLabelBackground#3c8ba2
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#1a3050
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#1a305060
descriptionForeground#5a7090
diffEditor.diagonalFill#dceef840
diffEditor.insertedLineBackground#6aaa8a15
diffEditor.insertedTextBackground#6aaa8a20
diffEditor.insertedTextBorder#6aaa8a00
diffEditor.removedLineBackground#3c8ba215
diffEditor.removedTextBackground#3c8ba220
diffEditor.removedTextBorder#3c8ba200
diffEditorGutter.insertedLineBackground#6aaa8a30
diffEditorGutter.removedLineBackground#3c8ba230
diffEditorOverview.insertedForeground#6aaa8a
diffEditorOverview.removedForeground#3c8ba2
dropdown.background#FFFFFF
dropdown.border#d5e8f0
dropdown.foreground#1a3050
dropdown.listBackground#FFFFFF
editor.background#f8fcfe
editor.findMatchBackground#94cbcf50
editor.findMatchHighlightBackground#3c8ba225
editor.focusedStackFrameHighlightBackground#6aaa8a30
editor.foldBackground#3c8ba215
editor.foreground#1a3050
editor.lineHighlightBackground#f0f7fb
editor.lineHighlightBorder#d8ecf520
editor.selectionBackground#94cbcf40
editor.stackFrameHighlightBackground#c8b87030
editor.wordHighlightBackground#3c8ba220
editor.wordHighlightStrongBackground#94cbcf40
editorBracketHighlight.foreground1#1a3050
editorBracketHighlight.foreground2#3c8ba2
editorBracketHighlight.foreground3#4888c8
editorBracketHighlight.foreground4#6aaa8a
editorBracketHighlight.foreground5#c8b870
editorBracketHighlight.foreground6#78a8d8
editorBracketHighlight.unexpectedBracket.foreground#3c8ba2
editorBracketMatch.background#3c8ba230
editorBracketMatch.border#1a3050
editorCodeLens.foreground#7a98b8
editorCursor.foreground#1a3050
editorError.border#3c8ba200
editorError.foreground#3c8ba2
editorGroup.border#dceef8
editorGroup.dropBackground#1a305030
editorGroup.dropIntoPromptBackground#f0f7fb
editorGroup.dropIntoPromptBorder#1a3050
editorGroup.dropIntoPromptForeground#1a3050
editorGroup.emptyBackground#f0f7fb
editorGroup.focusedEmptyBorder#1a3050
editorGroupHeader.tabsBackground#f0f7fb
editorGutter.addedBackground#6aaa8a
editorGutter.deletedBackground#3c8ba2
editorGutter.modifiedBackground#4888c8
editorHint.border#6aaa8a00
editorHint.foreground#6aaa8a
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#dceef8
editorIndentGuide.activeBackground1#1a3050
editorIndentGuide.background1#dceef8
editorInfo.border#1a305000
editorInfo.foreground#1a3050
editorInlayHint.background#dceef880
editorInlayHint.foreground#5a7090
editorInlayHint.parameterForeground#3c8ba2
editorInlayHint.typeForeground#1a3050
editorLineNumber.activeForeground#1a3050
editorLineNumber.foreground#7a98b8
editorOverviewRuler.addedForeground#6aaa8a
editorOverviewRuler.background#f0f7fb
editorOverviewRuler.border#dceef8
editorOverviewRuler.bracketMatchForeground#1a3050
editorOverviewRuler.commonContentForeground#5a7090
editorOverviewRuler.currentContentForeground#6aaa8a
editorOverviewRuler.deletedForeground#3c8ba2
editorOverviewRuler.errorForeground#3c8ba2
editorOverviewRuler.findMatchForeground#1a305080
editorOverviewRuler.incomingContentForeground#78a8d8
editorOverviewRuler.infoForeground#4888c8
editorOverviewRuler.modifiedForeground#78a8d8
editorOverviewRuler.rangeHighlightForeground#1a305040
editorOverviewRuler.selectionHighlightForeground#1a305060
editorOverviewRuler.warningForeground#c8b870
editorOverviewRuler.wordHighlightForeground#1a305060
editorOverviewRuler.wordHighlightStrongForeground#1a305080
editorStickyScroll.background#f0f7fb
editorStickyScrollHover.background#dceef8
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.foreground#1a3050
editorSuggestWidget.highlightForeground#1a3050
editorSuggestWidget.selectedBackground#dceef8
editorWarning.border#c8b87000
editorWarning.foreground#c8b870
editorWhitespace.foreground#d5e8f0
editorWidget.background#f0f7fb
editorWidget.border#dceef8
editorWidget.foreground#1a3050
errorForeground#3c8ba2
extensionBadge.remoteBackground#1a3050
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#1a3050
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#1a3050
extensionIcon.preReleaseForeground#3c8ba2
extensionIcon.sponsorForeground#1a3050
extensionIcon.starForeground#c8b870
extensionIcon.verifiedForeground#6aaa8a
focusBorder#1a3050
gitDecoration.addedResourceForeground#6aaa8a
gitDecoration.conflictingResourceForeground#3c8ba2
gitDecoration.deletedResourceForeground#3c8ba2
gitDecoration.ignoredResourceForeground#a8b0c0
gitDecoration.modifiedResourceForeground#4888c8
gitDecoration.untrackedResourceForeground#c8b870
icon.foreground#1a3050
input.background#FFFFFF
input.border#d5e8f0
input.foreground#1a3050
input.placeholderForeground#7a98b880
inputOption.activeBackground#1a3050
inputOption.activeForeground#FFFFFF
keybindingLabel.background#dceef8
keybindingLabel.border#dceef8
keybindingLabel.bottomBorder#1a3050
keybindingLabel.foreground#1a3050
list.activeSelectionBackground#1a3050
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#3c8ba230
list.focusForeground#1a3050
list.hoverBackground#dceef8
list.hoverForeground#1a3050
list.inactiveSelectionBackground#dceef880
list.inactiveSelectionForeground#1a3050
menu.background#FFFFFF
menu.border#dceef8
menu.foreground#1a3050
menu.selectionBackground#1a3050
menu.selectionBorder#1a305000
menu.selectionForeground#FFFFFF
menu.separatorBackground#dceef8
menubar.selectionBackground#dceef8
menubar.selectionForeground#1a3050
merge.border#dceef8
merge.commonContentBackground#5a709020
merge.commonHeaderBackground#5a709040
merge.currentContentBackground#6aaa8a20
merge.currentHeaderBackground#6aaa8a40
merge.incomingContentBackground#78a8d820
merge.incomingHeaderBackground#78a8d840
mergeEditor.change.background#78a8d820
mergeEditor.change.word.background#78a8d840
mergeEditor.conflict.handledFocused.border#6aaa8a
mergeEditor.conflict.handledUnfocused.border#6aaa8a80
mergeEditor.conflict.unhandledFocused.border#c8b870
mergeEditor.conflict.unhandledUnfocused.border#c8b87080
minimap.background#f0f7fb
minimap.selectionHighlight#94cbcf50
notifications.background#FFFFFF
notifications.border#dceef8
notifications.foreground#1a3050
notificationsErrorIcon.foreground#3c8ba2
notificationsInfoIcon.foreground#1a3050
notificationsWarningIcon.foreground#c8b870
panel.background#f0f7fb
panel.border#dceef8
panelTitle.activeBorder#1a3050
panelTitle.activeForeground#1a3050
panelTitle.inactiveForeground#5a7090
peekView.border#1a3050
peekViewEditor.background#f0f7fb
peekViewResult.background#f0f7fb
peekViewResult.matchHighlightBackground#94cbcf50
peekViewTitle.background#1a3050
peekViewTitleLabel.foreground#f5fafe
progressBar.background#1a3050
quickInput.background#f0f7fb
quickInput.foreground#1a3050
quickInputList.focusBackground#1a3050
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#1a3050
scrollbarSlider.activeBackground#1a3050
scrollbarSlider.background#d5e8f050
scrollbarSlider.hoverBackground#d5e8f0
selection.background#94cbcf50
settings.checkboxBackground#FFFFFF
settings.checkboxBorder#1a3050
settings.checkboxForeground#1a3050
settings.dropdownBackground#FFFFFF
settings.dropdownBorder#dceef8
settings.dropdownForeground#1a3050
settings.dropdownListBorder#dceef8
settings.focusedRowBackground#dceef840
settings.focusedRowBorder#1a305080
settings.headerForeground#1a3050
settings.modifiedItemIndicator#1a3050
settings.numberInputBackground#FFFFFF
settings.numberInputBorder#1a3050
settings.numberInputForeground#1a3050
settings.rowHoverBackground#d8ecf520
settings.sashBorder#dceef8
settings.textInputBackground#FFFFFF
settings.textInputBorder#1a3050
settings.textInputForeground#1a3050
sideBar.background#f0f7fb
sideBar.border#dceef8
sideBar.foreground#1a3050
sideBarSectionHeader.background#dceef8
sideBarSectionHeader.foreground#1a3050
sideBarTitle.foreground#1a3050
statusBar.background#1a3050
statusBar.debuggingBackground#1a3050
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#1a2a4a
statusBar.noFolderForeground#f5fafe
symbolIcon.arrayForeground#1a3050
symbolIcon.booleanForeground#1a3050
symbolIcon.classForeground#4888c8
symbolIcon.colorForeground#3c8ba2
symbolIcon.constantForeground#78a8d8
symbolIcon.constructorForeground#1a3050
symbolIcon.enumeratorForeground#c8b870
symbolIcon.enumeratorMemberForeground#78a8d8
symbolIcon.eventForeground#c8b870
symbolIcon.fieldForeground#4888c8
symbolIcon.fileForeground#5a7090
symbolIcon.folderForeground#c8b870
symbolIcon.functionForeground#1a3050
symbolIcon.interfaceForeground#6aaa8a
symbolIcon.keyForeground#1a3050
symbolIcon.keywordForeground#1a3050
symbolIcon.methodForeground#1a3050
symbolIcon.moduleForeground#4888c8
symbolIcon.namespaceForeground#4888c8
symbolIcon.nullForeground#3c8ba2
symbolIcon.numberForeground#78a8d8
symbolIcon.objectForeground#1a3050
symbolIcon.operatorForeground#5a7090
symbolIcon.packageForeground#4888c8
symbolIcon.propertyForeground#4888c8
symbolIcon.referenceForeground#78a8d8
symbolIcon.snippetForeground#5a7090
symbolIcon.stringForeground#1a3050
symbolIcon.structForeground#1a3050
symbolIcon.textForeground#1a3050
symbolIcon.typeParameterForeground#6aaa8a
symbolIcon.unitForeground#78a8d8
symbolIcon.variableForeground#4888c8
tab.activeBackground#f8fcfe
tab.activeBorder#1a3050
tab.activeForeground#1a3050
tab.border#dceef8
tab.hoverBackground#f8fcfe
tab.hoverForeground#1a3050
tab.inactiveBackground#f0f7fb
tab.inactiveForeground#5a7090
terminal.ansiBlack#1a3050
terminal.ansiBlue#1a3050
terminal.ansiBrightBlack#5a7090
terminal.ansiBrightBlue#5888c8
terminal.ansiBrightCyan#7dc5f0
terminal.ansiBrightGreen#7abaa0
terminal.ansiBrightMagenta#78a8d8
terminal.ansiBrightRed#3c8ba2
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#f0d080
terminal.ansiCyan#3c8ba2
terminal.ansiGreen#6aaa8a
terminal.ansiMagenta#4888c8
terminal.ansiRed#3c8ba2
terminal.ansiWhite#dceef8
terminal.ansiYellow#c8b870
terminal.background#f8fcfe
terminal.foreground#1a3050
testing.iconErrored#3c8ba2
testing.iconFailed#3c8ba2
testing.iconPassed#6aaa8a
testing.iconQueued#c8b870
testing.iconSkipped#a8b0c0
testing.iconUnset#a8b0c0
testing.peekBorder#3c8ba2
testing.peekHeaderBackground#3c8ba220
testing.runAction#6aaa8a
textLink.activeForeground#2a4a8a
textLink.foreground#1a3050
titleBar.activeBackground#1a3050
titleBar.activeForeground#f5fafe
titleBar.inactiveBackground#f0f7fb
titleBar.inactiveForeground#5a7090
walkThrough.embeddedEditorBackground#f0f7fb
welcomePage.background#f8fcfe
welcomePage.progress.background#dceef8
welcomePage.progress.foreground#1a3050
welcomePage.tileBackground#f0f7fb
welcomePage.tileBorder#dceef8
welcomePage.tileHoverBackground#dceef8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8a9fb8	italic
keyword, storage	#1a3050	bold
keyword.control, keyword.control.flow	#2a4a8a	bold
entity.name.function, support.function	#4888c8	bold
entity.name.type, support.class, support.type, storage.type	#1a3050	bold
string	#1a3050	—
constant.character.escape	#3c8ba2	—
variable, support.variable	#1a3050	—
variable.parameter	#3a4a6f	italic
constant.numeric, constant.character, constant	#78a8d8	—
constant.language, support.constant, variable.language	#1a3050	—
keyword.operator	#3a4a6f	—
punctuation	#5a7090	—
entity.name.tag	#1a3050	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#3c8ba2	italic
meta.selector, entity.name.tag.css	#1a3050	—
meta.property-name, support.type.property-name	#1a3050	—
meta.property-value, support.constant.property-value	#1a3050	—
keyword.other.unit	#78a8d8	—
markup.heading	#1a3050	bold
markup.bold	#1a3050	bold
markup.italic	#1a3050	italic
meta.link	#3c8ba2	—
markup.list	#1a3050	—
markup.inline.raw	#1a3050	—
markup.inserted	#6aaa8a	—
markup.deleted	#3c8ba2	—
markup.changed	#78a8d8	—
support.type.property-name.json	#1a3050	—
entity.name.tag.yaml	#3c8ba2	—
string.regexp	#3c8ba2	—
meta.decorator, meta.annotation	#c8b870	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}!`;
}