packages/forkhorse-dashboard/src/theme.ts

1import { applyAccentColor, type GatekeeperAppTheme } from "@gadgets/workshop-shared/theme";
2import tokens from "./host-tokens.json" with { type: "json" };
3
4/** Reviewed host tokens live in JSON; components consume semantic variables only. */
5export function applyAppTheme(theme: GatekeeperAppTheme, document: Document = globalThis.document) {
6  const root = document.documentElement;
7  root.dataset.mode = theme.mode;
8  root.style.colorScheme = theme.mode;
9  const defaults = Object.entries({ ...tokens.shared, ...tokens[theme.mode] });
10  for (const [name, value] of defaults) root.style.setProperty(name, value);
11  applyAccentColor(root.style, theme.accentColor);
12  // Clearing an accent removes inline variables; restore the reviewed default seed tokens.
13  for (const [name, value] of defaults)
14    if (!root.style.getPropertyValue(name)) root.style.setProperty(name, value);
15}
16
17/** The standalone copy tracks system changes; the embedded copy stops at host handoff. */
18export function followSystemTheme(document: Document = globalThis.document) {
19  const media = document.defaultView?.matchMedia?.("(prefers-color-scheme: dark)");
20  const update = () =>
21    applyAppTheme({ mode: media?.matches ? "dark" : "light", accentColor: null }, document);
22  update();
23  media?.addEventListener("change", update);
24  return () => media?.removeEventListener("change", update);
25}
26