expose CSS variables to avoid FOUC during SSR

[jpdriver]

Context:

• List of forked and to-be-forked dependencies facebook/docusaurus#6246
• refactor: mitigate FOUC when applying Prism theme facebook/docusaurus#7373
• Highlight component renders the wrong theme even though props are passed correctly #112

Useful info:

• https://www.joshwcomeau.com/react/dark-mode/

[carbonrobot]

Closing as SSR is now supported

[slorber]

@carbonrobot I looked at the PR and I'm not 100% sure this is solved.

SSR has never been the problem. We use this package in Docusaurus to render things at build time. Client components are still SSRed, and can use client-side hooks, unlike RSCs.

Removing client-side hooks only unlocks RSCs. SSR has always been supported, and the FOUC issue is probably still there. I don't see any alternative to using CSS env variables for styling tokens instead of using hardcoded colors.

The only case I can see where this would be solved is when the dark/light mode is stored in a cookie and where the SSR server is able to read it. But the color scheme is more likely to be stored in localStorage in many apps, and when using SSG, there's no cookie available at all at build time.

[carbonrobot]

@slorber Thanks, you are correct I may have closed this one prematurely.

I'm not sure a fix is possible for the dark/light mode FOUC. As you correctly pointed out we don't have that information available during SSR in order to know which mode to render. Any method to determine it would be dependent on the meta framework and any cache strategy used.

I will try to revisit the linked PR approach and see if its still the path forward.