theme provider add listener for preference change

src/lib/themeProvider.tsx

@@ -32,8 +32,9 @@ if (storedMode) {
 }
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [defaultTheme, setDefaultTheme] = useState(getDefaultBrowserTheme);
   const [savedTheme, setSavedTheme] = useState(getSavedTheme);
-  const themeMode = savedTheme ?? getDefaultBrowserTheme();
+  const themeMode = savedTheme ?? defaultTheme;
 
   const toggleThemeMode = useCallback(
     function () {
@@ -42,6 +43,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
     [themeMode]
   );
 
+  // local storage change (if the theme was changed from another tab)
   useEffect(() => {
     window.addEventListener('storage', onStorageChange, false);
     return () => window.removeEventListener('storage', onStorageChange, false);
@@ -51,6 +53,18 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
     }
   }, []);
 
+  // preference change (if the browser settings were changed)
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    mediaQuery.addEventListener('change', onPreferenceChange, false);
+    return () =>
+      mediaQuery.removeEventListener('change', onPreferenceChange, false);
+
+    function onPreferenceChange() {
+      setDefaultTheme(getDefaultBrowserTheme());
+    }
+  }, []);
+
   // When the mode gets updated then update the document attribute
   useEffect(() => {
     if (savedTheme) {