Skip to content
hypha.starlight

to chooseto openescto close

Getting started

Install the theme and add it to Starlight.

The theme is a Starlight plugin. It works with any Starlight site, new or existing, and needs no setup beyond the plugin.

Install

Section titled “Install”

  1. Install the theme from GitHub, at a release’s tag:

    Terminal window
    $ bun add github:hyphatech/starlight-theme-hypha#v0.6.2

  2. Add it to plugins in astro.config.mjs:

    astro.config.mjs
    import { defineConfig } from "astro/config";
    import starlight from "@astrojs/starlight";
    import starlightThemeHypha from "starlight-theme-hypha";
    

    export default defineConfig({
      integrations: [
        starlight({
          title: "docs",
          logo: { src: "./src/assets/mark.svg" },
          plugins: [starlightThemeHypha({ brand: "acme" })],
        }),
      ],
    });

  3. Start Astro and open localhost:4321:

    Terminal window
    $ bun run dev
    astro  ready in 412 ms

The site follows the visitor’s system, light or dark, with a control in the header to choose. Its palette is Hypha’s own.

Your mark

Section titled “Your mark”

A mark drawn for a dark ground disappears on a light one. Give Starlight one for each:

astro.config.mjs
starlight({
  logo: { dark: "./src/assets/mark.svg", light: "./src/assets/mark-dark.svg" },
});

Hypha’s own mark comes with the theme, as starlight-theme-hypha/assets/hypha.webp and hypha-day.webp.

Next

Section titled “Next”