feat: extract ThemeWatcher component for system theme detection

src/core/themes/index.js

@@ -43,6 +43,20 @@ function getNextTheme(current) {
     return systemIsDark ? 'dark' : 'auto';
 }
 
+export function ThemeWatcher() {
+    useEffect(() => {
+        const mq = window.matchMedia('(prefers-color-scheme: dark)');
+        function onSystemChange(e) {
+            if (localStorage.getItem('theme')) return;
+            document.documentElement.classList.toggle('dark', e.matches);
+        }
+        mq.addEventListener('change', onSystemChange);
+        return () => mq.removeEventListener('change', onSystemChange);
+    }, []);
+
+    return null;
+}
+
 export function useTheme() {
     const [theme, setTheme] = useState('auto');
     const [systemIsDark, setSystemIsDark] = useState(false);
@@ -54,8 +68,6 @@ export function useTheme() {
         const mq = window.matchMedia('(prefers-color-scheme: dark)');
         function onSystemChange(e) {
             setSystemIsDark(e.matches);
-            if (localStorage.getItem('theme')) return;
-            document.documentElement.classList.toggle('dark', e.matches);
         }
         mq.addEventListener('change', onSystemChange);
         return () => mq.removeEventListener('change', onSystemChange);

src/features/provider/ZenProvider.js

@@ -1,10 +1,12 @@
 'use client';
 
 import { ToastProvider, ToastContainer } from '@zen/core/toast';
+import { ThemeWatcher } from '@zen/core/themes';
 
 export function ZenProvider({ children }) {
   return (
     <ToastProvider>
+      <ThemeWatcher />
       {children}
       <ToastContainer />
     </ToastProvider>