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 - Chiori (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#180a18
activityBar.foreground#f0e0d0
activityBar.inactiveForeground#a88080
activityBarBadge.background#e7a43a
activityBarBadge.foreground#FFFFFF
badge.background#e7a43a
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#e7a43a
breadcrumb.background#281c28
breadcrumb.focusForeground#f0e0d0
breadcrumb.foreground#a89088
button.background#c64413
button.foreground#FFFFFF
button.hoverBackground#a88898
button.secondaryBackground#16255f
button.secondaryForeground#f0e0d0
button.secondaryHoverBackground#5a3f3f
charts.blue#d8c8b8
charts.foreground#f0e0d0
charts.green#a8d8b8
charts.lines#38282880
charts.orange#e7a43a
charts.purple#d8c8b8
charts.red#f0a898
charts.yellow#e7a43a
checkbox.background#180a18
checkbox.border#38282880
checkbox.foreground#f0e0d0
checkbox.selectBackground#c64413
checkbox.selectBorder#c64413
commandCenter.activeBackground#382838
commandCenter.activeBorder#c64413
commandCenter.activeForeground#e7a43a
commandCenter.background#281c28
commandCenter.border#382838
commandCenter.debuggingBackground#c6441320
commandCenter.foreground#f0e0d0
commandCenter.inactiveBorder#38283880
commandCenter.inactiveForeground#a88080
debugConsole.errorForeground#f0a898
debugConsole.infoForeground#d8c8b8
debugConsole.sourceForeground#a89088
debugConsole.warningForeground#e7a43a
debugConsoleInputIcon.foreground#e7a43a
debugIcon.breakpointCurrentStackframeForeground#e7a43a
debugIcon.breakpointDisabledForeground#a88080
debugIcon.breakpointForeground#f0a898
debugIcon.breakpointStackframeForeground#a8d8b8
debugIcon.breakpointUnverifiedForeground#e7a43a
debugIcon.continueForeground#a8d8b8
debugIcon.disconnectForeground#f0a898
debugIcon.pauseForeground#e7a43a
debugIcon.restartForeground#a8d8b8
debugIcon.startForeground#a8d8b8
debugIcon.stepBackForeground#e7a43a
debugIcon.stepIntoForeground#e7a43a
debugIcon.stepOutForeground#e7a43a
debugIcon.stepOverForeground#e7a43a
debugIcon.stopForeground#f0a898
debugTokenExpression.boolean#e7a43a
debugTokenExpression.error#f0a898
debugTokenExpression.name#f0e0d0
debugTokenExpression.number#d8c8b8
debugTokenExpression.string#f8f0e8
debugTokenExpression.value#e7a43a
debugToolBar.background#281c28
debugToolBar.border#382838
debugView.exceptionLabelBackground#f0b8a8
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#c64413
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#e7a43a60
descriptionForeground#a89088
diffEditor.diagonalFill#38283840
diffEditor.insertedLineBackground#a8d8b815
diffEditor.insertedTextBackground#a8d8b820
diffEditor.insertedTextBorder#a8d8b800
diffEditor.removedLineBackground#f0b8a815
diffEditor.removedTextBackground#f0b8a820
diffEditor.removedTextBorder#f0b8a800
diffEditorGutter.insertedLineBackground#a8d8b830
diffEditorGutter.removedLineBackground#f0b8a830
diffEditorOverview.insertedForeground#a8d8b8
diffEditorOverview.removedForeground#f0b8a8
dropdown.background#180a18
dropdown.border#38282880
dropdown.foreground#f0e0d0
dropdown.listBackground#281c28
editor.background#281818
editor.findMatchBackground#e7a43a50
editor.findMatchHighlightBackground#e7a43a25
editor.focusedStackFrameHighlightBackground#a8d8b830
editor.foldBackground#c6441315
editor.foreground#f0e0d0
editor.lineHighlightBackground#201818
editor.lineHighlightBorder#38282840
editor.selectionBackground#e7a43a50
editor.stackFrameHighlightBackground#e7a43a30
editor.wordHighlightBackground#c6441330
editor.wordHighlightStrongBackground#e7a43a50
editorBracketHighlight.foreground1#e7a43a
editorBracketHighlight.foreground2#f0a898
editorBracketHighlight.foreground3#d8c8b8
editorBracketHighlight.foreground4#a8d8b8
editorBracketHighlight.foreground5#e7a43a
editorBracketHighlight.foreground6#d8c8b8
editorBracketHighlight.unexpectedBracket.foreground#f0a898
editorBracketMatch.background#c6441340
editorBracketMatch.border#c64413
editorCodeLens.foreground#a88080
editorCursor.foreground#e7a43a
editorError.border#f0a89800
editorError.foreground#f0a898
editorGroup.border#382838
editorGroup.dropBackground#c6441330
editorGroup.dropIntoPromptBackground#281c28
editorGroup.dropIntoPromptBorder#c64413
editorGroup.dropIntoPromptForeground#f0e0d0
editorGroup.emptyBackground#281c28
editorGroup.focusedEmptyBorder#c64413
editorGroupHeader.tabsBackground#281c28
editorGutter.addedBackground#a8d8b8
editorGutter.deletedBackground#f0b8a8
editorGutter.modifiedBackground#d8c8b8
editorHint.border#a8d8b800
editorHint.foreground#a8d8b8
editorHoverWidget.background#281c28
editorHoverWidget.border#38282880
editorIndentGuide.activeBackground1#c64413
editorIndentGuide.background1#38282880
editorInfo.border#d8c8b800
editorInfo.foreground#d8c8b8
editorInlayHint.background#38283880
editorInlayHint.foreground#c8b8a8
editorInlayHint.parameterForeground#d8c8b8
editorInlayHint.typeForeground#e7a43a
editorLineNumber.activeForeground#e7a43a
editorLineNumber.foreground#a88080
editorOverviewRuler.addedForeground#a8d8b8
editorOverviewRuler.background#281c28
editorOverviewRuler.border#382838
editorOverviewRuler.bracketMatchForeground#c64413
editorOverviewRuler.commonContentForeground#a89088
editorOverviewRuler.currentContentForeground#a8d8b8
editorOverviewRuler.deletedForeground#f0b8a8
editorOverviewRuler.errorForeground#f0a898
editorOverviewRuler.findMatchForeground#e7a43a80
editorOverviewRuler.incomingContentForeground#d8c8b8
editorOverviewRuler.infoForeground#d8c8b8
editorOverviewRuler.modifiedForeground#d8c8b8
editorOverviewRuler.rangeHighlightForeground#c6441340
editorOverviewRuler.selectionHighlightForeground#e7a43a60
editorOverviewRuler.warningForeground#e7a43a
editorOverviewRuler.wordHighlightForeground#e7a43a60
editorOverviewRuler.wordHighlightStrongForeground#c6441380
editorStickyScroll.background#281c28
editorStickyScrollHover.background#382838
editorSuggestWidget.background#281c28
editorSuggestWidget.foreground#f0e0d0
editorSuggestWidget.highlightForeground#e7a43a
editorSuggestWidget.selectedBackground#c64413
editorWarning.border#e7a43a00
editorWarning.foreground#e7a43a
editorWhitespace.foreground#38282860
editorWidget.background#281c28
editorWidget.border#38282880
editorWidget.foreground#f0e0d0
errorForeground#f0a898
extensionBadge.remoteBackground#c64413
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#c64413
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#16255f
extensionIcon.preReleaseForeground#e7a43a
extensionIcon.sponsorForeground#e7a43a
extensionIcon.starForeground#e7a43a
extensionIcon.verifiedForeground#a8d8b8
focusBorder#c64413
gitDecoration.addedResourceForeground#a8d8b8
gitDecoration.conflictingResourceForeground#f0a898
gitDecoration.deletedResourceForeground#f0a898
gitDecoration.ignoredResourceForeground#a88080
gitDecoration.modifiedResourceForeground#d8c8b8
gitDecoration.untrackedResourceForeground#e7a43a
icon.foreground#f0e0d0
input.background#180a18
input.border#38282880
input.foreground#f0e0d0
input.placeholderForeground#a88080
inputOption.activeBackground#c64413
inputOption.activeForeground#FFFFFF
keybindingLabel.background#382838
keybindingLabel.border#382838
keybindingLabel.bottomBorder#a88080
keybindingLabel.foreground#f0e0d0
list.activeSelectionBackground#c64413
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#e7a43a50
list.focusForeground#f0e0d0
list.hoverBackground#382838
list.hoverForeground#f0e0d0
list.inactiveSelectionBackground#38283880
list.inactiveSelectionForeground#f0e0d0
menu.background#180a18
menu.border#382838
menu.foreground#f0e0d0
menu.selectionBackground#c64413
menu.selectionBorder#c6441300
menu.selectionForeground#FFFFFF
menu.separatorBackground#38282880
menubar.selectionBackground#382838
menubar.selectionForeground#f0e0d0
merge.border#382838
merge.commonContentBackground#a8908820
merge.commonHeaderBackground#a8908840
merge.currentContentBackground#a8d8b820
merge.currentHeaderBackground#a8d8b840
merge.incomingContentBackground#d8c8b820
merge.incomingHeaderBackground#d8c8b840
mergeEditor.change.background#d8c8b820
mergeEditor.change.word.background#d8c8b840
mergeEditor.conflict.handledFocused.border#a8d8b8
mergeEditor.conflict.handledUnfocused.border#a8d8b880
mergeEditor.conflict.unhandledFocused.border#e7a43a
mergeEditor.conflict.unhandledUnfocused.border#e7a43a80
minimap.background#281c28
minimap.selectionHighlight#e7a43a60
notifications.background#281c28
notifications.border#382838
notifications.foreground#f0e0d0
notificationsErrorIcon.foreground#f0a898
notificationsInfoIcon.foreground#d8c8b8
notificationsWarningIcon.foreground#e7a43a
panel.background#281c28
panel.border#382838
panelTitle.activeBorder#c64413
panelTitle.activeForeground#f0e0d0
panelTitle.inactiveForeground#a89088
peekView.border#c64413
peekViewEditor.background#281c28
peekViewResult.background#281c28
peekViewResult.matchHighlightBackground#e7a43a50
peekViewTitle.background#382838
peekViewTitleLabel.foreground#f0e0d0
progressBar.background#c64413
quickInput.background#281c28
quickInput.foreground#f0e0d0
quickInputList.focusBackground#c64413
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#382838
scrollbarSlider.activeBackground#c64413
scrollbarSlider.background#38282880
scrollbarSlider.hoverBackground#48404a
selection.background#e7a43a60
settings.checkboxBackground#180a18
settings.checkboxBorder#c64413
settings.checkboxForeground#f0e0d0
settings.dropdownBackground#180a18
settings.dropdownBorder#382838
settings.dropdownForeground#f0e0d0
settings.dropdownListBorder#382838
settings.focusedRowBackground#38283840
settings.focusedRowBorder#c6441380
settings.headerForeground#f0e0d0
settings.modifiedItemIndicator#c64413
settings.numberInputBackground#180a18
settings.numberInputBorder#c64413
settings.numberInputForeground#f0e0d0
settings.rowHoverBackground#38283820
settings.sashBorder#382838
settings.textInputBackground#180a18
settings.textInputBorder#c64413
settings.textInputForeground#f0e0d0
sideBar.background#281c28
sideBar.border#382838
sideBar.foreground#f0e0d0
sideBarSectionHeader.background#382838
sideBarSectionHeader.foreground#f0e0d0
sideBarTitle.foreground#e7a43a
statusBar.background#c64413
statusBar.debuggingBackground#16255f
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#281818
statusBar.noFolderForeground#f0e0d0
symbolIcon.arrayForeground#f0e0d0
symbolIcon.booleanForeground#e7a43a
symbolIcon.classForeground#d8c8b8
symbolIcon.colorForeground#e7a43a
symbolIcon.constantForeground#d8c8b8
symbolIcon.constructorForeground#e7a43a
symbolIcon.enumeratorForeground#e7a43a
symbolIcon.enumeratorMemberForeground#d8c8b8
symbolIcon.eventForeground#e7a43a
symbolIcon.fieldForeground#d8c8b8
symbolIcon.fileForeground#a89088
symbolIcon.folderForeground#e7a43a
symbolIcon.functionForeground#e7a43a
symbolIcon.interfaceForeground#a8d8b8
symbolIcon.keyForeground#f0e0d0
symbolIcon.keywordForeground#e7a43a
symbolIcon.methodForeground#e7a43a
symbolIcon.moduleForeground#d8c8b8
symbolIcon.namespaceForeground#d8c8b8
symbolIcon.nullForeground#f0a898
symbolIcon.numberForeground#d8c8b8
symbolIcon.objectForeground#f0e0d0
symbolIcon.operatorForeground#a89088
symbolIcon.packageForeground#d8c8b8
symbolIcon.propertyForeground#d8c8b8
symbolIcon.referenceForeground#d8c8b8
symbolIcon.snippetForeground#a89088
symbolIcon.stringForeground#f8f0e8
symbolIcon.structForeground#f0e0d0
symbolIcon.textForeground#f0e0d0
symbolIcon.typeParameterForeground#a8d8b8
symbolIcon.unitForeground#d8c8b8
symbolIcon.variableForeground#d8c8b8
tab.activeBackground#281818
tab.activeBorder#c64413
tab.activeForeground#e7a43a
tab.border#382838
tab.hoverBackground#382838
tab.hoverForeground#f0e0d0
tab.inactiveBackground#281c28
tab.inactiveForeground#a89088
terminal.ansiBlack#382838
terminal.ansiBlue#d8c8b8
terminal.ansiBrightBlack#a89088
terminal.ansiBrightBlue#d8d0e8
terminal.ansiBrightCyan#e7a43a
terminal.ansiBrightGreen#d8f8d8
terminal.ansiBrightMagenta#e7a43a
terminal.ansiBrightRed#f8e8d8
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#f8f8d8
terminal.ansiCyan#e7a43a
terminal.ansiGreen#a8d8b8
terminal.ansiMagenta#e7a43a
terminal.ansiRed#f0a898
terminal.ansiWhite#f0e0d0
terminal.ansiYellow#e7a43a
terminal.background#281818
terminal.foreground#f0e0d0
testing.iconErrored#f0b8a8
testing.iconFailed#f0b8a8
testing.iconPassed#a8d8b8
testing.iconQueued#e7a43a
testing.iconSkipped#a88080
testing.iconUnset#a88080
testing.peekBorder#f0b8a8
testing.peekHeaderBackground#f0b8a820
testing.runAction#a8d8b8
textLink.activeForeground#e7a43a
textLink.foreground#e7a43a
titleBar.activeBackground#281c28
titleBar.activeForeground#f0e0d0
titleBar.inactiveBackground#281818
titleBar.inactiveForeground#a88080
walkThrough.embeddedEditorBackground#281c28
welcomePage.background#281818
welcomePage.progress.background#382838
welcomePage.progress.foreground#c64413
welcomePage.tileBackground#281c28
welcomePage.tileBorder#382838
welcomePage.tileHoverBackground#382838

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#a89088	italic
keyword, storage	#e7a43a	bold
keyword.control, keyword.control.flow	#e8c8b8	bold
entity.name.function, support.function	#d8c8b8	bold
entity.name.type, support.class, support.type, storage.type	#f8e8d8	bold
string	#f8f0e8	—
constant.character.escape	#f0a898	—
variable, support.variable	#f0e0d0	—
variable.parameter	#f0e8d8	italic
constant.numeric, constant.character, constant	#d8c8b8	—
constant.language, support.constant, variable.language	#e7a43a	—
keyword.operator	#a898c8	—
punctuation	#a898b8	—
entity.name.tag	#e7a43a	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#e7a43a	italic
meta.selector, entity.name.tag.css	#f0e0d0	—
meta.property-name, support.type.property-name	#e7a43a	—
meta.property-value, support.constant.property-value	#f8f0e8	—
keyword.other.unit	#d8c8b8	—
markup.heading	#e7a43a	bold
markup.bold	#f0e0d0	bold
markup.italic	#f0e0d0	italic
meta.link	#e7a43a	—
markup.list	#e7a43a	—
markup.inline.raw	#f8f0e8	—
markup.inserted	#a8d8b8	—
markup.deleted	#f0a898	—
markup.changed	#d8c8b8	—
support.type.property-name.json	#e7a43a	—
entity.name.tag.yaml	#e7a43a	—
string.regexp	#f0a898	—
meta.decorator, meta.annotation	#e7a43a	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}!`;
}