Examples

Examples

Flatten an existing palette by adding material overrides after the Stipe stylesheet, next to an ordinary daisyUI custom theme:

@import "@fungi.computer/stipe/styles.css";

[data-theme="my-theme"] {
  --depth: 0;
  --noise: 0;
  --stipe-surface-frame-width: 1px;
  --stipe-surface-frame-image: linear-gradient(
    var(--color-base-300),
    var(--color-base-300)
  );
  --stipe-shadow-raised: none;
  --stipe-shadow-inset: none;
  --stipe-shadow-edge: none;
}

Theme an embedded widget with the owner’s accent:

import { embedThemeProperties } from "@fungi.computer/stipe";

const widget = document.querySelector<HTMLElement>("#widget");
if (widget) {
  const dark = matchMedia("(prefers-color-scheme: dark)").matches;
  widget.dataset.theme = dark ? "embed-dark" : "embed";
  const properties = embedThemeProperties({
    accent: "#2f9e44",
    fontFamily: "Inter",
  });
  for (const [name, value] of Object.entries(properties)) {
    widget.style.setProperty(name, value);
  }
}

Feed a terminal emulator the current theme’s colours:

import { getTheme, terminalPalette } from "@fungi.computer/stipe";

const palette = terminalPalette(getTheme() ?? "latte");
if (palette) {
  console.log(palette.background, palette.foreground, palette.red);
}

Style a Pierre file tree from the active theme:

import { pierreTreesStyle } from "@fungi.computer/stipe/pierre/trees";

const treeStyle = pierreTreesStyle({ compact: false, itemHeight: 28 });