Quickstart

Import the stylesheet once, then set and watch the theme. This browser snippet shows the current theme in a status element and switches the page to mocha:

import { applyTheme, getTheme, subscribeTheme } from "@fungi.computer/stipe";
import "@fungi.computer/stipe/styles.css";

function watchThemeStatus(status: Element): () => void {
  status.replaceChildren(getTheme() ?? "latte");
  return subscribeTheme((theme) => status.replaceChildren(theme));
}

const status = document.querySelector("[data-theme-status]");
if (status) {
  const stopObserving = watchThemeStatus(status);
  applyTheme("mocha");
  // Call stopObserving() when you tear down this view.
}

Without any data-theme, the page follows the reader’s appearance setting with latte (light) or mocha (dark). Spacing utilities such as p-lg and gap-sm work right away.