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 - Skirk (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#080815
activityBar.foreground#b5fdff
activityBar.inactiveForeground#9090c0
activityBarBadge.background#b183fc
activityBarBadge.foreground#FFFFFF
badge.background#b183fc
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#b183fc
breadcrumb.background#1a1a30
breadcrumb.focusForeground#b5fdff
breadcrumb.foreground#8080b0
button.background#5a45e4
button.foreground#FFFFFF
button.hoverBackground#7a65f0
button.secondaryBackground#16255f
button.secondaryForeground#b5fdff
button.secondaryHoverBackground#3a2f8f
charts.blue#c0a0f0
charts.foreground#b5fdff
charts.green#80e0e0
charts.lines#2a2a4080
charts.orange#b5fdff
charts.purple#c0a0f0
charts.red#efadca
charts.yellow#d0a0c0
checkbox.background#080815
checkbox.border#2a2a4080
checkbox.foreground#b5fdff
checkbox.selectBackground#5a45e4
checkbox.selectBorder#5a45e4
commandCenter.activeBackground#2a2a50
commandCenter.activeBorder#5a45e4
commandCenter.activeForeground#b183fc
commandCenter.background#1a1a30
commandCenter.border#2a2a50
commandCenter.debuggingBackground#5a45e420
commandCenter.foreground#b5fdff
commandCenter.inactiveBorder#2a2a5080
commandCenter.inactiveForeground#7a70a0
debugConsole.errorForeground#efadca
debugConsole.infoForeground#c0a0f0
debugConsole.sourceForeground#8080b0
debugConsole.warningForeground#d0a0c0
debugConsoleInputIcon.foreground#b183fc
debugIcon.breakpointCurrentStackframeForeground#b183fc
debugIcon.breakpointDisabledForeground#7a70a0
debugIcon.breakpointForeground#efadca
debugIcon.breakpointStackframeForeground#80e0e0
debugIcon.breakpointUnverifiedForeground#d0a0c0
debugIcon.continueForeground#80e0e0
debugIcon.disconnectForeground#efadca
debugIcon.pauseForeground#d0a0c0
debugIcon.restartForeground#80e0e0
debugIcon.startForeground#80e0e0
debugIcon.stepBackForeground#b183fc
debugIcon.stepIntoForeground#b183fc
debugIcon.stepOutForeground#b183fc
debugIcon.stepOverForeground#b183fc
debugIcon.stopForeground#efadca
debugTokenExpression.boolean#b183fc
debugTokenExpression.error#efadca
debugTokenExpression.name#b5fdff
debugTokenExpression.number#c0a0f0
debugTokenExpression.string#e0c0f0
debugTokenExpression.value#b183fc
debugToolBar.background#1a1a30
debugToolBar.border#2a2a50
debugView.exceptionLabelBackground#e090b0
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#5a45e4
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#b183fc60
descriptionForeground#8080b0
diffEditor.diagonalFill#2a2a5040
diffEditor.insertedLineBackground#80e0e015
diffEditor.insertedTextBackground#80e0e020
diffEditor.insertedTextBorder#80e0e000
diffEditor.removedLineBackground#e090b015
diffEditor.removedTextBackground#e090b020
diffEditor.removedTextBorder#e090b000
diffEditorGutter.insertedLineBackground#80e0e030
diffEditorGutter.removedLineBackground#e090b030
diffEditorOverview.insertedForeground#80e0e0
diffEditorOverview.removedForeground#e090b0
dropdown.background#080815
dropdown.border#2a2a4080
dropdown.foreground#b5fdff
dropdown.listBackground#1a1a30
editor.background#0b0b1a
editor.findMatchBackground#b183fc50
editor.findMatchHighlightBackground#b183fc25
editor.focusedStackFrameHighlightBackground#80e0e030
editor.foldBackground#5a45e415
editor.foreground#b5fdff
editor.lineHighlightBackground#121225
editor.lineHighlightBorder#2a2a4040
editor.selectionBackground#b183fc50
editor.stackFrameHighlightBackground#d0a0c030
editor.wordHighlightBackground#5a45e430
editor.wordHighlightStrongBackground#b183fc50
editorBracketHighlight.foreground1#b183fc
editorBracketHighlight.foreground2#efadca
editorBracketHighlight.foreground3#c0a0f0
editorBracketHighlight.foreground4#80e0e0
editorBracketHighlight.foreground5#d0a0c0
editorBracketHighlight.foreground6#c0a0f0
editorBracketHighlight.unexpectedBracket.foreground#efadca
editorBracketMatch.background#5a45e440
editorBracketMatch.border#5a45e4
editorCodeLens.foreground#7a70a0
editorCursor.foreground#b183fc
editorError.border#efadca00
editorError.foreground#efadca
editorGroup.border#2a2a50
editorGroup.dropBackground#5a45e430
editorGroup.dropIntoPromptBackground#1a1a30
editorGroup.dropIntoPromptBorder#5a45e4
editorGroup.dropIntoPromptForeground#b5fdff
editorGroup.emptyBackground#1a1a30
editorGroup.focusedEmptyBorder#5a45e4
editorGroupHeader.tabsBackground#1a1a30
editorGutter.addedBackground#80e0e0
editorGutter.deletedBackground#e090b0
editorGutter.modifiedBackground#c0a0f0
editorHint.border#80e0e000
editorHint.foreground#80e0e0
editorHoverWidget.background#1a1a30
editorHoverWidget.border#2a2a4080
editorIndentGuide.activeBackground1#5a45e4
editorIndentGuide.background1#2a2a4080
editorInfo.border#c0a0f000
editorInfo.foreground#c0a0f0
editorInlayHint.background#2a2a5080
editorInlayHint.foreground#90a0d0
editorInlayHint.parameterForeground#c0a0f0
editorInlayHint.typeForeground#b183fc
editorLineNumber.activeForeground#b183fc
editorLineNumber.foreground#7a70a0
editorOverviewRuler.addedForeground#80e0e0
editorOverviewRuler.background#1a1a30
editorOverviewRuler.border#2a2a50
editorOverviewRuler.bracketMatchForeground#5a45e4
editorOverviewRuler.commonContentForeground#8080b0
editorOverviewRuler.currentContentForeground#80e0e0
editorOverviewRuler.deletedForeground#e090b0
editorOverviewRuler.errorForeground#efadca
editorOverviewRuler.findMatchForeground#b183fc80
editorOverviewRuler.incomingContentForeground#c0a0f0
editorOverviewRuler.infoForeground#c0a0f0
editorOverviewRuler.modifiedForeground#c0a0f0
editorOverviewRuler.rangeHighlightForeground#5a45e440
editorOverviewRuler.selectionHighlightForeground#b183fc60
editorOverviewRuler.warningForeground#d0a0c0
editorOverviewRuler.wordHighlightForeground#b183fc60
editorOverviewRuler.wordHighlightStrongForeground#5a45e480
editorStickyScroll.background#1a1a30
editorStickyScrollHover.background#2a2a50
editorSuggestWidget.background#1a1a30
editorSuggestWidget.foreground#b5fdff
editorSuggestWidget.highlightForeground#b183fc
editorSuggestWidget.selectedBackground#5a45e4
editorWarning.border#d0a0c000
editorWarning.foreground#d0a0c0
editorWhitespace.foreground#2a2a4060
editorWidget.background#1a1a30
editorWidget.border#2a2a4080
editorWidget.foreground#b5fdff
errorForeground#efadca
extensionBadge.remoteBackground#5a45e4
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#5a45e4
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#16255f
extensionIcon.preReleaseForeground#b183fc
extensionIcon.sponsorForeground#b183fc
extensionIcon.starForeground#d0a0c0
extensionIcon.verifiedForeground#80e0e0
focusBorder#5a45e4
gitDecoration.addedResourceForeground#80e0e0
gitDecoration.conflictingResourceForeground#efadca
gitDecoration.deletedResourceForeground#efadca
gitDecoration.ignoredResourceForeground#7a70a0
gitDecoration.modifiedResourceForeground#c0a0f0
gitDecoration.untrackedResourceForeground#d0a0c0
icon.foreground#b5fdff
input.background#080815
input.border#2a2a4080
input.foreground#b5fdff
input.placeholderForeground#7a70a0
inputOption.activeBackground#5a45e4
inputOption.activeForeground#FFFFFF
keybindingLabel.background#2a2a50
keybindingLabel.border#2a2a50
keybindingLabel.bottomBorder#7a70a0
keybindingLabel.foreground#b5fdff
list.activeSelectionBackground#5a45e4
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#b183fc50
list.focusForeground#b5fdff
list.hoverBackground#2a2a50
list.hoverForeground#b5fdff
list.inactiveSelectionBackground#2a2a5080
list.inactiveSelectionForeground#b5fdff
menu.background#080815
menu.border#2a2a50
menu.foreground#b5fdff
menu.selectionBackground#5a45e4
menu.selectionBorder#5a45e400
menu.selectionForeground#FFFFFF
menu.separatorBackground#2a2a4080
menubar.selectionBackground#2a2a50
menubar.selectionForeground#b5fdff
merge.border#2a2a50
merge.commonContentBackground#8080b020
merge.commonHeaderBackground#8080b040
merge.currentContentBackground#80e0e020
merge.currentHeaderBackground#80e0e040
merge.incomingContentBackground#c0a0f020
merge.incomingHeaderBackground#c0a0f040
mergeEditor.change.background#c0a0f020
mergeEditor.change.word.background#c0a0f040
mergeEditor.conflict.handledFocused.border#80e0e0
mergeEditor.conflict.handledUnfocused.border#80e0e080
mergeEditor.conflict.unhandledFocused.border#d0a0c0
mergeEditor.conflict.unhandledUnfocused.border#d0a0c080
minimap.background#1a1a30
minimap.selectionHighlight#b183fc60
notifications.background#1a1a30
notifications.border#2a2a50
notifications.foreground#b5fdff
notificationsErrorIcon.foreground#efadca
notificationsInfoIcon.foreground#c0a0f0
notificationsWarningIcon.foreground#d0a0c0
panel.background#1a1a30
panel.border#2a2a50
panelTitle.activeBorder#5a45e4
panelTitle.activeForeground#b5fdff
panelTitle.inactiveForeground#8080b0
peekView.border#5a45e4
peekViewEditor.background#1a1a30
peekViewResult.background#1a1a30
peekViewResult.matchHighlightBackground#b183fc50
peekViewTitle.background#2a2a50
peekViewTitleLabel.foreground#b5fdff
progressBar.background#5a45e4
quickInput.background#1a1a30
quickInput.foreground#b5fdff
quickInputList.focusBackground#5a45e4
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#2a2a50
scrollbarSlider.activeBackground#5a45e4
scrollbarSlider.background#2a2a4080
scrollbarSlider.hoverBackground#48404a
selection.background#b183fc60
settings.checkboxBackground#080815
settings.checkboxBorder#5a45e4
settings.checkboxForeground#b5fdff
settings.dropdownBackground#080815
settings.dropdownBorder#2a2a50
settings.dropdownForeground#b5fdff
settings.dropdownListBorder#2a2a50
settings.focusedRowBackground#2a2a5040
settings.focusedRowBorder#5a45e480
settings.headerForeground#b5fdff
settings.modifiedItemIndicator#5a45e4
settings.numberInputBackground#080815
settings.numberInputBorder#5a45e4
settings.numberInputForeground#b5fdff
settings.rowHoverBackground#2a2a5020
settings.sashBorder#2a2a50
settings.textInputBackground#080815
settings.textInputBorder#5a45e4
settings.textInputForeground#b5fdff
sideBar.background#1a1a30
sideBar.border#2a2a50
sideBar.foreground#b5fdff
sideBarSectionHeader.background#2a2a50
sideBarSectionHeader.foreground#b5fdff
sideBarTitle.foreground#b183fc
statusBar.background#5a45e4
statusBar.debuggingBackground#16255f
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#0b0b1a
statusBar.noFolderForeground#b5fdff
symbolIcon.arrayForeground#b5fdff
symbolIcon.booleanForeground#b183fc
symbolIcon.classForeground#c0a0f0
symbolIcon.colorForeground#b5fdff
symbolIcon.constantForeground#c0a0f0
symbolIcon.constructorForeground#b183fc
symbolIcon.enumeratorForeground#d0a0c0
symbolIcon.enumeratorMemberForeground#c0a0f0
symbolIcon.eventForeground#d0a0c0
symbolIcon.fieldForeground#c0a0f0
symbolIcon.fileForeground#8080b0
symbolIcon.folderForeground#d0a0c0
symbolIcon.functionForeground#b183fc
symbolIcon.interfaceForeground#80e0e0
symbolIcon.keyForeground#b5fdff
symbolIcon.keywordForeground#b183fc
symbolIcon.methodForeground#b183fc
symbolIcon.moduleForeground#c0a0f0
symbolIcon.namespaceForeground#c0a0f0
symbolIcon.nullForeground#efadca
symbolIcon.numberForeground#c0a0f0
symbolIcon.objectForeground#b5fdff
symbolIcon.operatorForeground#8080b0
symbolIcon.packageForeground#c0a0f0
symbolIcon.propertyForeground#c0a0f0
symbolIcon.referenceForeground#c0a0f0
symbolIcon.snippetForeground#8080b0
symbolIcon.stringForeground#e0c0f0
symbolIcon.structForeground#b5fdff
symbolIcon.textForeground#b5fdff
symbolIcon.typeParameterForeground#80e0e0
symbolIcon.unitForeground#c0a0f0
symbolIcon.variableForeground#c0a0f0
tab.activeBackground#0b0b1a
tab.activeBorder#5a45e4
tab.activeForeground#b183fc
tab.border#2a2a50
tab.hoverBackground#2a2a50
tab.hoverForeground#b5fdff
tab.inactiveBackground#1a1a30
tab.inactiveForeground#8080b0
terminal.ansiBlack#2a2a50
terminal.ansiBlue#c0a0f0
terminal.ansiBrightBlack#8080b0
terminal.ansiBrightBlue#b0a0f0
terminal.ansiBrightCyan#a0d0f0
terminal.ansiBrightGreen#90e0e0
terminal.ansiBrightMagenta#b5fdff
terminal.ansiBrightRed#f0a0c0
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#e0c0d0
terminal.ansiCyan#b183fc
terminal.ansiGreen#80e0e0
terminal.ansiMagenta#b183fc
terminal.ansiRed#efadca
terminal.ansiWhite#b5fdff
terminal.ansiYellow#d0a0c0
terminal.background#0b0b1a
terminal.foreground#b5fdff
testing.iconErrored#e090b0
testing.iconFailed#e090b0
testing.iconPassed#80e0e0
testing.iconQueued#d0a0c0
testing.iconSkipped#7a70a0
testing.iconUnset#7a70a0
testing.peekBorder#e090b0
testing.peekHeaderBackground#e090b020
testing.runAction#80e0e0
textLink.activeForeground#b5fdff
textLink.foreground#b183fc
titleBar.activeBackground#1a1a30
titleBar.activeForeground#b5fdff
titleBar.inactiveBackground#0b0b1a
titleBar.inactiveForeground#7a70a0
walkThrough.embeddedEditorBackground#1a1a30
welcomePage.background#0b0b1a
welcomePage.progress.background#2a2a50
welcomePage.progress.foreground#5a45e4
welcomePage.tileBackground#1a1a30
welcomePage.tileBorder#2a2a50
welcomePage.tileHoverBackground#2a2a50

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8080b0	italic
keyword, storage	#b183fc	bold
keyword.control, keyword.control.flow	#d0b0ff	bold
entity.name.function, support.function	#c0a0f0	bold
entity.name.type, support.class, support.type, storage.type	#d0a0e0	bold
string	#e0c0f0	—
constant.character.escape	#efadca	—
variable, support.variable	#b5fdff	—
variable.parameter	#d0a0d0	italic
constant.numeric, constant.character, constant	#c0a0f0	—
constant.language, support.constant, variable.language	#b183fc	—
keyword.operator	#b090d0	—
punctuation	#9080c0	—
entity.name.tag	#b183fc	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#b5fdff	italic
meta.selector, entity.name.tag.css	#b5fdff	—
meta.property-name, support.type.property-name	#b183fc	—
meta.property-value, support.constant.property-value	#e0c0f0	—
keyword.other.unit	#c0a0f0	—
markup.heading	#b183fc	bold
markup.bold	#b5fdff	bold
markup.italic	#b5fdff	italic
meta.link	#b5fdff	—
markup.list	#b183fc	—
markup.inline.raw	#e0c0f0	—
markup.inserted	#80e0e0	—
markup.deleted	#efadca	—
markup.changed	#c0a0f0	—
support.type.property-name.json	#b183fc	—
entity.name.tag.yaml	#b5fdff	—
string.regexp	#efadca	—
meta.decorator, meta.annotation	#d0a0c0	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}!`;
}