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 (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#080a10
activityBar.foreground#c8d8e8
activityBar.inactiveForeground#4a6080
activityBarBadge.background#4090b0
activityBarBadge.foreground#0a0c14
badge.background#4090b0
badge.foreground#0a0c14
breadcrumb.activeSelectionForeground#60b8d0
breadcrumb.background#0c1018
breadcrumb.focusForeground#c8d8e8
breadcrumb.foreground#5a7090
button.background#304870
button.foreground#c8d8e8
button.hoverBackground#406088
button.secondaryBackground#18283c
button.secondaryForeground#c8d8e8
button.secondaryHoverBackground#284050
charts.blue#6090c0
charts.foreground#c8d8e8
charts.green#80b0a0
charts.lines#c8d8e8
charts.orange#c0a080
charts.purple#a090b8
charts.red#a06070
charts.yellow#c0b080
checkbox.background#080a10
checkbox.border#304870
checkbox.foreground#c8d8e8
checkbox.selectBackground#304870
checkbox.selectBorder#4090b0
commandCenter.activeBackground#18283c
commandCenter.activeBorder#4090b0
commandCenter.activeForeground#60b8d0
commandCenter.background#0c1018
commandCenter.border#18283c
commandCenter.debuggingBackground#30487020
commandCenter.foreground#c8d8e8
commandCenter.inactiveBorder#18283c80
commandCenter.inactiveForeground#4a6080
debugConsole.errorForeground#c08088
debugConsole.infoForeground#60b8d0
debugConsole.sourceForeground#5a7090
debugConsole.warningForeground#c0b080
debugConsoleInputIcon.foreground#60b8d0
debugIcon.breakpointCurrentStackframeForeground#60b8d0
debugIcon.breakpointDisabledForeground#4a6080
debugIcon.breakpointForeground#c08088
debugIcon.breakpointStackframeForeground#80b0a0
debugIcon.breakpointUnverifiedForeground#c0b080
debugIcon.continueForeground#80b0a0
debugIcon.disconnectForeground#c08088
debugIcon.pauseForeground#c0b080
debugIcon.restartForeground#80b0a0
debugIcon.startForeground#80b0a0
debugIcon.stepBackForeground#60b8d0
debugIcon.stepIntoForeground#60b8d0
debugIcon.stepOutForeground#60b8d0
debugIcon.stepOverForeground#60b8d0
debugIcon.stopForeground#c08088
debugTokenExpression.boolean#60b8d0
debugTokenExpression.error#c08088
debugTokenExpression.name#c8d8e8
debugTokenExpression.number#80b0e0
debugTokenExpression.string#90c0b0
debugTokenExpression.value#60b8d0
debugToolBar.background#0c1018
debugToolBar.border#18283c
debugView.exceptionLabelBackground#a06070
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#60b8d0
debugView.stateLabelForeground#0a0c14
debugView.valueChangedHighlight#60b8d060
descriptionForeground#5a7090
diffEditor.diagonalFill#18283c40
diffEditor.insertedLineBackground#80b0a015
diffEditor.insertedTextBackground#80b0a020
diffEditor.insertedTextBorder#80b0a000
diffEditor.removedLineBackground#a0607015
diffEditor.removedTextBackground#a0607020
diffEditor.removedTextBorder#a0607000
diffEditorGutter.insertedLineBackground#80b0a030
diffEditorGutter.removedLineBackground#a0607030
diffEditorOverview.insertedForeground#80b0a0
diffEditorOverview.removedForeground#a06070
dropdown.background#080a10
dropdown.border#304870
dropdown.foreground#c8d8e8
dropdown.listBackground#0c1018
editor.background#0a0c14
editor.findMatchBackground#60b8d040
editor.findMatchHighlightBackground#60b8d020
editor.focusedStackFrameHighlightBackground#80b0a030
editor.foldBackground#30487015
editor.foreground#c8d8e8
editor.lineHighlightBackground#101828
editor.lineHighlightBorder#18283830
editor.selectionBackground#30487050
editor.stackFrameHighlightBackground#c0b08030
editor.wordHighlightBackground#30487030
editor.wordHighlightStrongBackground#30487050
editorBracketHighlight.foreground1#60b8d0
editorBracketHighlight.foreground2#80b0e0
editorBracketHighlight.foreground3#a090b8
editorBracketHighlight.foreground4#80b0a0
editorBracketHighlight.foreground5#c0b080
editorBracketHighlight.foreground6#6090c0
editorBracketHighlight.unexpectedBracket.foreground#c08088
editorBracketMatch.background#40608030
editorBracketMatch.border#4090b0
editorCodeLens.foreground#5a7090
editorCursor.foreground#60b8d0
editorError.border#c0808800
editorError.foreground#c08088
editorGroup.border#18283c
editorGroup.dropBackground#30487030
editorGroup.dropIntoPromptBackground#0c1018
editorGroup.dropIntoPromptBorder#4090b0
editorGroup.dropIntoPromptForeground#c8d8e8
editorGroup.emptyBackground#0c1018
editorGroup.focusedEmptyBorder#4090b0
editorGroupHeader.tabsBackground#0c1018
editorGutter.addedBackground#609080
editorGutter.deletedBackground#a06070
editorGutter.modifiedBackground#6090c0
editorHint.border#80b0a000
editorHint.foreground#80b0a0
editorHoverWidget.background#0c1018
editorHoverWidget.border#18283c
editorIndentGuide.activeBackground1#4080a0
editorIndentGuide.background1#18283c
editorInfo.border#60b8d000
editorInfo.foreground#60b8d0
editorInlayHint.background#18283c80
editorInlayHint.foreground#5a7090
editorInlayHint.parameterForeground#80b0e0
editorInlayHint.typeForeground#60b8d0
editorLineNumber.activeForeground#80b0d0
editorLineNumber.foreground#4a6080
editorOverviewRuler.addedForeground#80b0a0
editorOverviewRuler.background#0c1018
editorOverviewRuler.border#18283c
editorOverviewRuler.bracketMatchForeground#4090b0
editorOverviewRuler.commonContentForeground#5a7090
editorOverviewRuler.currentContentForeground#80b0a0
editorOverviewRuler.deletedForeground#a06070
editorOverviewRuler.errorForeground#c08088
editorOverviewRuler.findMatchForeground#60b8d080
editorOverviewRuler.incomingContentForeground#6090c0
editorOverviewRuler.infoForeground#60b8d0
editorOverviewRuler.modifiedForeground#6090c0
editorOverviewRuler.rangeHighlightForeground#30487040
editorOverviewRuler.selectionHighlightForeground#30487060
editorOverviewRuler.warningForeground#c0b080
editorOverviewRuler.wordHighlightForeground#30487060
editorOverviewRuler.wordHighlightStrongForeground#30487080
editorStickyScroll.background#0c1018
editorStickyScrollHover.background#18283c
editorSuggestWidget.background#0c1018
editorSuggestWidget.foreground#c8d8e8
editorSuggestWidget.highlightForeground#60b8d0
editorSuggestWidget.selectedBackground#304870
editorWarning.border#c0b08000
editorWarning.foreground#c0b080
editorWhitespace.foreground#283848
editorWidget.background#0c1018
editorWidget.border#18283c
editorWidget.foreground#c8d8e8
errorForeground#c08088
extensionBadge.remoteBackground#4090b0
extensionBadge.remoteForeground#0a0c14
extensionButton.prominentBackground#304870
extensionButton.prominentForeground#c8d8e8
extensionButton.prominentHoverBackground#406088
extensionIcon.preReleaseForeground#a090b8
extensionIcon.sponsorForeground#60b8d0
extensionIcon.starForeground#c0b080
extensionIcon.verifiedForeground#80b0a0
focusBorder#4090b0
gitDecoration.addedResourceForeground#80b0a0
gitDecoration.conflictingResourceForeground#a090b8
gitDecoration.deletedResourceForeground#a06070
gitDecoration.ignoredResourceForeground#4a6080
gitDecoration.modifiedResourceForeground#6090c0
gitDecoration.untrackedResourceForeground#c0b080
icon.foreground#c8d8e8
input.background#080a10
input.border#304870
input.foreground#c8d8e8
input.placeholderForeground#4a6080
inputOption.activeBackground#304870
inputOption.activeForeground#FFFFFF
keybindingLabel.background#18283c
keybindingLabel.border#18283c
keybindingLabel.bottomBorder#4a6080
keybindingLabel.foreground#c8d8e8
list.activeSelectionBackground#304870
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#80c0e0
list.focusBackground#304870
list.focusForeground#FFFFFF
list.hoverBackground#18283c
list.hoverForeground#c8d8e8
list.inactiveSelectionBackground#20384850
list.inactiveSelectionForeground#c8d8e8
menu.background#080a10
menu.border#18283c
menu.foreground#c8d8e8
menu.selectionBackground#304870
menu.selectionBorder#30487000
menu.selectionForeground#FFFFFF
menu.separatorBackground#18283c
menubar.selectionBackground#18283c
menubar.selectionForeground#c8d8e8
merge.border#18283c
merge.commonContentBackground#5a709020
merge.commonHeaderBackground#5a709040
merge.currentContentBackground#80b0a020
merge.currentHeaderBackground#80b0a040
merge.incomingContentBackground#6090c020
merge.incomingHeaderBackground#6090c040
mergeEditor.change.background#6090c020
mergeEditor.change.word.background#6090c040
mergeEditor.conflict.handledFocused.border#80b0a0
mergeEditor.conflict.handledUnfocused.border#80b0a080
mergeEditor.conflict.unhandledFocused.border#c0b080
mergeEditor.conflict.unhandledUnfocused.border#c0b08080
minimap.background#0c1018
minimap.selectionHighlight#30487050
notifications.background#0c1018
notifications.border#18283c
notifications.foreground#c8d8e8
notificationsErrorIcon.foreground#c08088
notificationsInfoIcon.foreground#60b8d0
notificationsWarningIcon.foreground#c0b080
panel.background#0c1018
panel.border#18283c
panelTitle.activeBorder#4090b0
panelTitle.activeForeground#c8d8e8
panelTitle.inactiveForeground#5a7090
peekView.border#4090b0
peekViewEditor.background#0c1018
peekViewResult.background#0c1018
peekViewResult.matchHighlightBackground#60b8d040
peekViewTitle.background#18283c
peekViewTitleLabel.foreground#c8d8e8
progressBar.background#4090b0
quickInput.background#0c1018
quickInput.foreground#c8d8e8
quickInputList.focusBackground#304870
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#80c0e0
quickInputTitle.background#18283c
scrollbarSlider.activeBackground#4090b0
scrollbarSlider.background#30487050
scrollbarSlider.hoverBackground#304870
selection.background#304870
settings.checkboxBackground#080a10
settings.checkboxBorder#304870
settings.checkboxForeground#c8d8e8
settings.dropdownBackground#080a10
settings.dropdownBorder#18283c
settings.dropdownForeground#c8d8e8
settings.dropdownListBorder#18283c
settings.focusedRowBackground#18283c40
settings.focusedRowBorder#4090b080
settings.headerForeground#c8d8e8
settings.modifiedItemIndicator#4090b0
settings.numberInputBackground#080a10
settings.numberInputBorder#304870
settings.numberInputForeground#c8d8e8
settings.rowHoverBackground#18283c20
settings.sashBorder#18283c
settings.textInputBackground#080a10
settings.textInputBorder#304870
settings.textInputForeground#c8d8e8
sideBar.background#0c1018
sideBar.border#18283c
sideBar.foreground#c8d8e8
sideBarSectionHeader.background#18283c
sideBarSectionHeader.foreground#c8d8e8
sideBarTitle.foreground#60b8d0
statusBar.background#182848
statusBar.debuggingBackground#4090b0
statusBar.debuggingForeground#0a0c14
statusBar.foreground#c8d8e8
statusBar.noFolderBackground#0a0c14
statusBar.noFolderForeground#c8d8e8
symbolIcon.arrayForeground#c8d8e8
symbolIcon.booleanForeground#60b8d0
symbolIcon.classForeground#60b8d0
symbolIcon.colorForeground#80b0e0
symbolIcon.constantForeground#80b0e0
symbolIcon.constructorForeground#a090b8
symbolIcon.enumeratorForeground#c0b080
symbolIcon.enumeratorMemberForeground#80b0e0
symbolIcon.eventForeground#c0b080
symbolIcon.fieldForeground#80b0e0
symbolIcon.fileForeground#5a7090
symbolIcon.folderForeground#5a7090
symbolIcon.functionForeground#60b8d0
symbolIcon.interfaceForeground#80b0a0
symbolIcon.keyForeground#c8d8e8
symbolIcon.keywordForeground#60b8d0
symbolIcon.methodForeground#60b8d0
symbolIcon.moduleForeground#a090b8
symbolIcon.namespaceForeground#a090b8
symbolIcon.nullForeground#a06070
symbolIcon.numberForeground#80b0e0
symbolIcon.objectForeground#c8d8e8
symbolIcon.operatorForeground#5a7090
symbolIcon.packageForeground#a090b8
symbolIcon.propertyForeground#c8d8e8
symbolIcon.referenceForeground#80b0e0
symbolIcon.snippetForeground#5a7090
symbolIcon.stringForeground#90c0b0
symbolIcon.structForeground#c8d8e8
symbolIcon.textForeground#c8d8e8
symbolIcon.typeParameterForeground#80b0a0
symbolIcon.unitForeground#80b0e0
symbolIcon.variableForeground#c8d8e8
tab.activeBackground#0a0c14
tab.activeBorder#4090b0
tab.activeForeground#80c0e0
tab.border#18283c
tab.hoverBackground#18283c
tab.hoverForeground#c8d8e8
tab.inactiveBackground#0c1018
tab.inactiveForeground#5a7090
terminal.ansiBlack#18283c
terminal.ansiBlue#6090c0
terminal.ansiBrightBlack#5a7090
terminal.ansiBrightBlue#80b0e0
terminal.ansiBrightCyan#80d0e8
terminal.ansiBrightGreen#a0d0c0
terminal.ansiBrightMagenta#c0b0d0
terminal.ansiBrightRed#d0a0a8
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#e0d0a0
terminal.ansiCyan#60b8d0
terminal.ansiGreen#80b0a0
terminal.ansiMagenta#a090b8
terminal.ansiRed#c08088
terminal.ansiWhite#c8d8e8
terminal.ansiYellow#c0b080
terminal.background#0a0c14
terminal.foreground#c8d8e8
testing.iconErrored#a06070
testing.iconFailed#a06070
testing.iconPassed#80b0a0
testing.iconQueued#c0b080
testing.iconSkipped#4a6080
testing.iconUnset#4a6080
testing.peekBorder#a06070
testing.peekHeaderBackground#a0607020
testing.runAction#80b0a0
textLink.activeForeground#80d0e8
textLink.foreground#60b8d0
titleBar.activeBackground#0c1018
titleBar.activeForeground#c8d8e8
titleBar.inactiveBackground#0a0c14
titleBar.inactiveForeground#4a6080
walkThrough.embeddedEditorBackground#0c1018
welcomePage.background#0a0c14
welcomePage.progress.background#18283c
welcomePage.progress.foreground#4090b0
welcomePage.tileBackground#0c1018
welcomePage.tileBorder#18283c
welcomePage.tileHoverBackground#18283c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#506880	italic
keyword, storage	#60b8d0	bold
entity.name.function, support.function	#80c8e0	bold
entity.name.type, support.class, support.type, storage.type	#c8d8e8	bold
string	#90c0b0	—
constant.character.escape	#60b8d0	—
variable, support.variable	#c8d8e8	—
constant.numeric, constant.character, constant	#98b8d8	—
constant.language, support.constant, variable.language	#80b0e0	—
keyword.operator	#8098b0	—
punctuation	#6888a8	—
entity.name.tag	#60b8d0	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#80c8e0	italic
meta.selector, entity.name.tag.css	#c8d8e8	—
meta.property-name, support.type.property-name	#60b8d0	—
meta.property-value, support.constant.property-value	#90c0b0	—
markup.heading	#60b8d0	bold
markup.bold	#c8d8e8	bold
markup.italic	#c8d8e8	italic
meta.link	#80b0e0	—
markup.list	#60b8d0	—
markup.inline.raw	#90c0b0	—
markup.inserted	#80b0a0	—
markup.deleted	#a06070	—
markup.changed	#6090c0	—

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