A React context does not cross an island boundary

Every Astro island is its own render root. Two islands on the same page are therefore two distinct trees, mounted separately, sharing nothing.

That is what makes the trap costly: a React context wrapped around an island works perfectly — as long as there is only one. The day a second island needs the same value, it does not receive it, and nothing says so. No error, no warning: just a theme toggle in the footer that ignores the one in the navigation bar.

What does cross

A module. The bundler evaluates it once, so every island importing it gets the same instance. That holds for a nanostores store as much as for a plain exported object.

// theme.ts — a module, so a single instance for the whole page.
import { atom } from "nanostores";

export const $theme = atom<"dark" | "light">("dark");

Each island imports that file and subscribes:

import { $theme } from "./theme";

$theme.subscribe((theme) => {
  document.documentElement.dataset.theme = theme;
});

How we check

By rendering the same toggle twice, in two places on the page, and writing a test that clicks one and asserts the other followed. A property you never exercise is not a property: it is an intention.