ThemeSwitcherIcon mismatch on first render - Dark Mode

[kiurious]

Tested on Windows.
When your preference OS theme is set to 'dark', the page originally loads the dark theme, but fails to update the icon to the dark version on first render.
I think this is a mismatch between SSR and CSR. You can only see this on the build version and after clicking on the button once, it starts syncs correctly.
When building, document is not available so it defaults to 'light'. And then because the state is not set using the useEffect on ThemeSwitcher, the button is not being reloaded with the current state. The same happens with the aria-pressed state of the button, it also displays wrong info on first load theme==="dark".

I tried logging the state before and after, and it all points to dark, so it seems to be an issue with how it is being done with SSR.
By updating the state it causes the button to be correctly shown on first render, as it force triggers CSR:

...
const [reload, setReload] = useState(false);

 useEffect(() => {
    document.documentElement.dataset.theme = theme;
    localStorage.setItem('selected_theme', theme);
    setReload(true)
  }, [theme]);
  ...
  
  {reload && <ThemeSwitcherIcon mode={theme} />}
  

But I think the above is not an elegant solution, so I did not submit a PR. I couldn't find a way to avoid the mismatch, either through the onRenderBody function or on the ThemeSwitcher function.