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 - Ill Dottore

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#1a2848
activityBar.foreground#f6f9fc
activityBar.inactiveForeground#8898b0
activityBarBadge.background#4888a0
activityBarBadge.foreground#FFFFFF
badge.background#4888a0
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#305878
breadcrumb.background#e8f0f8
breadcrumb.focusForeground#1a2848
breadcrumb.foreground#8898b0
button.background#305878
button.foreground#FFFFFF
button.hoverBackground#204060
button.secondaryBackground#d8e4f0
button.secondaryForeground#1a2848
button.secondaryHoverBackground#c0d0e0
charts.blue#305878
charts.foreground#1a2848
charts.green#408068
charts.lines#305878
charts.orange#a07858
charts.purple#685080
charts.red#904858
charts.yellow#887048
checkbox.background#FFFFFF
checkbox.border#305878
checkbox.foreground#1a2848
checkbox.selectBackground#305878
checkbox.selectBorder#305878
commandCenter.activeBackground#d8e4f0
commandCenter.activeBorder#305878
commandCenter.activeForeground#305878
commandCenter.background#e8f0f8
commandCenter.border#c0d0e0
commandCenter.debuggingBackground#30587820
commandCenter.foreground#1a2848
commandCenter.inactiveBorder#c0d0e080
commandCenter.inactiveForeground#8898b0
debugConsole.errorForeground#904858
debugConsole.infoForeground#305878
debugConsole.sourceForeground#607080
debugConsole.warningForeground#887048
debugConsoleInputIcon.foreground#305878
debugIcon.breakpointCurrentStackframeForeground#305878
debugIcon.breakpointDisabledForeground#a0b0c0
debugIcon.breakpointForeground#904858
debugIcon.breakpointStackframeForeground#408068
debugIcon.breakpointUnverifiedForeground#887048
debugIcon.continueForeground#408068
debugIcon.disconnectForeground#904858
debugIcon.pauseForeground#887048
debugIcon.restartForeground#408068
debugIcon.startForeground#408068
debugIcon.stepBackForeground#305878
debugIcon.stepIntoForeground#305878
debugIcon.stepOutForeground#305878
debugIcon.stepOverForeground#305878
debugIcon.stopForeground#904858
debugTokenExpression.boolean#305878
debugTokenExpression.error#904858
debugTokenExpression.name#305878
debugTokenExpression.number#406898
debugTokenExpression.string#287088
debugTokenExpression.value#287088
debugToolBar.background#e8f0f8
debugToolBar.border#c0d0e0
debugView.exceptionLabelBackground#904858
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#305878
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#30587860
descriptionForeground#8898b0
diffEditor.diagonalFill#c0d0e040
diffEditor.insertedLineBackground#40806815
diffEditor.insertedTextBackground#40806820
diffEditor.insertedTextBorder#40806800
diffEditor.removedLineBackground#90485815
diffEditor.removedTextBackground#90485820
diffEditor.removedTextBorder#90485800
diffEditorGutter.insertedLineBackground#40806830
diffEditorGutter.removedLineBackground#90485830
diffEditorOverview.insertedForeground#408068
diffEditorOverview.removedForeground#904858
dropdown.background#FFFFFF
dropdown.border#c0d0e0
dropdown.foreground#1a2848
dropdown.listBackground#FFFFFF
editor.background#f6f9fc
editor.findMatchBackground#30587850
editor.findMatchHighlightBackground#30587825
editor.focusedStackFrameHighlightBackground#40806830
editor.foldBackground#30587810
editor.foreground#1a2848
editor.lineHighlightBackground#e8f0f8
editor.lineHighlightBorder#30587820
editor.selectionBackground#30587840
editor.stackFrameHighlightBackground#88704830
editor.wordHighlightBackground#30587820
editor.wordHighlightStrongBackground#30587840
editorBracketHighlight.foreground1#305878
editorBracketHighlight.foreground2#287088
editorBracketHighlight.foreground3#685080
editorBracketHighlight.foreground4#408068
editorBracketHighlight.foreground5#887048
editorBracketHighlight.foreground6#406898
editorBracketHighlight.unexpectedBracket.foreground#904858
editorBracketMatch.background#30587830
editorBracketMatch.border#305878
editorCodeLens.foreground#8898b0
editorCursor.foreground#305878
editorError.border#90485800
editorError.foreground#904858
editorGroup.border#c0d0e0
editorGroup.dropBackground#30587830
editorGroup.dropIntoPromptBackground#e8f0f8
editorGroup.dropIntoPromptBorder#305878
editorGroup.dropIntoPromptForeground#1a2848
editorGroup.emptyBackground#e8f0f8
editorGroup.focusedEmptyBorder#305878
editorGroupHeader.tabsBackground#e8f0f8
editorGutter.addedBackground#408068
editorGutter.deletedBackground#904858
editorGutter.modifiedBackground#305878
editorHint.border#40806800
editorHint.foreground#408068
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#c0d0e0
editorIndentGuide.activeBackground1#305878
editorIndentGuide.background1#d8e4f0
editorInfo.border#30587800
editorInfo.foreground#305878
editorInlayHint.background#d8e4f080
editorInlayHint.foreground#607080
editorInlayHint.parameterForeground#406898
editorInlayHint.typeForeground#305878
editorLineNumber.activeForeground#305878
editorLineNumber.foreground#8898b0
editorOverviewRuler.addedForeground#408068
editorOverviewRuler.background#e8f0f8
editorOverviewRuler.border#c0d0e0
editorOverviewRuler.bracketMatchForeground#305878
editorOverviewRuler.commonContentForeground#607080
editorOverviewRuler.currentContentForeground#408068
editorOverviewRuler.deletedForeground#904858
editorOverviewRuler.errorForeground#904858
editorOverviewRuler.findMatchForeground#30587880
editorOverviewRuler.incomingContentForeground#305878
editorOverviewRuler.infoForeground#305878
editorOverviewRuler.modifiedForeground#305878
editorOverviewRuler.rangeHighlightForeground#30587840
editorOverviewRuler.selectionHighlightForeground#30587860
editorOverviewRuler.warningForeground#887048
editorOverviewRuler.wordHighlightForeground#30587860
editorOverviewRuler.wordHighlightStrongForeground#30587880
editorStickyScroll.background#e8f0f8
editorStickyScrollHover.background#d8e4f0
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.foreground#1a2848
editorSuggestWidget.highlightForeground#305878
editorSuggestWidget.selectedBackground#d8e4f0
editorWarning.border#88704800
editorWarning.foreground#887048
editorWhitespace.foreground#c0d0e0
editorWidget.background#e8f0f8
editorWidget.border#c0d0e0
editorWidget.foreground#1a2848
errorForeground#904858
extensionBadge.remoteBackground#4888a0
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#305878
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#204060
extensionIcon.preReleaseForeground#685080
extensionIcon.sponsorForeground#a07888
extensionIcon.starForeground#887048
extensionIcon.verifiedForeground#408068
focusBorder#305878
gitDecoration.addedResourceForeground#408068
gitDecoration.conflictingResourceForeground#685080
gitDecoration.deletedResourceForeground#904858
gitDecoration.ignoredResourceForeground#a0b0c0
gitDecoration.modifiedResourceForeground#305878
gitDecoration.untrackedResourceForeground#887048
icon.foreground#305878
input.background#FFFFFF
input.border#305878
input.foreground#1a2848
input.placeholderForeground#8898b0
inputOption.activeBackground#305878
inputOption.activeForeground#FFFFFF
keybindingLabel.background#d8e4f0
keybindingLabel.border#c0d0e0
keybindingLabel.bottomBorder#8898b0
keybindingLabel.foreground#1a2848
list.activeSelectionBackground#305878
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#30587840
list.focusForeground#1a2848
list.hoverBackground#d8e4f0
list.hoverForeground#1a2848
list.inactiveSelectionBackground#30587830
list.inactiveSelectionForeground#1a2848
menu.background#FFFFFF
menu.border#c0d0e0
menu.foreground#1a2848
menu.selectionBackground#305878
menu.selectionBorder#30587800
menu.selectionForeground#FFFFFF
menu.separatorBackground#c0d0e0
menubar.selectionBackground#d8e4f0
menubar.selectionForeground#1a2848
merge.border#c0d0e0
merge.commonContentBackground#60708020
merge.commonHeaderBackground#60708040
merge.currentContentBackground#40806820
merge.currentHeaderBackground#40806840
merge.incomingContentBackground#30587820
merge.incomingHeaderBackground#30587840
mergeEditor.change.background#30587820
mergeEditor.change.word.background#30587840
mergeEditor.conflict.handledFocused.border#408068
mergeEditor.conflict.handledUnfocused.border#40806880
mergeEditor.conflict.unhandledFocused.border#887048
mergeEditor.conflict.unhandledUnfocused.border#88704880
minimap.background#e8f0f8
minimap.selectionHighlight#30587840
notifications.background#FFFFFF
notifications.border#c0d0e0
notifications.foreground#1a2848
notificationsErrorIcon.foreground#904858
notificationsInfoIcon.foreground#305878
notificationsWarningIcon.foreground#887048
panel.background#e8f0f8
panel.border#c0d0e0
panelTitle.activeBorder#305878
panelTitle.activeForeground#1a2848
panelTitle.inactiveForeground#607080
peekView.border#305878
peekViewEditor.background#e8f0f8
peekViewResult.background#e8f0f8
peekViewResult.matchHighlightBackground#30587840
peekViewTitle.background#305878
peekViewTitleLabel.foreground#f6f9fc
progressBar.background#305878
quickInput.background#e8f0f8
quickInput.foreground#1a2848
quickInputList.focusBackground#305878
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#305878
scrollbarSlider.activeBackground#305878
scrollbarSlider.background#30587840
scrollbarSlider.hoverBackground#30587880
selection.background#30587840
settings.checkboxBackground#FFFFFF
settings.checkboxBorder#305878
settings.checkboxForeground#1a2848
settings.dropdownBackground#FFFFFF
settings.dropdownBorder#c0d0e0
settings.dropdownForeground#1a2848
settings.dropdownListBorder#c0d0e0
settings.focusedRowBackground#d8e4f040
settings.focusedRowBorder#30587880
settings.headerForeground#1a2848
settings.modifiedItemIndicator#305878
settings.numberInputBackground#FFFFFF
settings.numberInputBorder#305878
settings.numberInputForeground#1a2848
settings.rowHoverBackground#d8e4f020
settings.sashBorder#c0d0e0
settings.textInputBackground#FFFFFF
settings.textInputBorder#305878
settings.textInputForeground#1a2848
sideBar.background#e8f0f8
sideBar.border#c0d0e0
sideBar.foreground#1a2848
sideBarSectionHeader.background#d8e4f0
sideBarSectionHeader.foreground#1a2848
sideBarTitle.foreground#305878
statusBar.background#305878
statusBar.debuggingBackground#1a2848
statusBar.debuggingForeground#f6f9fc
statusBar.foreground#f6f9fc
statusBar.noFolderBackground#1a2848
statusBar.noFolderForeground#f6f9fc
symbolIcon.arrayForeground#305878
symbolIcon.booleanForeground#305878
symbolIcon.classForeground#1a2848
symbolIcon.colorForeground#4888a0
symbolIcon.constantForeground#406898
symbolIcon.constructorForeground#685080
symbolIcon.enumeratorForeground#887048
symbolIcon.enumeratorMemberForeground#406898
symbolIcon.eventForeground#887048
symbolIcon.fieldForeground#406898
symbolIcon.fileForeground#607080
symbolIcon.folderForeground#607080
symbolIcon.functionForeground#305878
symbolIcon.interfaceForeground#408068
symbolIcon.keyForeground#305878
symbolIcon.keywordForeground#305878
symbolIcon.methodForeground#305878
symbolIcon.moduleForeground#685080
symbolIcon.namespaceForeground#685080
symbolIcon.nullForeground#904858
symbolIcon.numberForeground#406898
symbolIcon.objectForeground#1a2848
symbolIcon.operatorForeground#607080
symbolIcon.packageForeground#685080
symbolIcon.propertyForeground#305878
symbolIcon.referenceForeground#406898
symbolIcon.snippetForeground#607080
symbolIcon.stringForeground#287088
symbolIcon.structForeground#1a2848
symbolIcon.textForeground#1a2848
symbolIcon.typeParameterForeground#408068
symbolIcon.unitForeground#406898
symbolIcon.variableForeground#1a2848
tab.activeBackground#f6f9fc
tab.activeBorder#305878
tab.activeForeground#305878
tab.border#c0d0e0
tab.hoverBackground#f6f9fc
tab.hoverForeground#305878
tab.inactiveBackground#e8f0f8
tab.inactiveForeground#607080
terminal.ansiBlack#1a2848
terminal.ansiBlue#305878
terminal.ansiBrightBlack#607080
terminal.ansiBrightBlue#406890
terminal.ansiBrightCyan#3888a0
terminal.ansiBrightGreen#509878
terminal.ansiBrightMagenta#786090
terminal.ansiBrightRed#a86068
terminal.ansiBrightWhite#b0c0d0
terminal.ansiBrightYellow#a08858
terminal.ansiCyan#287088
terminal.ansiGreen#408068
terminal.ansiMagenta#685080
terminal.ansiRed#904858
terminal.ansiWhite#8898b0
terminal.ansiYellow#887048
terminal.background#f6f9fc
terminal.foreground#1a2848
testing.iconErrored#904858
testing.iconFailed#904858
testing.iconPassed#408068
testing.iconQueued#887048
testing.iconSkipped#a0b0c0
testing.iconUnset#a0b0c0
testing.peekBorder#904858
testing.peekHeaderBackground#90485820
testing.runAction#408068
textLink.activeForeground#1a2848
textLink.foreground#305878
titleBar.activeBackground#1a2848
titleBar.activeForeground#f6f9fc
titleBar.inactiveBackground#e8f0f8
titleBar.inactiveForeground#607080
walkThrough.embeddedEditorBackground#e8f0f8
welcomePage.background#f6f9fc
welcomePage.progress.background#c0d0e0
welcomePage.progress.foreground#305878
welcomePage.tileBackground#e8f0f8
welcomePage.tileBorder#c0d0e0
welcomePage.tileHoverBackground#d8e4f0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#708090	italic
keyword, storage	#305878	bold
entity.name.function, support.function	#206070	bold
entity.name.type, support.class, support.type, storage.type	#1a2848	bold
string	#306858	—
constant.character.escape	#305878	—
variable, support.variable	#1a2848	—
constant.numeric, constant.character, constant	#406898	—
constant.language, support.constant, variable.language	#305878	—
keyword.operator	#4a5868	—
punctuation	#506070	—
entity.name.tag	#305878	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#406898	italic
meta.selector, entity.name.tag.css	#1a2848	—
meta.property-name, support.type.property-name	#305878	—
meta.property-value, support.constant.property-value	#306858	—
markup.heading	#305878	bold
markup.bold	#1a2848	bold
markup.italic	#1a2848	italic
meta.link	#305878	—
markup.list	#305878	—
markup.inline.raw	#306858	—
markup.inserted	#408068	—
markup.deleted	#904858	—
markup.changed	#305878	—

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