feat: auto dark mode (#321)

src/hooks/Theme.js

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import { CssBaseline, GlobalStyles } from "@mui/material";
 import { useDarkMode } from "./ColorMode";
@@ -11,6 +11,21 @@ import { THEME_DARK, THEME_LIGHT } from "../config";
  */
 export default function Theme({ children, options, styles }) {
   const { darkMode } = useDarkMode();
+  const [systemMode, setSystemMode] = useState(THEME_LIGHT);
+
+  useEffect(() => {
+    if (typeof window.matchMedia !== "function") {
+      return;
+    }
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      setSystemMode(mediaQuery.matches ? THEME_DARK : THEME_LIGHT);
+    };
+    handleChange(); // Set initial value
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+
   const theme = useMemo(() => {
     let htmlFontSize = 16;
     try {
@@ -23,16 +38,19 @@ export default function Theme({ children, options, styles }) {
       //
     }
 
+    const isDarkMode =
+      darkMode === "dark" || (darkMode === "auto" && systemMode === THEME_DARK);
+
     return createTheme({
       palette: {
-        mode: darkMode ? THEME_DARK : THEME_LIGHT,
+        mode: isDarkMode ? THEME_DARK : THEME_LIGHT,
       },
       typography: {
         htmlFontSize,
       },
       ...options,
     });
-  }, [darkMode, options]);
+  }, [darkMode, options, systemMode]);
 
   return (
     <ThemeProvider theme={theme}>