From 4afd39b22f21c70b726f1cedb2deab1c1d2e55e3 Mon Sep 17 00:00:00 2001
From: Artem Krisanov <a.krisanov@adguard.com>
Date: Mon, 17 Apr 2023 16:07:20 +0300
Subject: [PATCH] AG-21136 - Added local storage theme key.

Updates#5444

Squashed commit of the following:

commit 7b0b108f41ebb5e98861cdd20029c12d3a3fc5f4
Merge: 38df28db0 e43ba1788
Author: Artem Krisanov <a.krisanov@adguard.com>
Date:   Mon Apr 17 15:58:15 2023 +0300

    Merge branch 'master' of ssh://bit.adguard.com:7999/dns/adguard-home into 5444-white-screen

commit 38df28db0739e47d3fb605f648fa493b58709d77
Author: Artem Krisanov <a.krisanov@adguard.com>
Date:   Fri Apr 14 17:54:00 2023 +0300

    Deleted useless tag.

commit 78ef9d911ccf74b69a9ae5626ea8f31cb9338ae0
Author: Artem Krisanov <a.krisanov@adguard.com>
Date:   Fri Apr 14 17:53:17 2023 +0300

    Set initial body data-theme.

commit f470b3aa79500edd0726b7ed37e6e5940b6ce3ff
Author: Artem Krisanov <a.krisanov@adguard.com>
Date:   Thu Apr 13 16:42:25 2023 +0300

    Revert login changes.

commit 7c4734ed02a670a59d0b9ff04e06bc1d396223a8
Author: Artem Krisanov <a.krisanov@adguard.com>
Date:   Thu Apr 13 15:51:24 2023 +0300

    Added setting theme into html.Changed overlay background color to variable.

commit a3743be0e69489489755db8ff55541b9a6281300
Author: Artem Krisanov <a.krisanov@adguard.com>
Date:   Wed Apr 12 17:58:47 2023 +0300

    Added local storage theme key.
---
 client/public/index.html             | 31 ++++++++++++++++++-
 client/public/login.html             |  5 +++
 client/src/components/ui/Footer.js   |  8 +----
 client/src/components/ui/Overlay.css |  2 +-
 client/src/helpers/constants.js      |  2 ++
 client/src/helpers/helpers.js        | 46 ++++++++++++++++++++++++++--
 client/src/reducers/dashboard.js     |  2 +-
 7 files changed, 84 insertions(+), 12 deletions(-)

diff --git a/client/public/index.html b/client/public/index.html
index d736e508..730a3c95 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -12,11 +12,40 @@
         <link rel="mask-icon" href="assets/safari-pinned-tab.svg" color="#67B279">
         <link rel="icon" type="image/png" href="assets/favicon.png" sizes="48x48">
         <title>AdGuard Home</title>
+        <style>
+            .wrapper {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                min-height: 100vh;
+            }
+
+            [data-theme="DARK"] .wrapper {
+                background-color: #f5f7fb;
+            }
+        </style>
     </head>
     <body>
         <noscript>
             You need to enable JavaScript to run this app.
         </noscript>
-        <div id="root"></div>
+        <div id="root">
+            <div class="wrapper"></div>
+        </div>
+        <script>
+            (function() {
+                var LOCAL_STORAGE_THEME_KEY = 'account_theme';
+                var theme = 'light';
+
+                try {
+                    theme = window.localStorage.getItem(LOCAL_STORAGE_THEME_KEY);
+                } catch(e) {
+                    console.error(e);
+                }
+
+                document.body.dataset.theme = theme;
+            })();
+        </script>
     </body>
 </html>
diff --git a/client/public/login.html b/client/public/login.html
index 586522c7..53f1abf5 100644
--- a/client/public/login.html
+++ b/client/public/login.html
@@ -17,5 +17,10 @@
             You need to enable JavaScript to run this app.
         </noscript>
         <div id="root"></div>
+        <script>
+            (function() {
+                document.body.dataset.theme = 'auto';
+            })();
+        </script>
     </body>
 </html>
