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 (High Contrast)

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

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#58a0d8
activityBar.background#000000
activityBar.foreground#e0e8f0
activityBar.inactiveForeground#6080a0
activityBarBadge.background#e06878
activityBarBadge.foreground#FFFFFF
badge.background#e06878
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#88d0f8
breadcrumb.background#0a1018
breadcrumb.focusForeground#e0e8f0
breadcrumb.foreground#7090a8
button.background#3070b0
button.border#58a0d8
button.foreground#FFFFFF
button.hoverBackground#4080c0
button.secondaryBackground#e06878
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#e88898
charts.blue#78b8e8
charts.foreground#e0e8f0
charts.green#90dab0
charts.lines#e0e8f0
charts.orange#d8a878
charts.purple#c0a0c8
charts.red#e06878
charts.yellow#e8c888
checkbox.background#000000
checkbox.border#58a0d8
checkbox.foreground#e0e8f0
checkbox.selectBackground#3070b0
checkbox.selectBorder#58a0d8
commandCenter.activeBackground#102030
commandCenter.activeBorder#88d0f8
commandCenter.activeForeground#88d0f8
commandCenter.background#0a1018
commandCenter.border#58a0d8
commandCenter.debuggingBackground#3070b030
commandCenter.foreground#e0e8f0
commandCenter.inactiveBorder#58a0d8
commandCenter.inactiveForeground#6080a0
contrastActiveBorder#58a0d8
contrastBorder#58a0d8
debugConsole.errorForeground#f0889a
debugConsole.infoForeground#88d0f8
debugConsole.sourceForeground#7090a8
debugConsole.warningForeground#e8c888
debugConsoleInputIcon.foreground#88d0f8
debugIcon.breakpointCurrentStackframeForeground#88d0f8
debugIcon.breakpointDisabledForeground#6080a0
debugIcon.breakpointForeground#f0889a
debugIcon.breakpointStackframeForeground#90dab0
debugIcon.breakpointUnverifiedForeground#e8c888
debugIcon.continueForeground#90dab0
debugIcon.disconnectForeground#f0889a
debugIcon.pauseForeground#e8c888
debugIcon.restartForeground#90dab0
debugIcon.startForeground#90dab0
debugIcon.stepBackForeground#88d0f8
debugIcon.stepIntoForeground#88d0f8
debugIcon.stepOutForeground#88d0f8
debugIcon.stepOverForeground#88d0f8
debugIcon.stopForeground#f0889a
debugTokenExpression.boolean#78b8e8
debugTokenExpression.error#f0889a
debugTokenExpression.name#e0e8f0
debugTokenExpression.number#c0a0c8
debugTokenExpression.string#d8b0a0
debugTokenExpression.value#88d0f8
debugToolBar.background#0a1018
debugToolBar.border#58a0d8
debugView.exceptionLabelBackground#e06878
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#88d0f8
debugView.stateLabelForeground#000000
debugView.valueChangedHighlight#88d0f860
descriptionForeground#7090a8
diffEditor.diagonalFill#30405040
diffEditor.insertedLineBackground#90dab020
diffEditor.insertedTextBackground#90dab030
diffEditor.insertedTextBorder#70c890
diffEditor.removedLineBackground#e0687820
diffEditor.removedTextBackground#e0687830
diffEditor.removedTextBorder#e06878
diffEditorGutter.insertedLineBackground#90dab040
diffEditorGutter.removedLineBackground#e0687840
diffEditorOverview.insertedForeground#90dab0
diffEditorOverview.removedForeground#e06878
dropdown.background#000000
dropdown.border#58a0d8
dropdown.foreground#e0e8f0
dropdown.listBackground#0a1018
editor.background#000000
editor.findMatchBackground#58a0d850
editor.findMatchBorder#58a0d8
editor.findMatchHighlightBackground#58a0d830
editor.focusedStackFrameHighlightBackground#90dab030
editor.foldBackground#3070b015
editor.foreground#e0e8f0
editor.lineHighlightBackground#101820
editor.lineHighlightBorder#3070b050
editor.selectionBackground#3070b060
editor.stackFrameHighlightBackground#e8c88830
editor.wordHighlightBackground#3070b030
editor.wordHighlightBorder#58a0d8
editor.wordHighlightStrongBackground#3070b050
editorBracketHighlight.foreground1#88d0f8
editorBracketHighlight.foreground2#f0889a
editorBracketHighlight.foreground3#88c8d8
editorBracketHighlight.foreground4#90dab0
editorBracketHighlight.foreground5#e8c888
editorBracketHighlight.foreground6#c0a0c8
editorBracketHighlight.unexpectedBracket.foreground#f0889a
editorBracketMatch.background#3070b040
editorBracketMatch.border#58a0d8
editorCodeLens.foreground#6080a0
editorCursor.foreground#88d0f8
editorError.border#e06878
editorError.foreground#f0889a
editorGroup.border#58a0d8
editorGroup.dropBackground#3070b030
editorGroup.dropIntoPromptBackground#0a1018
editorGroup.dropIntoPromptBorder#58a0d8
editorGroup.dropIntoPromptForeground#e0e8f0
editorGroup.emptyBackground#0a1018
editorGroup.focusedEmptyBorder#58a0d8
editorGroupHeader.tabsBackground#000000
editorGutter.addedBackground#70c890
editorGutter.deletedBackground#e06878
editorGutter.modifiedBackground#58a0d8
editorHint.border#70c890
editorHint.foreground#90dab0
editorHoverWidget.background#0a1018
editorHoverWidget.border#58a0d8
editorIndentGuide.activeBackground1#58a0d8
editorIndentGuide.background1#304050
editorInfo.border#58a0d8
editorInfo.foreground#88d0f8
editorInlayHint.background#10203080
editorInlayHint.foreground#7090a8
editorInlayHint.parameterForeground#78b8e8
editorInlayHint.typeForeground#88d0f8
editorLineNumber.activeForeground#88d0f8
editorLineNumber.foreground#6080a0
editorOverviewRuler.addedForeground#90dab0
editorOverviewRuler.background#0a1018
editorOverviewRuler.border#58a0d8
editorOverviewRuler.bracketMatchForeground#58a0d8
editorOverviewRuler.commonContentForeground#7090a8
editorOverviewRuler.currentContentForeground#90dab0
editorOverviewRuler.deletedForeground#e06878
editorOverviewRuler.errorForeground#f0889a
editorOverviewRuler.findMatchForeground#88d0f8
editorOverviewRuler.incomingContentForeground#78b8e8
editorOverviewRuler.infoForeground#88d0f8
editorOverviewRuler.modifiedForeground#78b8e8
editorOverviewRuler.rangeHighlightForeground#3070b060
editorOverviewRuler.selectionHighlightForeground#3070b080
editorOverviewRuler.warningForeground#e8c888
editorOverviewRuler.wordHighlightForeground#3070b080
editorOverviewRuler.wordHighlightStrongForeground#3070b0a0
editorStickyScroll.background#0a1018
editorStickyScrollHover.background#102030
editorSuggestWidget.background#0a1018
editorSuggestWidget.border#58a0d8
editorSuggestWidget.foreground#e0e8f0
editorSuggestWidget.highlightForeground#88d0f8
editorSuggestWidget.selectedBackground#3070b0
editorWarning.border#c8a858
editorWarning.foreground#e8c888
editorWhitespace.foreground#304050
editorWidget.background#0a1018
editorWidget.border#58a0d8
editorWidget.foreground#e0e8f0
errorForeground#f0889a
extensionBadge.remoteBackground#58a0d8
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#3070b0
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#4080c0
extensionIcon.preReleaseForeground#f0889a
extensionIcon.sponsorForeground#88d0f8
extensionIcon.starForeground#e8c888
extensionIcon.verifiedForeground#90dab0
focusBorder#58a0d8
gitDecoration.addedResourceForeground#90dab0
gitDecoration.conflictingResourceForeground#f0889a
gitDecoration.deletedResourceForeground#f0889a
gitDecoration.ignoredResourceForeground#6080a0
gitDecoration.modifiedResourceForeground#78b8e8
gitDecoration.untrackedResourceForeground#e8c888
icon.foreground#e0e8f0
input.background#000000
input.border#58a0d8
input.foreground#e0e8f0
input.placeholderForeground#6080a0
inputOption.activeBackground#3070b0
inputOption.activeBorder#58a0d8
inputOption.activeForeground#FFFFFF
keybindingLabel.background#102030
keybindingLabel.border#58a0d8
keybindingLabel.bottomBorder#58a0d8
keybindingLabel.foreground#e0e8f0
list.activeSelectionBackground#3070b0
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#3070b0
list.focusForeground#FFFFFF
list.focusOutline#58a0d8
list.hoverBackground#102030
list.hoverForeground#e0e8f0
list.inactiveSelectionBackground#3070b050
list.inactiveSelectionForeground#e0e8f0
menu.background#0a1018
menu.border#58a0d8
menu.foreground#e0e8f0
menu.selectionBackground#3070b0
menu.selectionBorder#58a0d800
menu.selectionForeground#FFFFFF
menu.separatorBackground#58a0d8
menubar.selectionBackground#102030
menubar.selectionForeground#e0e8f0
merge.border#58a0d8
merge.commonContentBackground#60708030
merge.commonHeaderBackground#60708050
merge.currentContentBackground#90dab030
merge.currentHeaderBackground#90dab050
merge.incomingContentBackground#78b8e830
merge.incomingHeaderBackground#78b8e850
mergeEditor.change.background#78b8e830
mergeEditor.change.word.background#78b8e850
mergeEditor.conflict.handledFocused.border#90dab0
mergeEditor.conflict.handledUnfocused.border#90dab080
mergeEditor.conflict.unhandledFocused.border#e8c888
mergeEditor.conflict.unhandledUnfocused.border#e8c88880
minimap.background#0a1018
minimap.selectionHighlight#3070b060
notifications.background#0a1018
notifications.border#58a0d8
notifications.foreground#e0e8f0
notificationsErrorIcon.foreground#f0889a
notificationsInfoIcon.foreground#88d0f8
notificationsWarningIcon.foreground#e8c888
panel.background#0a1018
panel.border#58a0d8
panelTitle.activeBorder#58a0d8
panelTitle.activeForeground#e0e8f0
panelTitle.inactiveForeground#6080a0
peekView.border#58a0d8
peekViewEditor.background#0a1018
peekViewResult.background#0a1018
peekViewResult.matchHighlightBackground#58a0d850
peekViewTitle.background#102030
peekViewTitleLabel.foreground#e0e8f0
progressBar.background#58a0d8
quickInput.background#0a1018
quickInput.foreground#e0e8f0
quickInputList.focusBackground#3070b0
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#102030
scrollbarSlider.activeBackground#58a0d8
scrollbarSlider.background#3070b060
scrollbarSlider.hoverBackground#3070b0
selection.background#3070b0
settings.checkboxBackground#000000
settings.checkboxBorder#58a0d8
settings.checkboxForeground#e0e8f0
settings.dropdownBackground#000000
settings.dropdownBorder#58a0d8
settings.dropdownForeground#e0e8f0
settings.dropdownListBorder#58a0d8
settings.focusedRowBackground#10203050
settings.focusedRowBorder#58a0d8
settings.headerForeground#e0e8f0
settings.modifiedItemIndicator#58a0d8
settings.numberInputBackground#000000
settings.numberInputBorder#58a0d8
settings.numberInputForeground#e0e8f0
settings.rowHoverBackground#10203030
settings.sashBorder#58a0d8
settings.textInputBackground#000000
settings.textInputBorder#58a0d8
settings.textInputForeground#e0e8f0
sideBar.background#0a1018
sideBar.border#58a0d8
sideBar.foreground#e0e8f0
sideBarSectionHeader.background#102030
sideBarSectionHeader.foreground#e0e8f0
sideBarTitle.foreground#88d0f8
statusBar.background#102030
statusBar.border#58a0d8
statusBar.debuggingBackground#3050a0
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#e0e8f0
statusBar.noFolderBackground#000000
statusBar.noFolderForeground#e0e8f0
symbolIcon.arrayForeground#e0e8f0
symbolIcon.booleanForeground#78b8e8
symbolIcon.classForeground#88d0f8
symbolIcon.colorForeground#c0a0c8
symbolIcon.constantForeground#f0889a
symbolIcon.constructorForeground#88d0f8
symbolIcon.enumeratorForeground#e8c888
symbolIcon.enumeratorMemberForeground#f0889a
symbolIcon.eventForeground#e8c888
symbolIcon.fieldForeground#88c8d8
symbolIcon.fileForeground#7090a8
symbolIcon.folderForeground#e8c888
symbolIcon.functionForeground#88d0f8
symbolIcon.interfaceForeground#90dab0
symbolIcon.keyForeground#e0e8f0
symbolIcon.keywordForeground#88d0f8
symbolIcon.methodForeground#88d0f8
symbolIcon.moduleForeground#88d0f8
symbolIcon.namespaceForeground#88d0f8
symbolIcon.nullForeground#e06878
symbolIcon.numberForeground#c0a0c8
symbolIcon.objectForeground#e0e8f0
symbolIcon.operatorForeground#7090a8
symbolIcon.packageForeground#88d0f8
symbolIcon.propertyForeground#88c8d8
symbolIcon.referenceForeground#f0889a
symbolIcon.snippetForeground#7090a8
symbolIcon.stringForeground#d8b0a0
symbolIcon.structForeground#e0e8f0
symbolIcon.textForeground#e0e8f0
symbolIcon.typeParameterForeground#90dab0
symbolIcon.unitForeground#c0a0c8
symbolIcon.variableForeground#88c8d8
tab.activeBackground#000000
tab.activeBorder#58a0d8
tab.activeForeground#88d0f8
tab.border#304050
tab.hoverBackground#102030
tab.hoverForeground#e0e8f0
tab.inactiveBackground#000000
tab.inactiveForeground#7090a8
terminal.ansiBlack#304050
terminal.ansiBlue#78b8e8
terminal.ansiBrightBlack#7090a8
terminal.ansiBrightBlue#a0d8f8
terminal.ansiBrightCyan#a8e0f0
terminal.ansiBrightGreen#a8f0c8
terminal.ansiBrightMagenta#d8c0e0
terminal.ansiBrightRed#f8a8b8
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#f8e0a0
terminal.ansiCyan#88c8d8
terminal.ansiGreen#90dab0
terminal.ansiMagenta#c0a0c8
terminal.ansiRed#f0889a
terminal.ansiWhite#e0e8f0
terminal.ansiYellow#e8c888
terminal.background#000000
terminal.border#58a0d8
terminal.foreground#e0e8f0
testing.iconErrored#e06878
testing.iconFailed#e06878
testing.iconPassed#90dab0
testing.iconQueued#e8c888
testing.iconSkipped#6080a0
testing.iconUnset#6080a0
testing.peekBorder#e06878
testing.peekHeaderBackground#e0687830
testing.runAction#90dab0
textLink.activeForeground#a8e0ff
textLink.foreground#88d0f8
titleBar.activeBackground#000000
titleBar.activeForeground#e0e8f0
titleBar.border#58a0d8
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#6080a0
walkThrough.embeddedEditorBackground#0a1018
welcomePage.background#000000
welcomePage.progress.background#102030
welcomePage.progress.foreground#58a0d8
welcomePage.tileBackground#0a1018
welcomePage.tileBorder#58a0d8
welcomePage.tileHoverBackground#102030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6080a0	italic
keyword, storage	#88d0f8	bold
keyword.control, keyword.control.flow	#78c0f0	bold
entity.name.function, support.function	#88d0f8	bold
entity.name.type, support.class, support.type, storage.type	#88c8d8	bold
string	#d8b0a0	—
constant.character.escape	#f0889a	—
variable, support.variable	#e0e8f0	—
variable.parameter	#a0b8d0	italic
constant.numeric, constant.character, constant	#c0a0c8	—
constant.language, support.constant, variable.language	#78c0f0	—
keyword.operator	#a0b0c0	—
punctuation	#90a0b8	—
entity.name.tag	#88d0f8	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#88c8d8	italic
meta.selector, entity.name.tag.css	#e0e8f0	—
meta.property-name, support.type.property-name	#88d0f8	—
meta.property-value, support.constant.property-value	#d8b0a0	—
keyword.other.unit	#c0a0c8	—
markup.heading	#88d0f8	bold
markup.bold	#e0e8f0	bold
markup.italic	#e0e8f0	italic
meta.link	#78b8e8	—
markup.list	#88d0f8	—
markup.inline.raw	#d8b0a0	—
markup.inserted	#90dab0	—
markup.deleted	#e06878	—
markup.changed	#78b8e8	—
support.type.property-name.json	#88d0f8	—
entity.name.tag.yaml	#88c8d8	—
string.regexp	#f0889a	—
meta.decorator, meta.annotation	#e8c888	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}!`;
}