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

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#633b3b
activityBar.foreground#faf0e8
activityBar.inactiveForeground#a88878
activityBarBadge.background#e7a43a
activityBarBadge.foreground#FFFFFF
badge.background#e7a43a
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#c64413
breadcrumb.background#fdf6f0
breadcrumb.focusForeground#4a3030
breadcrumb.foreground#8a7060
button.background#c64413
button.foreground#FFFFFF
button.hoverBackground#8a5050
button.secondaryBackground#633b3b
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#0f1a3f
charts.blue#a88888
charts.foreground#4a3030
charts.green#98b888
charts.lines#f0e0d0
charts.orange#e7a43a
charts.purple#d8b898
charts.red#ee6373
charts.yellow#e7a43a
checkbox.background#FFFFFF
checkbox.border#e8d8c8
checkbox.foreground#4a3030
checkbox.selectBackground#c64413
checkbox.selectBorder#c64413
commandCenter.activeBackground#f0e0d0
commandCenter.activeBorder#c64413
commandCenter.activeForeground#c64413
commandCenter.background#fdf6f0
commandCenter.border#f0e0d0
commandCenter.debuggingBackground#c6441320
commandCenter.foreground#4a3030
commandCenter.inactiveBorder#f0e0d080
commandCenter.inactiveForeground#8a7060
debugConsole.errorForeground#ee6373
debugConsole.infoForeground#a88888
debugConsole.sourceForeground#8a7060
debugConsole.warningForeground#e7a43a
debugConsoleInputIcon.foreground#c64413
debugIcon.breakpointCurrentStackframeForeground#c64413
debugIcon.breakpointDisabledForeground#e8d8c8
debugIcon.breakpointForeground#ee6373
debugIcon.breakpointStackframeForeground#98b888
debugIcon.breakpointUnverifiedForeground#e7a43a
debugIcon.continueForeground#98b888
debugIcon.disconnectForeground#ee6373
debugIcon.pauseForeground#e7a43a
debugIcon.restartForeground#98b888
debugIcon.startForeground#98b888
debugIcon.stepBackForeground#c64413
debugIcon.stepIntoForeground#c64413
debugIcon.stepOutForeground#c64413
debugIcon.stepOverForeground#c64413
debugIcon.stopForeground#ee6373
debugTokenExpression.boolean#c64413
debugTokenExpression.error#ee6373
debugTokenExpression.name#4a3030
debugTokenExpression.number#d8b898
debugTokenExpression.string#3a2020
debugTokenExpression.value#c64413
debugToolBar.background#fdf6f0
debugToolBar.border#f0e0d0
debugView.exceptionLabelBackground#ee6373
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#c64413
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#c6441360
descriptionForeground#8a7060
diffEditor.diagonalFill#f0e0d040
diffEditor.insertedLineBackground#98b88815
diffEditor.insertedTextBackground#98b88820
diffEditor.insertedTextBorder#98b88800
diffEditor.removedLineBackground#ee637315
diffEditor.removedTextBackground#ee637320
diffEditor.removedTextBorder#ee637300
diffEditorGutter.insertedLineBackground#98b88830
diffEditorGutter.removedLineBackground#ee637330
diffEditorOverview.insertedForeground#98b888
diffEditorOverview.removedForeground#ee6373
dropdown.background#FFFFFF
dropdown.border#e8d8c8
dropdown.foreground#4a3030
dropdown.listBackground#FFFFFF
editor.background#fefaf6
editor.findMatchBackground#e7a43a50
editor.findMatchHighlightBackground#e7a43a25
editor.focusedStackFrameHighlightBackground#98b88830
editor.foldBackground#e7a43a15
editor.foreground#4a3030
editor.lineHighlightBackground#fdf6f0
editor.lineHighlightBorder#f0e0d020
editor.selectionBackground#e7a43a40
editor.stackFrameHighlightBackground#e7a43a30
editor.wordHighlightBackground#e7a43a20
editor.wordHighlightStrongBackground#e7a43a40
editorBracketHighlight.foreground1#c64413
editorBracketHighlight.foreground2#e7a43a
editorBracketHighlight.foreground3#a88888
editorBracketHighlight.foreground4#98b888
editorBracketHighlight.foreground5#e7a43a
editorBracketHighlight.foreground6#d8b898
editorBracketHighlight.unexpectedBracket.foreground#ee6373
editorBracketMatch.background#e7a43a30
editorBracketMatch.border#c64413
editorCodeLens.foreground#a88878
editorCursor.foreground#c64413
editorError.border#ee637300
editorError.foreground#ee6373
editorGroup.border#f0e0d0
editorGroup.dropBackground#c6441330
editorGroup.dropIntoPromptBackground#fdf6f0
editorGroup.dropIntoPromptBorder#c64413
editorGroup.dropIntoPromptForeground#4a3030
editorGroup.emptyBackground#fdf6f0
editorGroup.focusedEmptyBorder#c64413
editorGroupHeader.tabsBackground#fdf6f0
editorGutter.addedBackground#98b888
editorGutter.deletedBackground#ee6373
editorGutter.modifiedBackground#a88888
editorHint.border#98b88800
editorHint.foreground#98b888
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#f0e0d0
editorIndentGuide.activeBackground1#c64413
editorIndentGuide.background1#f0e0d0
editorInfo.border#c6441300
editorInfo.foreground#c64413
editorInlayHint.background#f0e0d080
editorInlayHint.foreground#8a7060
editorInlayHint.parameterForeground#e7a43a
editorInlayHint.typeForeground#c64413
editorLineNumber.activeForeground#c64413
editorLineNumber.foreground#a88878
editorOverviewRuler.addedForeground#98b888
editorOverviewRuler.background#fdf6f0
editorOverviewRuler.border#f0e0d0
editorOverviewRuler.bracketMatchForeground#c64413
editorOverviewRuler.commonContentForeground#8a7060
editorOverviewRuler.currentContentForeground#98b888
editorOverviewRuler.deletedForeground#ee6373
editorOverviewRuler.errorForeground#ee6373
editorOverviewRuler.findMatchForeground#c6441380
editorOverviewRuler.incomingContentForeground#d8b898
editorOverviewRuler.infoForeground#a88888
editorOverviewRuler.modifiedForeground#d8b898
editorOverviewRuler.rangeHighlightForeground#c6441340
editorOverviewRuler.selectionHighlightForeground#c6441360
editorOverviewRuler.warningForeground#e7a43a
editorOverviewRuler.wordHighlightForeground#c6441360
editorOverviewRuler.wordHighlightStrongForeground#c6441380
editorStickyScroll.background#fdf6f0
editorStickyScrollHover.background#f0e0d0
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.foreground#4a3030
editorSuggestWidget.highlightForeground#c64413
editorSuggestWidget.selectedBackground#f0e0d0
editorWarning.border#e7a43a00
editorWarning.foreground#e7a43a
editorWhitespace.foreground#e8d8c8
editorWidget.background#fdf6f0
editorWidget.border#f0e0d0
editorWidget.foreground#4a3030
errorForeground#ee6373
extensionBadge.remoteBackground#c64413
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#c64413
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#633b3b
extensionIcon.preReleaseForeground#e7a43a
extensionIcon.sponsorForeground#c64413
extensionIcon.starForeground#e7a43a
extensionIcon.verifiedForeground#98b888
focusBorder#c64413
gitDecoration.addedResourceForeground#98b888
gitDecoration.conflictingResourceForeground#ee6373
gitDecoration.deletedResourceForeground#ee6373
gitDecoration.ignoredResourceForeground#e8d8c8
gitDecoration.modifiedResourceForeground#a88888
gitDecoration.untrackedResourceForeground#e7a43a
icon.foreground#4a3030
input.background#FFFFFF
input.border#e8d8c8
input.foreground#4a3030
input.placeholderForeground#a8887880
inputOption.activeBackground#c64413
inputOption.activeForeground#FFFFFF
keybindingLabel.background#f0e0d0
keybindingLabel.border#f0e0d0
keybindingLabel.bottomBorder#c64413
keybindingLabel.foreground#4a3030
list.activeSelectionBackground#c64413
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#e7a43a30
list.focusForeground#4a3030
list.hoverBackground#f0e0d0
list.hoverForeground#4a3030
list.inactiveSelectionBackground#f0e0d080
list.inactiveSelectionForeground#4a3030
menu.background#FFFFFF
menu.border#f0e0d0
menu.foreground#4a3030
menu.selectionBackground#c64413
menu.selectionBorder#c6441300
menu.selectionForeground#FFFFFF
menu.separatorBackground#f0e0d0
menubar.selectionBackground#f0e0d0
menubar.selectionForeground#4a3030
merge.border#f0e0d0
merge.commonContentBackground#8a706020
merge.commonHeaderBackground#8a706040
merge.currentContentBackground#98b88820
merge.currentHeaderBackground#98b88840
merge.incomingContentBackground#d8b89820
merge.incomingHeaderBackground#d8b89840
mergeEditor.change.background#d8b89820
mergeEditor.change.word.background#d8b89840
mergeEditor.conflict.handledFocused.border#98b888
mergeEditor.conflict.handledUnfocused.border#98b88880
mergeEditor.conflict.unhandledFocused.border#e7a43a
mergeEditor.conflict.unhandledUnfocused.border#e7a43a80
minimap.background#fdf6f0
minimap.selectionHighlight#e7a43a50
notifications.background#FFFFFF
notifications.border#f0e0d0
notifications.foreground#4a3030
notificationsErrorIcon.foreground#ee6373
notificationsInfoIcon.foreground#c64413
notificationsWarningIcon.foreground#e7a43a
panel.background#fdf6f0
panel.border#f0e0d0
panelTitle.activeBorder#c64413
panelTitle.activeForeground#4a3030
panelTitle.inactiveForeground#8a7060
peekView.border#c64413
peekViewEditor.background#fdf6f0
peekViewResult.background#fdf6f0
peekViewResult.matchHighlightBackground#e7a43a50
peekViewTitle.background#633b3b
peekViewTitleLabel.foreground#faf0e8
progressBar.background#c64413
quickInput.background#fdf6f0
quickInput.foreground#4a3030
quickInputList.focusBackground#c64413
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#633b3b
scrollbarSlider.activeBackground#c64413
scrollbarSlider.background#e8d8c850
scrollbarSlider.hoverBackground#e8d8c8
selection.background#e7a43a50
settings.checkboxBackground#FFFFFF
settings.checkboxBorder#c64413
settings.checkboxForeground#4a3030
settings.dropdownBackground#FFFFFF
settings.dropdownBorder#f0e0d0
settings.dropdownForeground#4a3030
settings.dropdownListBorder#f0e0d0
settings.focusedRowBackground#f0e0d040
settings.focusedRowBorder#c6441380
settings.headerForeground#4a3030
settings.modifiedItemIndicator#c64413
settings.numberInputBackground#FFFFFF
settings.numberInputBorder#c64413
settings.numberInputForeground#4a3030
settings.rowHoverBackground#f0e0d020
settings.sashBorder#f0e0d0
settings.textInputBackground#FFFFFF
settings.textInputBorder#c64413
settings.textInputForeground#4a3030
sideBar.background#fdf6f0
sideBar.border#f0e0d0
sideBar.foreground#4a3030
sideBarSectionHeader.background#f0e0d0
sideBarSectionHeader.foreground#4a3030
sideBarTitle.foreground#c64413
statusBar.background#c64413
statusBar.debuggingBackground#633b3b
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#3a2020
statusBar.noFolderForeground#faf0e8
symbolIcon.arrayForeground#4a3030
symbolIcon.booleanForeground#c64413
symbolIcon.classForeground#a88888
symbolIcon.colorForeground#e7a43a
symbolIcon.constantForeground#d8b898
symbolIcon.constructorForeground#c64413
symbolIcon.enumeratorForeground#e7a43a
symbolIcon.enumeratorMemberForeground#d8b898
symbolIcon.eventForeground#e7a43a
symbolIcon.fieldForeground#a88888
symbolIcon.fileForeground#8a7060
symbolIcon.folderForeground#e7a43a
symbolIcon.functionForeground#c64413
symbolIcon.interfaceForeground#98b888
symbolIcon.keyForeground#4a3030
symbolIcon.keywordForeground#c64413
symbolIcon.methodForeground#c64413
symbolIcon.moduleForeground#a88888
symbolIcon.namespaceForeground#a88888
symbolIcon.nullForeground#ee6373
symbolIcon.numberForeground#d8b898
symbolIcon.objectForeground#4a3030
symbolIcon.operatorForeground#8a7060
symbolIcon.packageForeground#a88888
symbolIcon.propertyForeground#a88888
symbolIcon.referenceForeground#d8b898
symbolIcon.snippetForeground#8a7060
symbolIcon.stringForeground#3a2020
symbolIcon.structForeground#4a3030
symbolIcon.textForeground#4a3030
symbolIcon.typeParameterForeground#98b888
symbolIcon.unitForeground#d8b898
symbolIcon.variableForeground#a88888
tab.activeBackground#fefaf6
tab.activeBorder#c64413
tab.activeForeground#c64413
tab.border#f0e0d0
tab.hoverBackground#fefaf6
tab.hoverForeground#c64413
tab.inactiveBackground#fdf6f0
tab.inactiveForeground#8a7060
terminal.ansiBlack#4a3030
terminal.ansiBlue#c64413
terminal.ansiBrightBlack#8a7060
terminal.ansiBrightBlue#c8b8a8
terminal.ansiBrightCyan#7dc5f0
terminal.ansiBrightGreen#b8d8b0
terminal.ansiBrightMagenta#d8b898
terminal.ansiBrightRed#f08090
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#f0e0b8
terminal.ansiCyan#e7a43a
terminal.ansiGreen#98b888
terminal.ansiMagenta#a88888
terminal.ansiRed#ee6373
terminal.ansiWhite#f0e0d0
terminal.ansiYellow#e7a43a
terminal.background#fefaf6
terminal.foreground#4a3030
testing.iconErrored#ee6373
testing.iconFailed#ee6373
testing.iconPassed#98b888
testing.iconQueued#e7a43a
testing.iconSkipped#e8d8c8
testing.iconUnset#e8d8c8
testing.peekBorder#ee6373
testing.peekHeaderBackground#ee637320
testing.runAction#98b888
textLink.activeForeground#8a5050
textLink.foreground#c64413
titleBar.activeBackground#633b3b
titleBar.activeForeground#faf0e8
titleBar.inactiveBackground#fdf6f0
titleBar.inactiveForeground#8a7060
walkThrough.embeddedEditorBackground#fdf6f0
welcomePage.background#fefaf6
welcomePage.progress.background#f0e0d0
welcomePage.progress.foreground#c64413
welcomePage.tileBackground#fdf6f0
welcomePage.tileBorder#f0e0d0
welcomePage.tileHoverBackground#f0e0d0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8a9fb8	italic
keyword, storage	#c64413	bold
keyword.control, keyword.control.flow	#8a5050	bold
entity.name.function, support.function	#a88888	bold
entity.name.type, support.class, support.type, storage.type	#633b3b	bold
string	#3a2020	—
constant.character.escape	#ee6373	—
variable, support.variable	#4a3030	—
variable.parameter	#6a4040	italic
constant.numeric, constant.character, constant	#d8b898	—
constant.language, support.constant, variable.language	#c64413	—
keyword.operator	#6a4040	—
punctuation	#8a7060	—
entity.name.tag	#c64413	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#e7a43a	italic
meta.selector, entity.name.tag.css	#4a3030	—
meta.property-name, support.type.property-name	#c64413	—
meta.property-value, support.constant.property-value	#3a2020	—
keyword.other.unit	#d8b898	—
markup.heading	#c64413	bold
markup.bold	#4a3030	bold
markup.italic	#4a3030	italic
meta.link	#e7a43a	—
markup.list	#c64413	—
markup.inline.raw	#3a2020	—
markup.inserted	#98b888	—
markup.deleted	#ee6373	—
markup.changed	#d8b898	—
support.type.property-name.json	#c64413	—
entity.name.tag.yaml	#e7a43a	—
string.regexp	#ee6373	—
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}!`;
}