mirror of
https://github.com/AdguardTeam/AdGuardHome.git
synced 2024-09-11 10:45:42 +03:00
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:
parent
e43ba17884
commit
4afd39b22f
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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();
|
||||||
|
@ -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 {
|
||||||
|
@ -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';
|
||||||
|
@ -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;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -177,7 +177,7 @@ const dashboard = handleActions(
|
|||||||
autoClients: [],
|
autoClients: [],
|
||||||
supportedTags: [],
|
supportedTags: [],
|
||||||
name: '',
|
name: '',
|
||||||
theme: 'auto',
|
theme: undefined,
|
||||||
checkUpdateFlag: false,
|
checkUpdateFlag: false,
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user