Skip to main content

Stores & search

Stores

Reactive state stores available for client-side code:

// Theme store
import { $themeSetting, $resolvedTheme, cycleTheme } from "astro-pigment/stores/theme";

$themeSetting.get(); // "auto" | "light" | "dark"
$resolvedTheme.get(); // "light" | "dark"
cycleTheme(); // auto -> light -> dark -> auto

// Theme color axes — what ThemePicker writes, read by the CSS variable overrides
import { $hue, $saturation, DEFAULT_HUE, DEFAULT_SATURATION } from "astro-pigment/stores/theme";

$hue.get(); // string, "0"-"360", default "180"
$saturation.get(); // string, "0"-"100", default "50"

// Media queries
import { $prefersDarkScheme, $prefersReducedMotion, media } from "astro-pigment/stores/media";

$prefersDarkScheme.get(); // boolean
$prefersReducedMotion.get(); // boolean

// Build a store for any media query
const $isWide = media("(min-width: 64rem)");

Both stores are powered by nanostores. Theme setting, hue, and saturation all persist to localStorage.

Package manager store

From astro-pigment/stores/pkgManager:

import { $pkgManager } from "astro-pigment/stores/pkgManager";

$pkgManager.get(); // "pnpm" | "npm" | "yarn" | "bun"

Used by InstallPackage internally. Also available for custom CodePanels-based tab switchers via defineCodePanels:

import { defineCodePanels } from "astro-pigment/utils/defineCodePanels";
import { $pkgManager } from "astro-pigment/stores/pkgManager";

defineCodePanels("x-my-switcher", $pkgManager);

Full-text search is enabled by default (search: true). When enabled:

  • Injects a /search-index.json endpoint built from all docs (and extraEntries) at build time
  • Renders a search input in the Layout header that queries the index client-side
  • Extra entries with body are split into sections like docs; entries without body are indexed by title and description

To disable:

docsTheme({
  search: false,
  // ...
});
Theme copied