$registry

To share state between components you can create a global registry with $registry. A registry is a special store that can be manipulated by updating individual keys. From a registry you can get smaller stores that only react to the specified keys.

const registry = $registry<{ app: { title: string, theme: "light" | "dark" }}>({
    app: {
        title: "home",
        theme: "dark"
    }    
});

const theme = registry.derive("app.theme");
$element("div", {},

    $head($element("title", {}, registry.derive("app.title", (title) => `ceres · ${title}`))),
    $body({
            style: {
                position: "fixed",
                top: 0,
                left: 0,
                width: "100vw",
                height: "100vh",
                backgroundColor: $derive([theme], ([theme]) => theme === "dark" ? "black" : "white"),
                color: $derive([theme], ([theme]) => theme === "dark" ? "white" : "black"),
            }
        }
    ),
    $element("button", {
        on: {
            click: () => registry.setKey("app.theme", theme.value === "dark" ? "light" : "dark")}
        },
        "Change theme"
    ),
    $element("span", {}, "ceres")
)
.mount(document.body);