Persisting Theme and Preventing Flash

When a page loads, React must download, parse, and execute JavaScript before it can read localStorage and apply the correct theme. During this gap, the browser renders using the default styles. If the user prefers dark mode but your default is light, they see a brief white flash before the theme corrects itself.

The fix is an inline script placed in the document head that runs synchronously before any other code. This script reads localStorage immediately and sets data-theme on document.documentElement. Because it is a blocking script, the browser applies the attribute before painting any content.