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

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#2a2832
activityBar.foreground#f7f0e7
activityBar.inactiveForeground#908898
activityBarBadge.background#751c26
activityBarBadge.foreground#FFFFFF
badge.background#751c26
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#751c26
breadcrumb.background#f0e8df
breadcrumb.focusForeground#2a2832
breadcrumb.foreground#786860
button.background#751c26
button.foreground#FFFFFF
button.hoverBackground#5a1620
button.secondaryBackground#3a3842
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#4a4852
charts.blue#4a5068
charts.foreground#2a2832
charts.green#508858
charts.lines#e4d8cc
charts.orange#b07850
charts.purple#751c26
charts.red#a05060
charts.yellow#907840
checkbox.background#FFFFFF
checkbox.border#c8b8a8
checkbox.foreground#2a2832
checkbox.selectBackground#751c26
checkbox.selectBorder#751c26
commandCenter.activeBackground#ece4db
commandCenter.activeBorder#5a1620
commandCenter.activeForeground#751c26
commandCenter.background#f0e8df
commandCenter.border#e4d8cc
commandCenter.debuggingBackground#abd1f120
commandCenter.foreground#2a2832
commandCenter.inactiveBorder#d8e0e880
commandCenter.inactiveForeground#786860
debugConsole.errorForeground#a05060
debugConsole.infoForeground#4a5068
debugConsole.sourceForeground#786860
debugConsole.warningForeground#907840
debugConsoleInputIcon.foreground#751c26
debugIcon.breakpointCurrentStackframeForeground#751c26
debugIcon.breakpointDisabledForeground#a0a8b0
debugIcon.breakpointForeground#a05060
debugIcon.breakpointStackframeForeground#508858
debugIcon.breakpointUnverifiedForeground#907840
debugIcon.continueForeground#508858
debugIcon.disconnectForeground#a05060
debugIcon.pauseForeground#907840
debugIcon.restartForeground#508858
debugIcon.startForeground#508858
debugIcon.stepBackForeground#4a5068
debugIcon.stepIntoForeground#4a5068
debugIcon.stepOutForeground#4a5068
debugIcon.stepOverForeground#4a5068
debugIcon.stopForeground#a05060
debugTokenExpression.boolean#751c26
debugTokenExpression.error#a05060
debugTokenExpression.name#2a2832
debugTokenExpression.number#585870
debugTokenExpression.string#751c26
debugTokenExpression.value#4a5068
debugToolBar.background#f0e8df
debugToolBar.border#e4d8cc
debugView.exceptionLabelBackground#a05060
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#751c26
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#4a506860
descriptionForeground#786860
diffEditor.diagonalFill#d8e0e840
diffEditor.insertedLineBackground#50885815
diffEditor.insertedTextBackground#50885820
diffEditor.insertedTextBorder#50885800
diffEditor.removedLineBackground#a0506015
diffEditor.removedTextBackground#a0506020
diffEditor.removedTextBorder#a0506000
diffEditorGutter.insertedLineBackground#50885830
diffEditorGutter.removedLineBackground#a0506030
diffEditorOverview.insertedForeground#508858
diffEditorOverview.removedForeground#a05060
dropdown.background#FFFFFF
dropdown.border#c8b8a8
dropdown.foreground#2a2832
dropdown.listBackground#FFFFFF
editor.background#f7f0e7
editor.findMatchBackground#abd1f160
editor.findMatchHighlightBackground#abd1f130
editor.focusedStackFrameHighlightBackground#50885830
editor.foldBackground#c8b8a815
editor.foreground#2a2832
editor.lineHighlightBackground#f0e8df
editor.lineHighlightBorder#d8c8b820
editor.selectionBackground#c8b8a840
editor.stackFrameHighlightBackground#90784030
editor.wordHighlightBackground#c8b8a825
editor.wordHighlightStrongBackground#c8b8a845
editorBracketHighlight.foreground1#751c26
editorBracketHighlight.foreground2#4a5068
editorBracketHighlight.foreground3#607068
editorBracketHighlight.foreground4#508858
editorBracketHighlight.foreground5#907840
editorBracketHighlight.foreground6#7d6951
editorBracketHighlight.unexpectedBracket.foreground#a05060
editorBracketMatch.background#c8b8a840
editorBracketMatch.border#751c26
editorCodeLens.foreground#a09888
editorCursor.foreground#751c26
editorError.border#a0506000
editorError.foreground#a05060
editorGroup.border#e4d8cc
editorGroup.dropBackground#c8b8a830
editorGroup.dropIntoPromptBackground#f0e8df
editorGroup.dropIntoPromptBorder#751c26
editorGroup.dropIntoPromptForeground#2a2832
editorGroup.emptyBackground#f0e8df
editorGroup.focusedEmptyBorder#751c26
editorGroupHeader.tabsBackground#f0e8df
editorGutter.addedBackground#508858
editorGutter.deletedBackground#a05060
editorGutter.modifiedBackground#585870
editorHint.border#50885800
editorHint.foreground#508858
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#e4d8cc
editorIndentGuide.activeBackground1#751c26
editorIndentGuide.background1#e8dcd0
editorInfo.border#4a506800
editorInfo.foreground#4a5068
editorInlayHint.background#e8dcd080
editorInlayHint.foreground#786860
editorInlayHint.parameterForeground#751c26
editorInlayHint.typeForeground#4a5068
editorLineNumber.activeForeground#751c26
editorLineNumber.foreground#a09888
editorOverviewRuler.addedForeground#508858
editorOverviewRuler.background#f0e8df
editorOverviewRuler.border#e4d8cc
editorOverviewRuler.bracketMatchForeground#751c26
editorOverviewRuler.commonContentForeground#786860
editorOverviewRuler.currentContentForeground#508858
editorOverviewRuler.deletedForeground#a05060
editorOverviewRuler.errorForeground#a05060
editorOverviewRuler.findMatchForeground#751c2680
editorOverviewRuler.incomingContentForeground#585870
editorOverviewRuler.infoForeground#4a5068
editorOverviewRuler.modifiedForeground#585870
editorOverviewRuler.rangeHighlightForeground#c8b8a840
editorOverviewRuler.selectionHighlightForeground#c8b8a860
editorOverviewRuler.warningForeground#907840
editorOverviewRuler.wordHighlightForeground#c8b8a860
editorOverviewRuler.wordHighlightStrongForeground#c8b8a880
editorStickyScroll.background#f0e8df
editorStickyScrollHover.background#ece4db
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.foreground#2a2832
editorSuggestWidget.highlightForeground#751c26
editorSuggestWidget.selectedBackground#ece4db
editorWarning.border#90784000
editorWarning.foreground#907840
editorWhitespace.foreground#dcd4cc
editorWidget.background#f0e8df
editorWidget.border#e4d8cc
editorWidget.foreground#2a2832
errorForeground#a05060
extensionBadge.remoteBackground#751c26
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#751c26
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#5a1620
extensionIcon.preReleaseForeground#751c26
extensionIcon.sponsorForeground#4a5068
extensionIcon.starForeground#907840
extensionIcon.verifiedForeground#508858
focusBorder#751c26
gitDecoration.addedResourceForeground#508858
gitDecoration.conflictingResourceForeground#751c26
gitDecoration.deletedResourceForeground#a05060
gitDecoration.ignoredResourceForeground#b0a8a0
gitDecoration.modifiedResourceForeground#585870
gitDecoration.untrackedResourceForeground#907840
icon.foreground#2a2832
input.background#FFFFFF
input.border#c8b8a8
input.foreground#2a2832
input.placeholderForeground#a0988880
inputOption.activeBackground#751c26
inputOption.activeForeground#FFFFFF
keybindingLabel.background#e8dcd0
keybindingLabel.border#e8dcd0
keybindingLabel.bottomBorder#4a5068
keybindingLabel.foreground#2a2832
list.activeSelectionBackground#751c26
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#c8b8a840
list.focusForeground#2a2832
list.hoverBackground#ece4db
list.hoverForeground#2a2832
list.inactiveSelectionBackground#c8b8a830
list.inactiveSelectionForeground#2a2832
menu.background#FFFFFF
menu.border#e4d8cc
menu.foreground#2a2832
menu.selectionBackground#751c26
menu.selectionBorder#751c2600
menu.selectionForeground#FFFFFF
menu.separatorBackground#e4d8cc
menubar.selectionBackground#ece4db
menubar.selectionForeground#2a2832
merge.border#d8e0e8
merge.commonContentBackground#68708020
merge.commonHeaderBackground#68708040
merge.currentContentBackground#50885820
merge.currentHeaderBackground#50885840
merge.incomingContentBackground#58587020
merge.incomingHeaderBackground#58587040
mergeEditor.change.background#abd1f120
mergeEditor.change.word.background#abd1f140
mergeEditor.conflict.handledFocused.border#508858
mergeEditor.conflict.handledUnfocused.border#50885880
mergeEditor.conflict.unhandledFocused.border#907840
mergeEditor.conflict.unhandledUnfocused.border#90784080
minimap.background#f0e8df
minimap.selectionHighlight#c8b8a850
notifications.background#FFFFFF
notifications.border#e4d8cc
notifications.foreground#2a2832
notificationsErrorIcon.foreground#a05060
notificationsInfoIcon.foreground#4a5068
notificationsWarningIcon.foreground#907840
panel.background#f0e8df
panel.border#e4d8cc
panelTitle.activeBorder#751c26
panelTitle.activeForeground#2a2832
panelTitle.inactiveForeground#786860
peekView.border#751c26
peekViewEditor.background#f0e8df
peekViewResult.background#f0e8df
peekViewResult.matchHighlightBackground#abd1f150
peekViewTitle.background#2a2832
peekViewTitleLabel.foreground#f7f0e7
progressBar.background#751c26
quickInput.background#f0e8df
quickInput.foreground#2a2832
quickInputList.focusBackground#751c26
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#751c26
scrollbarSlider.activeBackground#751c26
scrollbarSlider.background#c8b8a850
scrollbarSlider.hoverBackground#c8b8a8
selection.background#c8b8a8
settings.checkboxBackground#FFFFFF
settings.checkboxBorder#4a5068
settings.checkboxForeground#2a2832
settings.dropdownBackground#FFFFFF
settings.dropdownBorder#e4d8cc
settings.dropdownForeground#2a2832
settings.dropdownListBorder#e4d8cc
settings.focusedRowBackground#f0e8df40
settings.focusedRowBorder#751c2680
settings.headerForeground#2a2832
settings.modifiedItemIndicator#751c26
settings.numberInputBackground#FFFFFF
settings.numberInputBorder#4a5068
settings.numberInputForeground#2a2832
settings.rowHoverBackground#f0e8df20
settings.sashBorder#e4d8cc
settings.textInputBackground#FFFFFF
settings.textInputBorder#4a5068
settings.textInputForeground#2a2832
sideBar.background#f0e8df
sideBar.border#e4d8cc
sideBar.foreground#2a2832
sideBarSectionHeader.background#e8dcd0
sideBarSectionHeader.foreground#2a2832
sideBarTitle.foreground#751c26
statusBar.background#751c26
statusBar.debuggingBackground#3a3842
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#2a2832
statusBar.noFolderForeground#f7f0e7
symbolIcon.arrayForeground#2a2832
symbolIcon.booleanForeground#751c26
symbolIcon.classForeground#751c26
symbolIcon.colorForeground#751c26
symbolIcon.constantForeground#585870
symbolIcon.constructorForeground#751c26
symbolIcon.enumeratorForeground#907840
symbolIcon.enumeratorMemberForeground#585870
symbolIcon.eventForeground#907840
symbolIcon.fieldForeground#585870
symbolIcon.fileForeground#786860
symbolIcon.folderForeground#7d6951
symbolIcon.functionForeground#3a3842
symbolIcon.interfaceForeground#508858
symbolIcon.keyForeground#2a2832
symbolIcon.keywordForeground#751c26
symbolIcon.methodForeground#3a3842
symbolIcon.moduleForeground#751c26
symbolIcon.namespaceForeground#751c26
symbolIcon.nullForeground#a05060
symbolIcon.numberForeground#585870
symbolIcon.objectForeground#2a2832
symbolIcon.operatorForeground#786860
symbolIcon.packageForeground#751c26
symbolIcon.propertyForeground#2a2832
symbolIcon.referenceForeground#585870
symbolIcon.snippetForeground#786860
symbolIcon.stringForeground#751c26
symbolIcon.structForeground#2a2832
symbolIcon.textForeground#2a2832
symbolIcon.typeParameterForeground#508858
symbolIcon.unitForeground#585870
symbolIcon.variableForeground#2a2832
tab.activeBackground#f7f0e7
tab.activeBorder#751c26
tab.activeForeground#751c26
tab.border#e4d8cc
tab.hoverBackground#f7f0e7
tab.hoverForeground#751c26
tab.inactiveBackground#f0e8df
tab.inactiveForeground#786860
terminal.ansiBlack#2a2832
terminal.ansiBlue#4a5068
terminal.ansiBrightBlack#786860
terminal.ansiBrightBlue#5a6078
terminal.ansiBrightCyan#607078
terminal.ansiBrightGreen#68a070
terminal.ansiBrightMagenta#903848
terminal.ansiBrightRed#b86878
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#a89050
terminal.ansiCyan#506068
terminal.ansiGreen#508858
terminal.ansiMagenta#751c26
terminal.ansiRed#a05060
terminal.ansiWhite#f0e8df
terminal.ansiYellow#907840
terminal.background#f7f0e7
terminal.foreground#2a2832
testing.iconErrored#a05060
testing.iconFailed#a05060
testing.iconPassed#508858
testing.iconQueued#907840
testing.iconSkipped#a0a8b0
testing.iconUnset#a0a8b0
testing.peekBorder#a05060
testing.peekHeaderBackground#a0506020
testing.runAction#508858
textLink.activeForeground#2a2832
textLink.foreground#4a4858
titleBar.activeBackground#2a2832
titleBar.activeForeground#f7f0e7
titleBar.inactiveBackground#f0e8df
titleBar.inactiveForeground#751c26
walkThrough.embeddedEditorBackground#f0e8df
welcomePage.background#f7f0e7
welcomePage.progress.background#e4d8cc
welcomePage.progress.foreground#751c26
welcomePage.tileBackground#f0e8df
welcomePage.tileBorder#e4d8cc
welcomePage.tileHoverBackground#ece4db

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#9088a0	italic
keyword, storage	#751c26	bold
entity.name.function, support.function	#3a3842	bold
entity.name.type, support.class, support.type, storage.type	#7d6951	bold
string	#5a3038	—
constant.character.escape	#751c26	—
variable, support.variable	#2a2832	—
constant.numeric, constant.character, constant	#4a4858	—
constant.language, support.constant, variable.language	#751c26	—
keyword.operator	#605848	—
punctuation	#685850	—
entity.name.tag	#5a1620	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#506068	italic
meta.selector, entity.name.tag.css	#2a2832	—
meta.property-name, support.type.property-name	#5a1620	—
meta.property-value, support.constant.property-value	#4a3038	—
markup.heading	#751c26	bold
markup.bold	#2a2832	bold
markup.italic	#2a2832	italic
meta.link	#4a4858	—
markup.list	#751c26	—
markup.inline.raw	#4a3038	—
markup.inserted	#508858	—
markup.deleted	#a05060	—
markup.changed	#585870	—

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}!`;
}