Theming issue when using SSR

[renbaoshuo]

Description

When the colorMode property of <ThemeProvider /> is set to auto and SSR is used, it will still be displayed in light mode on browsers that prefer dark mode.

Steps to reproduce

1. Set the colorMode property of <ThemeProvider /> to auto.
2. Perform Next.js SSR / SSG rendering.
3. Open the page on the browser that prefers dark mode.
4. The displayed color scheme is day, not night.

Temporary patch

Add a hook named useAutoColorMode.

import { useEffect, useState } from 'react';

import useMediaQuery from '@/hooks/useMediaQuery';

enum ComponentColorMode {
 auto = 'auto',
 day = 'day',
 night = 'night',
}

const useAutoColorMode = () => {
 const [colorMode, setColorMode] = useState(ComponentColorMode.day);
 const darkModeEnabled = useMediaQuery('(prefers-color-scheme: dark)');

 useEffect(() => {
 setColorMode(
 darkModeEnabled ? ComponentColorMode.night : ComponentColorMode.day
 );
 }, [darkModeEnabled]);

 return colorMode;
};

export default useAutoColorMode;

Manually set colorMode in App.tsx.

const App = () => {
+ const colorMode = useAutoColorMode();

 // ...

 return (
- <ThemeProvider colorMode="auto" preventSSRMismatch>
+ <ThemeProvider colorMode={colorMode} preventSSRMismatch>

Version

v35.16.0

Browser

Chrome

[renbaoshuo]

It seems that these updates are being automated batched in React 18 and it causes this problem.

https://github.com/primer/react/blob/main/src/ThemeProvider.tsx#L87-L89

[siddharthkp]

Ouch! That's definitely a bug.

Short term, one option is to delay the second setColorMode by either putting it in a timeout or by flushing updates before it.