Add event listeners in the dark mode section to listen for theme changes

[lawvs]

In the current dark mode, if the system preference theme changes, the application will not reflect the change.

I recommend adding an event listener to observe theme changes.

It also can resolve the #1757

Vite

Add new useSystemPreferenceDark hook

type ResolvedTheme = "dark" | "light";
type Theme = SystemTheme | "system";

const query = "(prefers-color-scheme: dark)";

export function useSystemPreferenceDark() {
  const [isDark, setIsDark] = useState<boolean>(false);
  useEffect(() => {
    const listener = (e: MediaQueryListEvent) => setIsDark(e.matches);
    setIsDark(window.matchMedia(query).matches);
    const queryMedia = window.matchMedia(query);
    queryMedia.addEventListener("change", listener);
    return () => queryMedia.removeEventListener("change", listener);
  }, []);
  return isDark;
}

Update ThemeProvider, add a new resolvedTheme value in useTheme

type ThemeProviderState = {
  theme: Theme;
+  resolvedTheme: ResolvedTheme;
  setTheme: (theme: Theme) => void;
};

export function ThemeProvider() {
+  const systemPreferenceTheme = useSystemPreferenceDark() ? "dark" : "light";
+  const resolvedTheme: ResolvedTheme =
+    theme === "system" ? systemPreferenceTheme : theme;

  useEffect(() => {
    const root = window.document.documentElement;
    root.classList.remove("light", "dark");
+    root.classList.add(resolvedTheme);
  }, [resolvedTheme, theme]);

  const value = {
    theme,
+    resolvedTheme,
    setTheme: (theme: Theme) => {
      localStorage.setItem(storageKey, theme);
      setTheme(theme);
    },
  };
}

If we didn't have resolvedTheme and only used theme, you'd lose information about the state of your UI (you would only know the theme is "system", and not what it resolved to).

If you like this proposal, I would be happy to provide examples for other frameworks and submit a pull request.

[d4vidsha]

For a more up-to-date example as of this current dark mode implementation in the official docs, simply change everything inside if (theme === "system") { to:

...
export function ThemeProvider({
  ...
    if (theme === "system") {
      
      // set the initial theme based on the system preference
      const queryMedia = window.matchMedia("(prefers-color-scheme: dark)")
      const systemTheme = queryMedia.matches ? "dark" : "light"
      root.classList.add(systemTheme)

      // listen for changes to the system theme
      const listener = (e: MediaQueryListEvent) => {
        root.classList.remove("light", "dark")
        root.classList.add(e.matches ? "dark" : "light")
      }
      queryMedia.addEventListener("change", listener)
      return () => queryMedia.removeEventListener("change", listener)
    }
...