diff --git a/client/src/components/ui/Footer.js b/client/src/components/ui/Footer.js
index 2cfe14ca..b35d8dd9 100644
--- a/client/src/components/ui/Footer.js
+++ b/client/src/components/ui/Footer.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import cn from 'classnames';
@@ -42,12 +42,6 @@ const Footer = () => {
     const isLoggedIn = profileName !== '';
     const [currentThemeLocal, setCurrentThemeLocal] = useState(THEMES.auto);
 
-    useEffect(() => {
-        if (!isLoggedIn) {
-            setUITheme(currentThemeLocal);
-        }
-    }, []);
-
     const getYear = () => {
         const today = new Date();
         return today.getFullYear();
diff --git a/client/src/components/ui/Overlay.css b/client/src/components/ui/Overlay.css
index d12a55b7..6941af52 100644
--- a/client/src/components/ui/Overlay.css
+++ b/client/src/components/ui/Overlay.css
@@ -13,7 +13,7 @@
     font-size: 28px;
     font-weight: 600;
     text-align: center;
-    background-color: rgba(255, 255, 255, 0.8);
+    background-color: var(--rt-nodata-bgcolor);
 }
 
 .overlay--visible {
diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js
index c4739489..1a3182c5 100644
--- a/client/src/helpers/constants.js
+++ b/client/src/helpers/constants.js
@@ -548,3 +548,5 @@ export const DISABLE_PROTECTION_TIMINGS = {
     HOUR: 60 * 60 * 1000,
     TOMORROW: 24 * 60 * 60 * 1000,
 };
+
+export const LOCAL_STORAGE_THEME_KEY = 'account_theme';
diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js
index 3c1c606f..127b2902 100644
--- a/client/src/helpers/helpers.js
+++ b/client/src/helpers/helpers.js
@@ -26,6 +26,7 @@ import {
     STANDARD_WEB_PORT,
     SPECIAL_FILTER_ID,
     THEMES,
+    LOCAL_STORAGE_THEME_KEY,
 } from './constants';
 
 /**
@@ -679,19 +680,60 @@ export const setHtmlLangAttr = (language) => {
     window.document.documentElement.lang = language;
 };
 
+/**
+ * Set local storage field
+ *
+ * @param {string} key
+ * @param {string} value
+ */
+
+export const setStorageItem = (key, value) => {
+    if (window.localStorage) {
+        window.localStorage.setItem(key, value);
+    }
+};
+
+/**
+ * Get local storage field
+ *
+ * @param {string} key
+ */
+
+export const getStorageItem = (key) => (window.localStorage
+    ? window.localStorage.getItem(key)
+    : null);
+
+/**
+ * Set local storage theme field
+ *
+ * @param {string} theme
+ */
+
+export const setTheme = (theme) => {
+    setStorageItem(LOCAL_STORAGE_THEME_KEY, theme);
+};
+
+/**
+ * Get local storage theme field
+ *
+ * @returns {string}
+ */
+
+export const getTheme = () => getStorageItem(LOCAL_STORAGE_THEME_KEY) || THEMES.light;
+
 /**
  * Sets UI theme.
  *
  * @param theme
  */
 export const setUITheme = (theme) => {
-    let currentTheme = theme;
+    let currentTheme = theme || getTheme();
 
     if (currentTheme === THEMES.auto) {
         const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
         currentTheme = prefersDark ? THEMES.dark : THEMES.light;
     }
-
+    setTheme(currentTheme);
     document.body.dataset.theme = currentTheme;
 };
 
diff --git a/client/src/reducers/dashboard.js b/client/src/reducers/dashboard.js
index d8b48766..f23717f9 100644
--- a/client/src/reducers/dashboard.js
+++ b/client/src/reducers/dashboard.js
@@ -177,7 +177,7 @@ const dashboard = handleActions(
         autoClients: [],
         supportedTags: [],
         name: '',
-        theme: 'auto',
+        theme: undefined,
         checkUpdateFlag: false,
     },
 );