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 - Kamisato Ayaka (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#0a1020
activityBar.foreground#e0ecf8
activityBar.inactiveForeground#7080a0
activityBarBadge.background#c5dbee
activityBarBadge.foreground#FFFFFF
badge.background#c5dbee
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#c5dbee
breadcrumb.background#1c2840
breadcrumb.focusForeground#e0ecf8
breadcrumb.foreground#8898a8
button.background#5878c8
button.foreground#FFFFFF
button.hoverBackground#6898d8
button.secondaryBackground#16255f
button.secondaryForeground#e0ecf8
button.secondaryHoverBackground#3a4f7f
charts.blue#b8d0f0
charts.foreground#e0ecf8
charts.green#80d8b8
charts.lines#2a3a5080
charts.orange#c5dbee
charts.purple#b8d0f0
charts.red#e75f96
charts.yellow#e8b840
checkbox.background#0a1020
checkbox.border#2a3a5080
checkbox.foreground#e0ecf8
checkbox.selectBackground#5878c8
checkbox.selectBorder#5878c8
commandCenter.activeBackground#283858
commandCenter.activeBorder#5878c8
commandCenter.activeForeground#c5dbee
commandCenter.background#1c2840
commandCenter.border#283858
commandCenter.debuggingBackground#5878c820
commandCenter.foreground#e0ecf8
commandCenter.inactiveBorder#28385880
commandCenter.inactiveForeground#7080a0
debugConsole.errorForeground#e75f96
debugConsole.infoForeground#b8d0f0
debugConsole.sourceForeground#8898a8
debugConsole.warningForeground#e8b840
debugConsoleInputIcon.foreground#c5dbee
debugIcon.breakpointCurrentStackframeForeground#c5dbee
debugIcon.breakpointDisabledForeground#7080a0
debugIcon.breakpointForeground#e75f96
debugIcon.breakpointStackframeForeground#80d8b8
debugIcon.breakpointUnverifiedForeground#e8b840
debugIcon.continueForeground#80d8b8
debugIcon.disconnectForeground#e75f96
debugIcon.pauseForeground#e8b840
debugIcon.restartForeground#80d8b8
debugIcon.startForeground#80d8b8
debugIcon.stepBackForeground#c5dbee
debugIcon.stepIntoForeground#c5dbee
debugIcon.stepOutForeground#c5dbee
debugIcon.stepOverForeground#c5dbee
debugIcon.stopForeground#e75f96
debugTokenExpression.boolean#c5dbee
debugTokenExpression.error#e75f96
debugTokenExpression.name#e0ecf8
debugTokenExpression.number#b8d0f0
debugTokenExpression.string#c0d8e8
debugTokenExpression.value#c5dbee
debugToolBar.background#1c2840
debugToolBar.border#283858
debugView.exceptionLabelBackground#e75f96
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#5878c8
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#c5dbee60
descriptionForeground#8898a8
diffEditor.diagonalFill#28385840
diffEditor.insertedLineBackground#80d8b815
diffEditor.insertedTextBackground#80d8b820
diffEditor.insertedTextBorder#80d8b800
diffEditor.removedLineBackground#e75f9615
diffEditor.removedTextBackground#e75f9620
diffEditor.removedTextBorder#e75f9600
diffEditorGutter.insertedLineBackground#80d8b830
diffEditorGutter.removedLineBackground#e75f9630
diffEditorOverview.insertedForeground#80d8b8
diffEditorOverview.removedForeground#e75f96
dropdown.background#0a1020
dropdown.border#2a3a5080
dropdown.foreground#e0ecf8
dropdown.listBackground#1c2840
editor.background#141828
editor.findMatchBackground#c5dbee50
editor.findMatchHighlightBackground#c5dbee25
editor.focusedStackFrameHighlightBackground#80d8b830
editor.foldBackground#5878c815
editor.foreground#e0ecf8
editor.lineHighlightBackground#1a2038
editor.lineHighlightBorder#2a3a5040
editor.selectionBackground#c5dbee50
editor.stackFrameHighlightBackground#e8b84030
editor.wordHighlightBackground#5878c830
editor.wordHighlightStrongBackground#c5dbee50
editorBracketHighlight.foreground1#c5dbee
editorBracketHighlight.foreground2#e75f96
editorBracketHighlight.foreground3#b8d0f0
editorBracketHighlight.foreground4#80d8b8
editorBracketHighlight.foreground5#e8b840
editorBracketHighlight.foreground6#b8d0f0
editorBracketHighlight.unexpectedBracket.foreground#e75f96
editorBracketMatch.background#5878c840
editorBracketMatch.border#5878c8
editorCodeLens.foreground#7080a0
editorCursor.foreground#c5dbee
editorError.border#e75f9600
editorError.foreground#e75f96
editorGroup.border#283858
editorGroup.dropBackground#5878c830
editorGroup.dropIntoPromptBackground#1c2840
editorGroup.dropIntoPromptBorder#5878c8
editorGroup.dropIntoPromptForeground#e0ecf8
editorGroup.emptyBackground#1c2840
editorGroup.focusedEmptyBorder#5878c8
editorGroupHeader.tabsBackground#1c2840
editorGutter.addedBackground#80d8b8
editorGutter.deletedBackground#e75f96
editorGutter.modifiedBackground#b8d0f0
editorHint.border#80d8b800
editorHint.foreground#80d8b8
editorHoverWidget.background#1c2840
editorHoverWidget.border#2a3a5080
editorIndentGuide.activeBackground1#5878c8
editorIndentGuide.background1#2a3a5080
editorInfo.border#b8d0f000
editorInfo.foreground#b8d0f0
editorInlayHint.background#28385880
editorInlayHint.foreground#98a8c0
editorInlayHint.parameterForeground#b8d0f0
editorInlayHint.typeForeground#c5dbee
editorLineNumber.activeForeground#c5dbee
editorLineNumber.foreground#7080a0
editorOverviewRuler.addedForeground#80d8b8
editorOverviewRuler.background#1c2840
editorOverviewRuler.border#283858
editorOverviewRuler.bracketMatchForeground#5878c8
editorOverviewRuler.commonContentForeground#8898a8
editorOverviewRuler.currentContentForeground#80d8b8
editorOverviewRuler.deletedForeground#e75f96
editorOverviewRuler.errorForeground#e75f96
editorOverviewRuler.findMatchForeground#c5dbee80
editorOverviewRuler.incomingContentForeground#b8d0f0
editorOverviewRuler.infoForeground#b8d0f0
editorOverviewRuler.modifiedForeground#b8d0f0
editorOverviewRuler.rangeHighlightForeground#5878c840
editorOverviewRuler.selectionHighlightForeground#c5dbee60
editorOverviewRuler.warningForeground#e8b840
editorOverviewRuler.wordHighlightForeground#c5dbee60
editorOverviewRuler.wordHighlightStrongForeground#5878c880
editorStickyScroll.background#1c2840
editorStickyScrollHover.background#283858
editorSuggestWidget.background#1c2840
editorSuggestWidget.foreground#e0ecf8
editorSuggestWidget.highlightForeground#c5dbee
editorSuggestWidget.selectedBackground#5878c8
editorWarning.border#e8b84000
editorWarning.foreground#e8b840
editorWhitespace.foreground#2a3a5060
editorWidget.background#1c2840
editorWidget.border#2a3a5080
editorWidget.foreground#e0ecf8
errorForeground#e75f96
extensionBadge.remoteBackground#5878c8
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#5878c8
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#16255f
extensionIcon.preReleaseForeground#c5dbee
extensionIcon.sponsorForeground#c5dbee
extensionIcon.starForeground#e8b840
extensionIcon.verifiedForeground#80d8b8
focusBorder#5878c8
gitDecoration.addedResourceForeground#80d8b8
gitDecoration.conflictingResourceForeground#e75f96
gitDecoration.deletedResourceForeground#e75f96
gitDecoration.ignoredResourceForeground#7080a0
gitDecoration.modifiedResourceForeground#b8d0f0
gitDecoration.untrackedResourceForeground#e8b840
icon.foreground#e0ecf8
input.background#0a1020
input.border#2a3a5080
input.foreground#e0ecf8
input.placeholderForeground#7080a0
inputOption.activeBackground#5878c8
inputOption.activeForeground#FFFFFF
keybindingLabel.background#283858
keybindingLabel.border#283858
keybindingLabel.bottomBorder#7080a0
keybindingLabel.foreground#e0ecf8
list.activeSelectionBackground#5878c8
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#c5dbee50
list.focusForeground#e0ecf8
list.hoverBackground#283858
list.hoverForeground#e0ecf8
list.inactiveSelectionBackground#28385880
list.inactiveSelectionForeground#e0ecf8
menu.background#0a1020
menu.border#283858
menu.foreground#e0ecf8
menu.selectionBackground#5878c8
menu.selectionBorder#5878c800
menu.selectionForeground#FFFFFF
menu.separatorBackground#2a3a5080
menubar.selectionBackground#283858
menubar.selectionForeground#e0ecf8
merge.border#283858
merge.commonContentBackground#8898a820
merge.commonHeaderBackground#8898a840
merge.currentContentBackground#80d8b820
merge.currentHeaderBackground#80d8b840
merge.incomingContentBackground#b8d0f020
merge.incomingHeaderBackground#b8d0f040
mergeEditor.change.background#b8d0f020
mergeEditor.change.word.background#b8d0f040
mergeEditor.conflict.handledFocused.border#80d8b8
mergeEditor.conflict.handledUnfocused.border#80d8b880
mergeEditor.conflict.unhandledFocused.border#e8b840
mergeEditor.conflict.unhandledUnfocused.border#e8b84080
minimap.background#1c2840
minimap.selectionHighlight#c5dbee60
notifications.background#1c2840
notifications.border#283858
notifications.foreground#e0ecf8
notificationsErrorIcon.foreground#e75f96
notificationsInfoIcon.foreground#b8d0f0
notificationsWarningIcon.foreground#e8b840
panel.background#1c2840
panel.border#283858
panelTitle.activeBorder#5878c8
panelTitle.activeForeground#e0ecf8
panelTitle.inactiveForeground#8898a8
peekView.border#5878c8
peekViewEditor.background#1c2840
peekViewResult.background#1c2840
peekViewResult.matchHighlightBackground#c5dbee50
peekViewTitle.background#283858
peekViewTitleLabel.foreground#e0ecf8
progressBar.background#5878c8
quickInput.background#1c2840
quickInput.foreground#e0ecf8
quickInputList.focusBackground#5878c8
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#283858
scrollbarSlider.activeBackground#5878c8
scrollbarSlider.background#2a3a5080
scrollbarSlider.hoverBackground#48404a
selection.background#c5dbee60
settings.checkboxBackground#0a1020
settings.checkboxBorder#5878c8
settings.checkboxForeground#e0ecf8
settings.dropdownBackground#0a1020
settings.dropdownBorder#283858
settings.dropdownForeground#e0ecf8
settings.dropdownListBorder#283858
settings.focusedRowBackground#28385840
settings.focusedRowBorder#5878c880
settings.headerForeground#e0ecf8
settings.modifiedItemIndicator#5878c8
settings.numberInputBackground#0a1020
settings.numberInputBorder#5878c8
settings.numberInputForeground#e0ecf8
settings.rowHoverBackground#28385820
settings.sashBorder#283858
settings.textInputBackground#0a1020
settings.textInputBorder#5878c8
settings.textInputForeground#e0ecf8
sideBar.background#1c2840
sideBar.border#283858
sideBar.foreground#e0ecf8
sideBarSectionHeader.background#283858
sideBarSectionHeader.foreground#e0ecf8
sideBarTitle.foreground#c5dbee
statusBar.background#5878c8
statusBar.debuggingBackground#16255f
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#141828
statusBar.noFolderForeground#e0ecf8
symbolIcon.arrayForeground#e0ecf8
symbolIcon.booleanForeground#c5dbee
symbolIcon.classForeground#b8d0f0
symbolIcon.colorForeground#c5dbee
symbolIcon.constantForeground#b8d0f0
symbolIcon.constructorForeground#c5dbee
symbolIcon.enumeratorForeground#e8b840
symbolIcon.enumeratorMemberForeground#b8d0f0
symbolIcon.eventForeground#e8b840
symbolIcon.fieldForeground#b8d0f0
symbolIcon.fileForeground#8898a8
symbolIcon.folderForeground#e8b840
symbolIcon.functionForeground#c5dbee
symbolIcon.interfaceForeground#80d8b8
symbolIcon.keyForeground#e0ecf8
symbolIcon.keywordForeground#c5dbee
symbolIcon.methodForeground#c5dbee
symbolIcon.moduleForeground#b8d0f0
symbolIcon.namespaceForeground#b8d0f0
symbolIcon.nullForeground#e75f96
symbolIcon.numberForeground#b8d0f0
symbolIcon.objectForeground#e0ecf8
symbolIcon.operatorForeground#8898a8
symbolIcon.packageForeground#b8d0f0
symbolIcon.propertyForeground#b8d0f0
symbolIcon.referenceForeground#b8d0f0
symbolIcon.snippetForeground#8898a8
symbolIcon.stringForeground#c0d8e8
symbolIcon.structForeground#e0ecf8
symbolIcon.textForeground#e0ecf8
symbolIcon.typeParameterForeground#80d8b8
symbolIcon.unitForeground#b8d0f0
symbolIcon.variableForeground#b8d0f0
tab.activeBackground#141828
tab.activeBorder#5878c8
tab.activeForeground#c5dbee
tab.border#283858
tab.hoverBackground#283858
tab.hoverForeground#e0ecf8
tab.inactiveBackground#1c2840
tab.inactiveForeground#8898a8
terminal.ansiBlack#283858
terminal.ansiBlue#b8d0f0
terminal.ansiBrightBlack#8898a8
terminal.ansiBrightBlue#b8d0f0
terminal.ansiBrightCyan#c5dbee
terminal.ansiBrightGreen#a0e8c8
terminal.ansiBrightMagenta#c5dbee
terminal.ansiBrightRed#f0b8d0
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#e8c860
terminal.ansiCyan#c5dbee
terminal.ansiGreen#80d8b8
terminal.ansiMagenta#c5dbee
terminal.ansiRed#e75f96
terminal.ansiWhite#e0ecf8
terminal.ansiYellow#e8b840
terminal.background#141828
terminal.foreground#e0ecf8
testing.iconErrored#e75f96
testing.iconFailed#e75f96
testing.iconPassed#80d8b8
testing.iconQueued#e8b840
testing.iconSkipped#7080a0
testing.iconUnset#7080a0
testing.peekBorder#e75f96
testing.peekHeaderBackground#e75f9620
testing.runAction#80d8b8
textLink.activeForeground#c5dbee
textLink.foreground#c5dbee
titleBar.activeBackground#1c2840
titleBar.activeForeground#e0ecf8
titleBar.inactiveBackground#141828
titleBar.inactiveForeground#7080a0
walkThrough.embeddedEditorBackground#1c2840
welcomePage.background#141828
welcomePage.progress.background#283858
welcomePage.progress.foreground#5878c8
welcomePage.tileBackground#1c2840
welcomePage.tileBorder#283858
welcomePage.tileHoverBackground#283858

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8898a8	italic
keyword, storage	#c5dbee	bold
keyword.control, keyword.control.flow	#c5dbee	bold
entity.name.function, support.function	#b8d0f0	bold
entity.name.type, support.class, support.type, storage.type	#b0c8e0	bold
string	#c0d8e8	—
constant.character.escape	#e75f96	—
variable, support.variable	#e0ecf8	—
variable.parameter	#b0c8d8	italic
constant.numeric, constant.character, constant	#b8d0f0	—
constant.language, support.constant, variable.language	#c5dbee	—
keyword.operator	#90a8c8	—
punctuation	#90a0b8	—
entity.name.tag	#c5dbee	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#c5dbee	italic
meta.selector, entity.name.tag.css	#e0ecf8	—
meta.property-name, support.type.property-name	#c5dbee	—
meta.property-value, support.constant.property-value	#c0d8e8	—
keyword.other.unit	#b8d0f0	—
markup.heading	#c5dbee	bold
markup.bold	#e0ecf8	bold
markup.italic	#e0ecf8	italic
meta.link	#c5dbee	—
markup.list	#c5dbee	—
markup.inline.raw	#c0d8e8	—
markup.inserted	#80d8b8	—
markup.deleted	#e75f96	—
markup.changed	#b8d0f0	—
support.type.property-name.json	#c5dbee	—
entity.name.tag.yaml	#c5dbee	—
string.regexp	#e75f96	—
meta.decorator, meta.annotation	#e8b840	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}!`;
}