[dashboard] Automatically update color theme on system change / stora…

…ge event
gitpod-io · Apr 16, 2021 · 83d8c0a · 83d8c0a
1 parent 2093f15
commit 83d8c0a
Showing 1 changed file with 11 additions and 4 deletions.
diff --git a/components/dashboard/src/App.tsx b/components/dashboard/src/App.tsx
@@ -57,10 +57,17 @@ function App() {
     }, []);
 
     useEffect(() => {
-        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            document.documentElement.classList.add('dark');
-        } else {
-            document.documentElement.classList.remove('dark');
+        const updateTheme = () => {
+            const isDark = localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches);
+            document.documentElement.classList.toggle('dark', isDark);
+        }
+        updateTheme();
+        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        mediaQuery.addEventListener('change', updateTheme);
+        window.addEventListener('storage', updateTheme);
+        return function cleanup() {
+            mediaQuery.removeEventListener('change', updateTheme);
+            window.removeEventListener('storage', updateTheme);
         }
     }, [localStorage.theme]);