mirrors
/
AdGuardHome
mirror of https://github.com/AdguardTeam/AdGuardHome.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Artem Krisanov 2023-04-17 16:07:20 +03:00
parent e43ba17884
commit 4afd39b22f
7 changed files with 84 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
client/public/index.html
View File

@ -12,11 +12,40 @@
<link rel="mask-icon" href="assets/safari-pinned-tab.svg" color="#67B279"> <link rel="mask-icon" href="assets/safari-pinned-tab.svg" color="#67B279">
<link rel="icon" type="image/png" href="assets/favicon.png" sizes="48x48"> <link rel="icon" type="image/png" href="assets/favicon.png" sizes="48x48">
<title>AdGuard Home</title> <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> </head>
<body> <body>
<noscript> <noscript>
You need to enable JavaScript to run this app. You need to enable JavaScript to run this app.
</noscript> </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> </body>
</html> </html>

5
client/public/login.html
View File

@ -17,5 +17,10 @@
You need to enable JavaScript to run this app. You need to enable JavaScript to run this app.
</noscript> </noscript>
<div id="root"></div> <div id="root"></div>
<script>
(function() {
document.body.dataset.theme = 'auto';
})();
</script>
</body> </body>
</html> </html>

8
client/src/components/ui/Footer.js
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react'; import React, { useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import cn from 'classnames'; import cn from 'classnames';
@ -42,12 +42,6 @@ const Footer = () => {
const isLoggedIn = profileName !== ''; const isLoggedIn = profileName !== '';
const [currentThemeLocal, setCurrentThemeLocal] = useState(THEMES.auto); const [currentThemeLocal, setCurrentThemeLocal] = useState(THEMES.auto);
useEffect(() => {
if (!isLoggedIn) {
setUITheme(currentThemeLocal);
}
}, []);
const getYear = () => { const getYear = () => {
const today = new Date(); const today = new Date();
return today.getFullYear(); return today.getFullYear();

2
client/src/components/ui/Overlay.css
View File

@ -13,7 +13,7 @@
font-size: 28px; font-size: 28px;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
background-color: rgba(255, 255, 255, 0.8); background-color: var(--rt-nodata-bgcolor);
} }
.overlay--visible { .overlay--visible {

2
client/src/helpers/constants.js
View File

@ -548,3 +548,5 @@ export const DISABLE_PROTECTION_TIMINGS = {
HOUR: 60 * 60 * 1000, HOUR: 60 * 60 * 1000,
TOMORROW: 24 * 60 * 60 * 1000, TOMORROW: 24 * 60 * 60 * 1000,
}; };
export const LOCAL_STORAGE_THEME_KEY = 'account_theme';

46
client/src/helpers/helpers.js
View File

@ -26,6 +26,7 @@ import {
STANDARD_WEB_PORT, STANDARD_WEB_PORT,
SPECIAL_FILTER_ID, SPECIAL_FILTER_ID,
THEMES, THEMES,
LOCAL_STORAGE_THEME_KEY,
} from './constants'; } from './constants';
/** /**
@ -679,19 +680,60 @@ export const setHtmlLangAttr = (language) => {
window.document.documentElement.lang = 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. * Sets UI theme.
* *
* @param theme * @param theme
*/ */
export const setUITheme = (theme) => { export const setUITheme = (theme) => {
let currentTheme = theme; let currentTheme = theme || getTheme();
if (currentTheme === THEMES.auto) { if (currentTheme === THEMES.auto) {
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
currentTheme = prefersDark ? THEMES.dark : THEMES.light; currentTheme = prefersDark ? THEMES.dark : THEMES.light;
} }
setTheme(currentTheme);
document.body.dataset.theme = currentTheme; document.body.dataset.theme = currentTheme;
}; };

2
client/src/reducers/dashboard.js
View File

@ -177,7 +177,7 @@ const dashboard = handleActions(
autoClients: [], autoClients: [],
supportedTags: [], supportedTags: [],
name: '', name: '',
theme: 'auto', theme: undefined,
checkUpdateFlag: false, checkUpdateFlag: false,
}, },
); );