don't gate children on `mounted` in a theme provider

reactnextjs

the usual recipe for "the theme depends on the client, so avoid a hydration mismatch" is this:

if (!mounted) return null; // don't do this in a provider

inside a leaf component that is fine. inside a provider that wraps your whole app it is a disaster: the prerendered html is an empty . the page looks right in a browser because react fills it in a tick later, but crawlers, og scrapers and anything reading the raw response see nothing at all.

what works instead:

  1. apply the theme class pre-paint with a small inline script in the layout, so there is no flash and no mismatch on the html element
  2. always render children
  3. expose mounted and gate only the specific bits of ui that read theme directly — for me that is one icon in the dock

the mismatch was never about the content. it was about one icon.