System query causes initial mode to ignore initialState value

[abbott]

System query causes initial mode to ignore initialState value — is this a feature or a bug?

If a site prioritizes a particular mode by setting initialState then system preference would be ignored. The user would have to manually change the site preference, otherwise if initialState is null, then the system preference is used.

[tom-sherman]

Hi, if I'm understanding you correctly you can solve this using the matchMedia API. Here's how I did it:

https://github.com/NorfolkDev/norfolkdevelopers-website/blob/39c988376c38976f9eaa2dfac3638c6fd938ec14/src/components/DarkModeToggle.tsx#L7-L10

const darkMode = useDarkMode(
  window.matchMedia('(prefers-color-scheme: dark)').matches
);