Restore system theme change event handler

mozilla · Oct 26, 2023 · ed5d06b · ed5d06b
1 parent e53e89c
commit ed5d06b
Showing 1 changed file with 19 additions and 2 deletions.
diff --git a/translate/src/context/Theme.tsx b/translate/src/context/Theme.tsx
@@ -1,4 +1,4 @@
-import { createContext, useState } from 'react';
+import { createContext, useEffect, useState } from 'react';
 import { useTheme } from '~/hooks/useTheme';
 
 export const ThemeContext = createContext({
@@ -9,9 +9,26 @@ export function ThemeProvider({ children }: { children: React.ReactElement }) {
   const [theme] = useState(
     () => document.body.getAttribute('data-theme') || 'dark',
   );
+
   const applyTheme = useTheme();
 
-  applyTheme(theme);
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function handleThemeChange(e: MediaQueryListEvent) {
+      let userThemeSetting = document.body.getAttribute('data-theme') || 'dark';
+
+      if (userThemeSetting === 'system') {
+        applyTheme(e.matches ? 'dark' : 'light');
+      }
+    }
+
+    mediaQuery.addEventListener('change', handleThemeChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleThemeChange);
+    };
+  }, [theme]);
 
   return (
     <ThemeContext.Provider value={{ theme }}>{children}</ThemeContext.Provider>