client: auto theme handling

AdguardTeam · Jan 16, 2023 · cb07680 · cb07680
1 parent d34910d
commit cb07680
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 4 deletions.
diff --git a/client/src/components/App/index.js b/client/src/components/App/index.js
@@ -20,8 +20,13 @@ import EncryptionTopline from '../ui/EncryptionTopline';
 import Icons from '../ui/Icons';
 import i18n from '../../i18n';
 import Loading from '../ui/Loading';
-import { FILTERS_URLS, MENU_URLS, SETTINGS_URLS } from '../../helpers/constants';
-import { getLogsUrlParams, setHtmlLangAttr } from '../../helpers/helpers';
+import {
+    FILTERS_URLS,
+    MENU_URLS,
+    SETTINGS_URLS,
+    THEMES,
+} from '../../helpers/constants';
+import { getLogsUrlParams, setHtmlLangAttr, setUITheme } from '../../helpers/helpers';
 import Header from '../Header';
 import { changeLanguage, getDnsStatus } from '../../actions';
 
@@ -109,6 +114,7 @@ const App = () => {
         isCoreRunning,
         isUpdateAvailable,
         processing,
+        theme,
     } = useSelector((state) => state.dashboard, shallowEqual);
 
     const { processing: processingEncryption } = useSelector((
@@ -138,6 +144,46 @@ const App = () => {
         setLanguage();
     }, [language]);
 
+    const handleAutoTheme = (e, accountTheme) => {
+        if (accountTheme !== THEMES.auto) {
+            return;
+        }
+
+        if (e.matches) {
+            setUITheme(THEMES.dark);
+        } else {
+            setUITheme(THEMES.light);
+        }
+    };
+
+    useEffect(() => {
+        if (processing) {
+            return;
+        }
+
+        console.log(`selected:${theme}`);
+        if (theme !== THEMES.auto) {
+            setUITheme(theme);
+
+            return;
+        }
+
+        const colorSchemeMedia = window.matchMedia('(prefers-color-scheme: dark)');
+        const prefersDark = colorSchemeMedia.matches;
+        setUITheme(prefersDark ? THEMES.dark : THEMES.light);
+
+        if (colorSchemeMedia.addEventListener !== undefined) {
+            colorSchemeMedia.addEventListener('change', (e) => {
+                handleAutoTheme(e, theme);
+            });
+        } else {
+            // Deprecated addListener for older versions of Safari
+            colorSchemeMedia.addListener((e) => {
+                handleAutoTheme(e, theme);
+            });
+        }
+    }, [theme]);
+
     const reloadPage = () => {
         window.location.reload();
     };

diff --git a/client/src/components/ui/Footer.js b/client/src/components/ui/Footer.js
@@ -10,7 +10,7 @@ import i18n from '../../i18n';
 import Version from './Version';
 import './Footer.css';
 import './Select.css';
-import { setHtmlLangAttr, setUITheme } from '../../helpers/helpers';
+import { setHtmlLangAttr } from '../../helpers/helpers';
 import { changeTheme } from '../../actions';
 
 const linksData = [
@@ -49,7 +49,6 @@ const Footer = () => {
     const onThemeChanged = (event) => {
         const { value } = event.target;
         dispatch(changeTheme(value));
-        setUITheme(value);
     };
 
     const renderCopyright = () => <div className="footer__column">