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

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#3A2A50
activityBar.foreground#FAF8FC
activityBar.inactiveForeground#C4B8D5
activityBarBadge.background#9E2A2B
activityBarBadge.foreground#FFFFFF
badge.background#9E2A2B
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#9E2A2B
breadcrumb.background#F2EEF6
breadcrumb.focusForeground#2A2535
breadcrumb.foreground#6A5A78
button.background#9E2A2B
button.foreground#FFFFFF
button.hoverBackground#7A1F20
button.secondaryBackground#6A5A78
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#4A3A60
charts.blue#5A7A90
charts.foreground#2A2535
charts.green#6A8A6A
charts.lines#9E2A2B
charts.orange#C39382
charts.purple#6A4A9E
charts.red#96182E
charts.yellow#B8906A
checkbox.background#FFFFFF
checkbox.border#9E2A2B
checkbox.foreground#2A2535
checkbox.selectBackground#9E2A2B
checkbox.selectBorder#9E2A2B
commandCenter.activeBackground#E8E4EE
commandCenter.activeBorder#9E2A2B
commandCenter.activeForeground#9E2A2B
commandCenter.background#F2EEF6
commandCenter.border#E0D8E8
commandCenter.debuggingBackground#9E2A2B20
commandCenter.foreground#2A2535
commandCenter.inactiveBorder#E0D8E880
commandCenter.inactiveForeground#6A5A75
debugConsole.errorForeground#96182E
debugConsole.infoForeground#8A70B0
debugConsole.sourceForeground#6A5A75
debugConsole.warningForeground#B8906A
debugConsoleInputIcon.foreground#8A70B0
debugIcon.breakpointCurrentStackframeForeground#8A70B0
debugIcon.breakpointDisabledForeground#8A8095
debugIcon.breakpointForeground#96182E
debugIcon.breakpointStackframeForeground#6A8A6A
debugIcon.breakpointUnverifiedForeground#B8906A
debugIcon.continueForeground#6A8A6A
debugIcon.disconnectForeground#96182E
debugIcon.pauseForeground#B8906A
debugIcon.restartForeground#6A8A6A
debugIcon.startForeground#6A8A6A
debugIcon.stepBackForeground#8A70B0
debugIcon.stepIntoForeground#8A70B0
debugIcon.stepOutForeground#8A70B0
debugIcon.stepOverForeground#8A70B0
debugIcon.stopForeground#96182E
debugTokenExpression.boolean#6A4A9E
debugTokenExpression.error#96182E
debugTokenExpression.name#6A4A9E
debugTokenExpression.number#6A5A75
debugTokenExpression.string#5A7070
debugTokenExpression.value#8A70B0
debugToolBar.background#F2EEF6
debugToolBar.border#E0D8E8
debugView.exceptionLabelBackground#96182E
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#8A70B0
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#8A70B060
descriptionForeground#6A5A78
diffEditor.diagonalFill#E0D8E840
diffEditor.insertedLineBackground#6A8A6A15
diffEditor.insertedTextBackground#6A8A6A20
diffEditor.insertedTextBorder#6A8A6A00
diffEditor.removedLineBackground#96182E15
diffEditor.removedTextBackground#96182E20
diffEditor.removedTextBorder#96182E00
diffEditorGutter.insertedLineBackground#6A8A6A30
diffEditorGutter.removedLineBackground#96182E30
diffEditorOverview.insertedForeground#6A8A6A
diffEditorOverview.removedForeground#96182E
dropdown.background#FFFFFF
dropdown.border#C4B8D5
dropdown.foreground#2A2535
dropdown.listBackground#FFFFFF
editor.background#FAF8FC
editor.findMatchBackground#9E2A2B45
editor.findMatchHighlightBackground#9E2A2B22
editor.focusedStackFrameHighlightBackground#6A8A6A30
editor.foldBackground#8A70B012
editor.foreground#2A2535
editor.lineHighlightBackground#E8E4EE20
editor.lineHighlightBorder#C4B8D530
editor.selectionBackground#8A70B040
editor.stackFrameHighlightBackground#B8906A30
editor.wordHighlightBackground#C4B8D530
editor.wordHighlightStrongBackground#C4B8D550
editorBracketHighlight.foreground1#8A70B0
editorBracketHighlight.foreground2#6A4A9E
editorBracketHighlight.foreground3#C39382
editorBracketHighlight.foreground4#5A7A90
editorBracketHighlight.foreground5#B8906A
editorBracketHighlight.foreground6#6A5A75
editorBracketHighlight.unexpectedBracket.foreground#96182E
editorBracketMatch.background#9E2A2B30
editorBracketMatch.border#9E2A2B
editorCodeLens.foreground#8A8095
editorCursor.foreground#6A4A9E
editorError.border#96182E00
editorError.foreground#96182E
editorGroup.border#E0D8E8
editorGroup.dropBackground#8A70B030
editorGroup.dropIntoPromptBackground#F2EEF6
editorGroup.dropIntoPromptBorder#8A70B0
editorGroup.dropIntoPromptForeground#2A2535
editorGroup.emptyBackground#F2EEF6
editorGroup.focusedEmptyBorder#8A70B0
editorGroupHeader.tabsBackground#F2EEF6
editorGutter.addedBackground#5A7A70
editorGutter.deletedBackground#96182E
editorGutter.modifiedBackground#8A70B0
editorHint.border#6A8A6A00
editorHint.foreground#6A8A6A
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#E0D8E8
editorIndentGuide.activeBackground1#8A70B0
editorIndentGuide.background1#E0D8E8
editorInfo.border#8A70B000
editorInfo.foreground#8A70B0
editorInlayHint.background#E0D8E880
editorInlayHint.foreground#6A5A75
editorInlayHint.parameterForeground#8A70B0
editorInlayHint.typeForeground#6A4A9E
editorLineNumber.activeForeground#6A4A9E
editorLineNumber.foreground#8A8095
editorOverviewRuler.addedForeground#6A8A6A
editorOverviewRuler.background#F2EEF6
editorOverviewRuler.border#E0D8E8
editorOverviewRuler.bracketMatchForeground#8A70B0
editorOverviewRuler.commonContentForeground#6A5A75
editorOverviewRuler.currentContentForeground#6A8A6A
editorOverviewRuler.deletedForeground#96182E
editorOverviewRuler.errorForeground#96182E
editorOverviewRuler.findMatchForeground#8A70B080
editorOverviewRuler.incomingContentForeground#8A70B0
editorOverviewRuler.infoForeground#8A70B0
editorOverviewRuler.modifiedForeground#8A70B0
editorOverviewRuler.rangeHighlightForeground#8A70B040
editorOverviewRuler.selectionHighlightForeground#8A70B060
editorOverviewRuler.warningForeground#B8906A
editorOverviewRuler.wordHighlightForeground#8A70B060
editorOverviewRuler.wordHighlightStrongForeground#8A70B080
editorStickyScroll.background#F2EEF6
editorStickyScrollHover.background#E8E4EE
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.foreground#2A2535
editorSuggestWidget.highlightForeground#9E2A2B
editorSuggestWidget.selectedBackground#E8E4EE
editorWarning.border#B8906A00
editorWarning.foreground#B8906A
editorWhitespace.foreground#C4B8D550
editorWidget.background#F2EEF6
editorWidget.border#E0D8E8
editorWidget.foreground#2A2535
errorForeground#96182E
extensionBadge.remoteBackground#9E2A2B
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#9E2A2B
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#7A1F20
extensionIcon.preReleaseForeground#C39382
extensionIcon.sponsorForeground#96182E
extensionIcon.starForeground#B8906A
extensionIcon.verifiedForeground#6A8A6A
focusBorder#9E2A2B
gitDecoration.addedResourceForeground#5A7A70
gitDecoration.conflictingResourceForeground#A62840
gitDecoration.deletedResourceForeground#96182E
gitDecoration.ignoredResourceForeground#8A8095
gitDecoration.modifiedResourceForeground#6A4A9E
gitDecoration.untrackedResourceForeground#B8906A
icon.foreground#2A2535
input.background#FFFFFF
input.border#C4B8D5
input.foreground#2A2535
input.placeholderForeground#8A809580
inputOption.activeBackground#9E2A2B
inputOption.activeForeground#FFFFFF
keybindingLabel.background#E0D8E8
keybindingLabel.border#E0D8E8
keybindingLabel.bottomBorder#6A5A75
keybindingLabel.foreground#2A2535
list.activeSelectionBackground#8A70B0
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#8A70B025
list.focusForeground#2A2535
list.hoverBackground#E8E4EE
list.hoverForeground#2A2535
list.inactiveSelectionBackground#E0D8E890
list.inactiveSelectionForeground#2A2535
menu.background#FFFFFF
menu.border#E0D8E8
menu.foreground#2A2535
menu.selectionBackground#9E2A2B
menu.selectionBorder#9E2A2B00
menu.selectionForeground#FFFFFF
menu.separatorBackground#E0D8E8
menubar.selectionBackground#E8E4EE
menubar.selectionForeground#2A2535
merge.border#E0D8E8
merge.commonContentBackground#6A5A7520
merge.commonHeaderBackground#6A5A7540
merge.currentContentBackground#6A8A6A20
merge.currentHeaderBackground#6A8A6A40
merge.incomingContentBackground#9E2A2B20
merge.incomingHeaderBackground#9E2A2B40
mergeEditor.change.background#9E2A2B20
mergeEditor.change.word.background#9E2A2B40
mergeEditor.conflict.handledFocused.border#6A8A6A
mergeEditor.conflict.handledUnfocused.border#6A8A6A80
mergeEditor.conflict.unhandledFocused.border#B8906A
mergeEditor.conflict.unhandledUnfocused.border#B8906A80
minimap.background#F2EEF6
minimap.selectionHighlight#9E2A2B50
notifications.background#FFFFFF
notifications.border#E0D8E8
notifications.foreground#2A2535
notificationsErrorIcon.foreground#96182E
notificationsInfoIcon.foreground#9E2A2B
notificationsWarningIcon.foreground#B8906A
panel.background#F2EEF6
panel.border#E0D8E8
panelTitle.activeBorder#6A4A9E
panelTitle.activeForeground#2A2535
panelTitle.inactiveForeground#6A5A78
peekView.border#9E2A2B
peekViewEditor.background#F2EEF6
peekViewResult.background#F2EEF6
peekViewResult.matchHighlightBackground#9E2A2B50
peekViewTitle.background#3A2A50
peekViewTitleLabel.foreground#FAF8FC
progressBar.background#9E2A2B
quickInput.background#F2EEF6
quickInput.foreground#2A2535
quickInputList.focusBackground#9E2A2B
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#3A2A50
scrollbarSlider.activeBackground#9E2A2B
scrollbarSlider.background#C4B8D550
scrollbarSlider.hoverBackground#C4B8D5
selection.background#8A70B040
settings.checkboxBackground#FFFFFF
settings.checkboxBorder#8A70B0
settings.checkboxForeground#2A2535
settings.dropdownBackground#FFFFFF
settings.dropdownBorder#E0D8E8
settings.dropdownForeground#2A2535
settings.dropdownListBorder#E0D8E8
settings.focusedRowBackground#E8E4EE40
settings.focusedRowBorder#8A70B080
settings.headerForeground#2A2535
settings.modifiedItemIndicator#8A70B0
settings.numberInputBackground#FFFFFF
settings.numberInputBorder#C4B8D5
settings.numberInputForeground#2A2535
settings.rowHoverBackground#E8E4EE20
settings.sashBorder#E0D8E8
settings.textInputBackground#FFFFFF
settings.textInputBorder#C4B8D5
settings.textInputForeground#2A2535
sideBar.background#F2EEF6
sideBar.border#E0D8E8
sideBar.foreground#2A2535
sideBarSectionHeader.background#E0D8E8
sideBarSectionHeader.foreground#2A2535
sideBarTitle.foreground#6A5A78
statusBar.background#9E2A2B
statusBar.debuggingBackground#C39382
statusBar.debuggingForeground#2A2535
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#4A3A60
statusBar.noFolderForeground#FAF8FC
symbolIcon.arrayForeground#8A70B0
symbolIcon.booleanForeground#6A4A9E
symbolIcon.classForeground#3A2A50
symbolIcon.colorForeground#8A70B0
symbolIcon.constantForeground#6A5A75
symbolIcon.constructorForeground#C39382
symbolIcon.enumeratorForeground#B8906A
symbolIcon.enumeratorMemberForeground#6A5A75
symbolIcon.eventForeground#B8906A
symbolIcon.fieldForeground#6A5A75
symbolIcon.fileForeground#6A5A75
symbolIcon.folderForeground#6A5A75
symbolIcon.functionForeground#8A70B0
symbolIcon.interfaceForeground#5A7A90
symbolIcon.keyForeground#8A70B0
symbolIcon.keywordForeground#6A4A9E
symbolIcon.methodForeground#8A70B0
symbolIcon.moduleForeground#C39382
symbolIcon.namespaceForeground#C39382
symbolIcon.nullForeground#96182E
symbolIcon.numberForeground#6A5A75
symbolIcon.objectForeground#3A2A50
symbolIcon.operatorForeground#6A5A75
symbolIcon.packageForeground#C39382
symbolIcon.propertyForeground#8A70B0
symbolIcon.referenceForeground#6A5A75
symbolIcon.snippetForeground#6A5A75
symbolIcon.stringForeground#5A7070
symbolIcon.structForeground#3A2A50
symbolIcon.textForeground#2A2535
symbolIcon.typeParameterForeground#5A7A90
symbolIcon.unitForeground#6A5A75
symbolIcon.variableForeground#2A2535
tab.activeBackground#FFFFFF
tab.activeBorder#6A4A9E
tab.activeForeground#2A2535
tab.border#E0D8E8
tab.hoverBackground#FFFFFF
tab.hoverForeground#6A4A9E
tab.inactiveBackground#F2EEF6
tab.inactiveForeground#6A5A78
terminal.ansiBlack#2A2535
terminal.ansiBlue#4A5A80
terminal.ansiBrightBlack#6A5A78
terminal.ansiBrightBlue#5A6A90
terminal.ansiBrightCyan#6A8AA0
terminal.ansiBrightGreen#6A8A80
terminal.ansiBrightMagenta#8A70B0
terminal.ansiBrightRed#A62840
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#C8A07A
terminal.ansiCyan#5A7A90
terminal.ansiGreen#5A7A70
terminal.ansiMagenta#6A4A9E
terminal.ansiRed#96182E
terminal.ansiWhite#E0D8E8
terminal.ansiYellow#B8906A
terminal.background#FFFFFF
terminal.foreground#2A2535
testing.iconErrored#96182E
testing.iconFailed#96182E
testing.iconPassed#6A8A6A
testing.iconQueued#B8906A
testing.iconSkipped#8A8095
testing.iconUnset#8A8095
testing.peekBorder#96182E
testing.peekHeaderBackground#96182E20
testing.runAction#6A8A6A
textLink.activeForeground#7A1F20
textLink.foreground#9E2A2B
titleBar.activeBackground#3A2A50
titleBar.activeForeground#FAF8FC
titleBar.inactiveBackground#4A3A60
titleBar.inactiveForeground#C4B8D5
walkThrough.embeddedEditorBackground#F2EEF6
welcomePage.background#FAF8FC
welcomePage.progress.background#E0D8E8
welcomePage.progress.foreground#8A70B0
welcomePage.tileBackground#F2EEF6
welcomePage.tileBorder#E0D8E8
welcomePage.tileHoverBackground#E8E4EE

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8A8095	italic
keyword, storage	#9E2A2B	bold
entity.name.function, support.function	#6A4A9E	bold
entity.name.type, support.class, support.type, storage.type	#3A2A50	bold
string	#506090	—
constant.character.escape	#6A4A9E	—
variable, support.variable	#2A2535	—
constant.numeric, constant.character, constant	#8A70B0	—
constant.language, support.constant, variable.language	#6A4A9E	—
keyword.operator	#6A5A75	—
punctuation	#8A8095	—
entity.name.tag	#6A4A9E	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#8A70B0	italic
meta.selector, entity.name.tag.css	#3A2A50	—
meta.property-name, support.type.property-name	#6A4A9E	—
meta.property-value, support.constant.property-value	#5A7070	—
markup.heading	#6A4A9E	bold
markup.bold	#2A2535	bold
markup.italic	#2A2535	italic
meta.link	#8A70B0	—
markup.list	#6A4A9E	—
markup.inline.raw	#5A7070	—
markup.inserted	#5A7A5A	—
markup.deleted	#96182E	—
markup.changed	#8A70B0	—

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