search

donavon / use-dark-mode

A custom React Hook to help you implement a "dark mode" component.
MIT License
1.29k stars 98 forks source link

System query causes initial mode to ignore initialState value #54

Open abbott opened 4 years ago

abbott commented 4 years ago

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 commented 3 years ago

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
);