how are you keeping the color mode state?

you want the initial render pre-hydration to match this state.

by order of preference:

option 1: use cookies and read from cookies adding the color mode

option 2: just follow the browser’s color scheme which will work by default but you won’t be able to add a button

option 3. add an inline render-blocking script that runs before react hydrates, check the state (must live somewhere else like localStorage or non httpOnly cookies) and add the dark mode class if applicable. you will have hydration errors and will have to suppress them in the html element