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

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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