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 @@ AdGuard Home + -
+
+
+
+ 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.
+ 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, }, );