all: sync with master; upd chlog

client/src/components/ui/Footer.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import classNames from 'classnames';
@@ -10,7 +10,7 @@ import i18n from '../../i18n';
 import Version from './Version';
 import './Footer.css';
 import './Select.css';
-import { setHtmlLangAttr } from '../../helpers/helpers';
+import { setHtmlLangAttr, setUITheme } from '../../helpers/helpers';
 import { changeTheme } from '../../actions';
 
 const linksData = [
@@ -36,6 +36,13 @@ const Footer = () => {
     const currentTheme = useSelector((state) => (state.dashboard ? state.dashboard.theme : 'auto'));
     const profileName = useSelector((state) => (state.dashboard ? state.dashboard.name : ''));
     const isLoggedIn = profileName !== '';
+    const [currentThemeLocal, setCurrentThemeLocal] = useState('auto');
+
+    useEffect(() => {
+        if (!isLoggedIn) {
+            setUITheme(window.matchMedia('(prefers-color-scheme: dark)').matches ? THEMES.dark : THEMES.light);
+        }
+    }, []);
 
     const getYear = () => {
         const today = new Date();
@@ -53,6 +60,12 @@ const Footer = () => {
         dispatch(changeTheme(value));
     };
 
+    const onThemeChangedLocal = (event) => {
+        const { value } = event.target;
+        setUITheme(value);
+        setCurrentThemeLocal(value);
+    };
+
     const renderCopyright = () => <div className="footer__column">
         <div className="footer__copyright">
             {t('copyright')} &copy; {getYear()}{' '}
@@ -70,24 +83,34 @@ const Footer = () => {
             {t(name)}
         </a>);
 
-    const renderThemeSelect = (currentTheme, isLoggedIn) => {
-        if (!isLoggedIn) {
-            return '';
-        }
+    const themeSelectOptions = () => (
+        Object.values(THEMES)
+            .map((theme) => (
+                <option key={theme} value={theme}>
+                    {t(`theme_${theme}`)}
+                </option>
+            ))
+    );
 
-        return <select
+    const renderThemeSelect = () => (
+        <select
             className="form-control select select--theme"
             value={currentTheme}
             onChange={onThemeChanged}
         >
-            {Object.values(THEMES)
-                .map((theme) => (
-                    <option key={theme} value={theme}>
-                        {t(`theme_${theme}`)}
-                    </option>
-                ))}
-        </select>;
-    };
+            {themeSelectOptions()}
+        </select>
+    );
+
+    const renderThemeSelectLocal = () => (
+        <select
+            className="form-control select select--theme"
+            value={currentThemeLocal}
+            onChange={onThemeChangedLocal}
+        >
+            {themeSelectOptions()}
+        </select>
+    );
 
     return (
         <>
@@ -98,7 +121,7 @@ const Footer = () => {
                             {renderLinks(linksData)}
                         </div>
                         <div className="footer__column footer__column--theme">
-                            {renderThemeSelect(currentTheme, isLoggedIn)}
+                            {isLoggedIn ? renderThemeSelect() : renderThemeSelectLocal()}
                         </div>
                         <div className="footer__column footer__column--language">
                             <select