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 - Wanderer (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#0a0f18
activityBar.foreground#dceef8
activityBar.inactiveForeground#6088a0
activityBarBadge.background#94cbcf
activityBarBadge.foreground#FFFFFF
badge.background#94cbcf
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#94cbcf
breadcrumb.background#1a2535
breadcrumb.focusForeground#dceef8
breadcrumb.foreground#7898b0
button.background#3c8ba2
button.foreground#FFFFFF
button.hoverBackground#5898d8
button.secondaryBackground#16255f
button.secondaryForeground#dceef8
button.secondaryHoverBackground#2a4f8f
charts.blue#b8d0f0
charts.foreground#dceef8
charts.green#70c8b0
charts.lines#2a3a4880
charts.orange#94cbcf
charts.purple#b8d0f0
charts.red#3c8ba2
charts.yellow#d0b868
checkbox.background#0a0f18
checkbox.border#2a3a4880
checkbox.foreground#dceef8
checkbox.selectBackground#3c8ba2
checkbox.selectBorder#3c8ba2
commandCenter.activeBackground#253550
commandCenter.activeBorder#3c8ba2
commandCenter.activeForeground#94cbcf
commandCenter.background#1a2535
commandCenter.border#253550
commandCenter.debuggingBackground#3c8ba220
commandCenter.foreground#dceef8
commandCenter.inactiveBorder#25355080
commandCenter.inactiveForeground#6088a0
debugConsole.errorForeground#3c8ba2
debugConsole.infoForeground#b8d0f0
debugConsole.sourceForeground#7898b0
debugConsole.warningForeground#d0b868
debugConsoleInputIcon.foreground#94cbcf
debugIcon.breakpointCurrentStackframeForeground#94cbcf
debugIcon.breakpointDisabledForeground#6088a0
debugIcon.breakpointForeground#3c8ba2
debugIcon.breakpointStackframeForeground#70c8b0
debugIcon.breakpointUnverifiedForeground#d0b868
debugIcon.continueForeground#70c8b0
debugIcon.disconnectForeground#3c8ba2
debugIcon.pauseForeground#d0b868
debugIcon.restartForeground#70c8b0
debugIcon.startForeground#70c8b0
debugIcon.stepBackForeground#94cbcf
debugIcon.stepIntoForeground#94cbcf
debugIcon.stepOutForeground#94cbcf
debugIcon.stepOverForeground#94cbcf
debugIcon.stopForeground#3c8ba2
debugTokenExpression.boolean#94cbcf
debugTokenExpression.error#3c8ba2
debugTokenExpression.name#dceef8
debugTokenExpression.number#b8d0f0
debugTokenExpression.string#b0d0e0
debugTokenExpression.value#94cbcf
debugToolBar.background#1a2535
debugToolBar.border#253550
debugView.exceptionLabelBackground#3c8ba2
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#3c8ba2
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#94cbcf60
descriptionForeground#7898b0
diffEditor.diagonalFill#25355040
diffEditor.insertedLineBackground#70c8b015
diffEditor.insertedTextBackground#70c8b020
diffEditor.insertedTextBorder#70c8b000
diffEditor.removedLineBackground#3c8ba215
diffEditor.removedTextBackground#3c8ba220
diffEditor.removedTextBorder#3c8ba200
diffEditorGutter.insertedLineBackground#70c8b030
diffEditorGutter.removedLineBackground#3c8ba230
diffEditorOverview.insertedForeground#70c8b0
diffEditorOverview.removedForeground#3c8ba2
dropdown.background#0a0f18
dropdown.border#2a3a4880
dropdown.foreground#dceef8
dropdown.listBackground#1a2535
editor.background#0f1820
editor.findMatchBackground#94cbcf50
editor.findMatchHighlightBackground#94cbcf25
editor.focusedStackFrameHighlightBackground#70c8b030
editor.foldBackground#3c8ba215
editor.foreground#dceef8
editor.lineHighlightBackground#151c28
editor.lineHighlightBorder#2a3a4840
editor.selectionBackground#94cbcf50
editor.stackFrameHighlightBackground#d0b86830
editor.wordHighlightBackground#3c8ba230
editor.wordHighlightStrongBackground#94cbcf50
editorBracketHighlight.foreground1#94cbcf
editorBracketHighlight.foreground2#3c8ba2
editorBracketHighlight.foreground3#b8d0f0
editorBracketHighlight.foreground4#70c8b0
editorBracketHighlight.foreground5#d0b868
editorBracketHighlight.foreground6#b8d0f0
editorBracketHighlight.unexpectedBracket.foreground#3c8ba2
editorBracketMatch.background#3c8ba240
editorBracketMatch.border#3c8ba2
editorCodeLens.foreground#6088a0
editorCursor.foreground#94cbcf
editorError.border#3c8ba200
editorError.foreground#3c8ba2
editorGroup.border#253550
editorGroup.dropBackground#3c8ba230
editorGroup.dropIntoPromptBackground#1a2535
editorGroup.dropIntoPromptBorder#3c8ba2
editorGroup.dropIntoPromptForeground#dceef8
editorGroup.emptyBackground#1a2535
editorGroup.focusedEmptyBorder#3c8ba2
editorGroupHeader.tabsBackground#1a2535
editorGutter.addedBackground#70c8b0
editorGutter.deletedBackground#3c8ba2
editorGutter.modifiedBackground#b8d0f0
editorHint.border#70c8b000
editorHint.foreground#70c8b0
editorHoverWidget.background#1a2535
editorHoverWidget.border#2a3a4880
editorIndentGuide.activeBackground1#3c8ba2
editorIndentGuide.background1#2a3a4880
editorInfo.border#b8d0f000
editorInfo.foreground#b8d0f0
editorInlayHint.background#25355080
editorInlayHint.foreground#88a8c8
editorInlayHint.parameterForeground#b8d0f0
editorInlayHint.typeForeground#94cbcf
editorLineNumber.activeForeground#94cbcf
editorLineNumber.foreground#6088a0
editorOverviewRuler.addedForeground#70c8b0
editorOverviewRuler.background#1a2535
editorOverviewRuler.border#253550
editorOverviewRuler.bracketMatchForeground#3c8ba2
editorOverviewRuler.commonContentForeground#7898b0
editorOverviewRuler.currentContentForeground#70c8b0
editorOverviewRuler.deletedForeground#3c8ba2
editorOverviewRuler.errorForeground#3c8ba2
editorOverviewRuler.findMatchForeground#94cbcf80
editorOverviewRuler.incomingContentForeground#b8d0f0
editorOverviewRuler.infoForeground#b8d0f0
editorOverviewRuler.modifiedForeground#b8d0f0
editorOverviewRuler.rangeHighlightForeground#3c8ba240
editorOverviewRuler.selectionHighlightForeground#94cbcf60
editorOverviewRuler.warningForeground#d0b868
editorOverviewRuler.wordHighlightForeground#94cbcf60
editorOverviewRuler.wordHighlightStrongForeground#3c8ba280
editorStickyScroll.background#1a2535
editorStickyScrollHover.background#253550
editorSuggestWidget.background#1a2535
editorSuggestWidget.foreground#dceef8
editorSuggestWidget.highlightForeground#94cbcf
editorSuggestWidget.selectedBackground#3c8ba2
editorWarning.border#d0b86800
editorWarning.foreground#d0b868
editorWhitespace.foreground#2a3a4860
editorWidget.background#1a2535
editorWidget.border#2a3a4880
editorWidget.foreground#dceef8
errorForeground#3c8ba2
extensionBadge.remoteBackground#3c8ba2
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#3c8ba2
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#16255f
extensionIcon.preReleaseForeground#94cbcf
extensionIcon.sponsorForeground#94cbcf
extensionIcon.starForeground#d0b868
extensionIcon.verifiedForeground#70c8b0
focusBorder#3c8ba2
gitDecoration.addedResourceForeground#70c8b0
gitDecoration.conflictingResourceForeground#3c8ba2
gitDecoration.deletedResourceForeground#3c8ba2
gitDecoration.ignoredResourceForeground#6088a0
gitDecoration.modifiedResourceForeground#b8d0f0
gitDecoration.untrackedResourceForeground#d0b868
icon.foreground#dceef8
input.background#0a0f18
input.border#2a3a4880
input.foreground#dceef8
input.placeholderForeground#6088a0
inputOption.activeBackground#3c8ba2
inputOption.activeForeground#FFFFFF
keybindingLabel.background#253550
keybindingLabel.border#253550
keybindingLabel.bottomBorder#6088a0
keybindingLabel.foreground#dceef8
list.activeSelectionBackground#3c8ba2
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#94cbcf50
list.focusForeground#dceef8
list.hoverBackground#253550
list.hoverForeground#dceef8
list.inactiveSelectionBackground#25355080
list.inactiveSelectionForeground#dceef8
menu.background#0a0f18
menu.border#253550
menu.foreground#dceef8
menu.selectionBackground#3c8ba2
menu.selectionBorder#3c8ba200
menu.selectionForeground#FFFFFF
menu.separatorBackground#2a3a4880
menubar.selectionBackground#253550
menubar.selectionForeground#dceef8
merge.border#253550
merge.commonContentBackground#7898b020
merge.commonHeaderBackground#7898b040
merge.currentContentBackground#70c8b020
merge.currentHeaderBackground#70c8b040
merge.incomingContentBackground#b8d0f020
merge.incomingHeaderBackground#b8d0f040
mergeEditor.change.background#b8d0f020
mergeEditor.change.word.background#b8d0f040
mergeEditor.conflict.handledFocused.border#70c8b0
mergeEditor.conflict.handledUnfocused.border#70c8b080
mergeEditor.conflict.unhandledFocused.border#d0b868
mergeEditor.conflict.unhandledUnfocused.border#d0b86880
minimap.background#1a2535
minimap.selectionHighlight#94cbcf60
notifications.background#1a2535
notifications.border#253550
notifications.foreground#dceef8
notificationsErrorIcon.foreground#3c8ba2
notificationsInfoIcon.foreground#b8d0f0
notificationsWarningIcon.foreground#d0b868
panel.background#1a2535
panel.border#253550
panelTitle.activeBorder#3c8ba2
panelTitle.activeForeground#dceef8
panelTitle.inactiveForeground#7898b0
peekView.border#3c8ba2
peekViewEditor.background#1a2535
peekViewResult.background#1a2535
peekViewResult.matchHighlightBackground#94cbcf50
peekViewTitle.background#253550
peekViewTitleLabel.foreground#dceef8
progressBar.background#3c8ba2
quickInput.background#1a2535
quickInput.foreground#dceef8
quickInputList.focusBackground#3c8ba2
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#253550
scrollbarSlider.activeBackground#3c8ba2
scrollbarSlider.background#2a3a4880
scrollbarSlider.hoverBackground#48404a
selection.background#94cbcf60
settings.checkboxBackground#0a0f18
settings.checkboxBorder#3c8ba2
settings.checkboxForeground#dceef8
settings.dropdownBackground#0a0f18
settings.dropdownBorder#253550
settings.dropdownForeground#dceef8
settings.dropdownListBorder#253550
settings.focusedRowBackground#25355040
settings.focusedRowBorder#3c8ba280
settings.headerForeground#dceef8
settings.modifiedItemIndicator#3c8ba2
settings.numberInputBackground#0a0f18
settings.numberInputBorder#3c8ba2
settings.numberInputForeground#dceef8
settings.rowHoverBackground#25355020
settings.sashBorder#253550
settings.textInputBackground#0a0f18
settings.textInputBorder#3c8ba2
settings.textInputForeground#dceef8
sideBar.background#1a2535
sideBar.border#253550
sideBar.foreground#dceef8
sideBarSectionHeader.background#253550
sideBarSectionHeader.foreground#dceef8
sideBarTitle.foreground#94cbcf
statusBar.background#3c8ba2
statusBar.debuggingBackground#16255f
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#0f1820
statusBar.noFolderForeground#dceef8
symbolIcon.arrayForeground#dceef8
symbolIcon.booleanForeground#94cbcf
symbolIcon.classForeground#b8d0f0
symbolIcon.colorForeground#94cbcf
symbolIcon.constantForeground#b8d0f0
symbolIcon.constructorForeground#94cbcf
symbolIcon.enumeratorForeground#d0b868
symbolIcon.enumeratorMemberForeground#b8d0f0
symbolIcon.eventForeground#d0b868
symbolIcon.fieldForeground#b8d0f0
symbolIcon.fileForeground#7898b0
symbolIcon.folderForeground#d0b868
symbolIcon.functionForeground#94cbcf
symbolIcon.interfaceForeground#70c8b0
symbolIcon.keyForeground#dceef8
symbolIcon.keywordForeground#94cbcf
symbolIcon.methodForeground#94cbcf
symbolIcon.moduleForeground#b8d0f0
symbolIcon.namespaceForeground#b8d0f0
symbolIcon.nullForeground#3c8ba2
symbolIcon.numberForeground#b8d0f0
symbolIcon.objectForeground#dceef8
symbolIcon.operatorForeground#7898b0
symbolIcon.packageForeground#b8d0f0
symbolIcon.propertyForeground#b8d0f0
symbolIcon.referenceForeground#b8d0f0
symbolIcon.snippetForeground#7898b0
symbolIcon.stringForeground#b0d0e0
symbolIcon.structForeground#dceef8
symbolIcon.textForeground#dceef8
symbolIcon.typeParameterForeground#70c8b0
symbolIcon.unitForeground#b8d0f0
symbolIcon.variableForeground#b8d0f0
tab.activeBackground#0f1820
tab.activeBorder#3c8ba2
tab.activeForeground#94cbcf
tab.border#253550
tab.hoverBackground#253550
tab.hoverForeground#dceef8
tab.inactiveBackground#1a2535
tab.inactiveForeground#7898b0
terminal.ansiBlack#253550
terminal.ansiBlue#b8d0f0
terminal.ansiBrightBlack#7898b0
terminal.ansiBrightBlue#b8d0f0
terminal.ansiBrightCyan#94cbcf
terminal.ansiBrightGreen#a0e8c8
terminal.ansiBrightMagenta#94cbcf
terminal.ansiBrightRed#f0b8d0
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#d8c870
terminal.ansiCyan#94cbcf
terminal.ansiGreen#70c8b0
terminal.ansiMagenta#94cbcf
terminal.ansiRed#3c8ba2
terminal.ansiWhite#dceef8
terminal.ansiYellow#d0b868
terminal.background#0f1820
terminal.foreground#dceef8
testing.iconErrored#3c8ba2
testing.iconFailed#3c8ba2
testing.iconPassed#70c8b0
testing.iconQueued#d0b868
testing.iconSkipped#6088a0
testing.iconUnset#6088a0
testing.peekBorder#3c8ba2
testing.peekHeaderBackground#3c8ba220
testing.runAction#70c8b0
textLink.activeForeground#94cbcf
textLink.foreground#94cbcf
titleBar.activeBackground#1a2535
titleBar.activeForeground#dceef8
titleBar.inactiveBackground#0f1820
titleBar.inactiveForeground#6088a0
walkThrough.embeddedEditorBackground#1a2535
welcomePage.background#0f1820
welcomePage.progress.background#253550
welcomePage.progress.foreground#3c8ba2
welcomePage.tileBackground#1a2535
welcomePage.tileBorder#253550
welcomePage.tileHoverBackground#253550

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7898b0	italic
keyword, storage	#94cbcf	bold
keyword.control, keyword.control.flow	#94cbcf	bold
entity.name.function, support.function	#b8d0f0	bold
entity.name.type, support.class, support.type, storage.type	#a0c0d8	bold
string	#b0d0e0	—
constant.character.escape	#3c8ba2	—
variable, support.variable	#dceef8	—
variable.parameter	#a0c0d0	italic
constant.numeric, constant.character, constant	#b8d0f0	—
constant.language, support.constant, variable.language	#94cbcf	—
keyword.operator	#8098c0	—
punctuation	#8090b0	—
entity.name.tag	#94cbcf	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#94cbcf	italic
meta.selector, entity.name.tag.css	#dceef8	—
meta.property-name, support.type.property-name	#94cbcf	—
meta.property-value, support.constant.property-value	#b0d0e0	—
keyword.other.unit	#b8d0f0	—
markup.heading	#94cbcf	bold
markup.bold	#dceef8	bold
markup.italic	#dceef8	italic
meta.link	#94cbcf	—
markup.list	#94cbcf	—
markup.inline.raw	#b0d0e0	—
markup.inserted	#70c8b0	—
markup.deleted	#3c8ba2	—
markup.changed	#b8d0f0	—
support.type.property-name.json	#94cbcf	—
entity.name.tag.yaml	#94cbcf	—
string.regexp	#3c8ba2	—
meta.decorator, meta.annotation	#d0b868	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}!`;
}