SSR with dark mode

[ben-davis]

I've recently added SSR to an app that supports dark mode. Dark mode is supported by using useColorScheme to switch styles (styles.buttonDarkMode vs styles.buttonLightMode). SSR is handled as per the docs. The issue is obviously that useColorScheme returns light during SSR, so the HTML returned possibly won't match the HTML rendered client-side after mounting. This reveals itself in either the entire app flashing its light mode before switching to dark, or in parts of the app rendered light, and some dark, depending on what gets re-rendered during the initial hydrated render.

The only solution I can see is to have the dark mode be entirely driven within CSS, which based on my understanding of Stylesheet on web, probably isn't possible.

Has anyone had any experience with this? Any solutions?

You can see an example of what I'm talking about here (pre-release version of the app I'm building): https://coolstuff.app/ben. Switch to dark mode and you should see a weird mix of light and dark.

[edkimmel]

While not perfect, I've had success capturing the user's theme to a cookie and reading from that during SSR. This also lets the user toggle light vs dark for your site independent of system settings if this becomes the source of truth for the client side rendering as well.

If you use google.com's automatic theming based on system settings, you'll notice it occasionally also picks light mode when it should have been dark, but sticks with the theme chosen by SSR in those instances. A hard refresh brings back dark mode ssr and csr.