daxi20/AdGuardHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pull request 1713: 613 dark theme vol.2

Browse Source 
Updates #613.

Squashed commit of the following:

commit 9a3ba15bdb8476dde045631362d76572a68a4e5c
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Thu Jan 19 12:46:48 2023 +0700

    client: review dark theme colors

commit c456cdcb6ffec044917b0396ad3cfa8b5c3bce10
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Wed Jan 18 23:46:32 2023 +0700

    client: review dark theme colors

commit 4b042ba4f433c89488b18ec38f5864d5ffaf8657
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Wed Jan 18 23:34:37 2023 +0700

    client: review dark theme colors

commit 1ff34f751b4d9342495070af85f3dae86c285aee
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Wed Jan 18 18:59:46 2023 +0700

    client: default language

commit ca9abc11a8c155c78f73903906ed452e95764e99
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Wed Jan 18 12:23:50 2023 +0700

    client: default language

commit 01a057a40e879d1bc2013989d6eb56a296ba16a3
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Wed Jan 18 11:53:58 2023 +0700

    client: review dark theme colors

commit aa3658f35c49f8ae19077b333075207082383a17
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Wed Jan 18 11:14:08 2023 +0700

    client: review dark theme colors

commit 8df726382155fcc3b2e6e632d53f42d0be638c77
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Tue Jan 17 13:41:21 2023 +0700

    client: dark theme colors

commit bd84ae46272743874d2350291b22b90b7fbedf0e
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Tue Jan 17 13:05:46 2023 +0700

    client: dark theme colors

commit 136ea5608a1a22b6a54a362741b2fdd708f345e2
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Tue Jan 17 10:51:22 2023 +0700

    all: docs

commit 784be8741b730a12d665d7e2a29c140c0746e927
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Mon Jan 16 17:59:26 2023 +0700

    client: imp code

commit a83de0948fe034e7be35c04a607b1171915c0263
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Mon Jan 16 14:13:54 2023 +0700

    client: dark theme login

commit 6c4ef19da01efc6a1e4ea76085b7b7382c331eca
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Mon Jan 16 13:27:35 2023 +0700

    client: dark theme css

commit 5cf564ea1203e9472d200975ee98d93b6b868210
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Mon Jan 16 13:18:00 2023 +0700

    client: imp code

commit 1bbbd20972345c08e944b7c4bb0330c0d30d827a
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Mon Jan 16 12:49:03 2023 +0700

    client: imp code

commit cb07680d3cd7acdbdb7bdc9d9abaa388a9df8e4c
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Mon Jan 16 12:24:14 2023 +0700

    client: auto theme handling

commit d34910d4dd5edb694b6da55a2260b4fea784e7e0
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Fri Jan 13 23:31:24 2023 +0700

    home: imp docs

commit 8abe4f6f7182dc3dbcbbe73652294ee6584a4f2f
Author: Dimitry Kolyshev <dkolyshev@adguard.com>
Date:   Thu Jan 12 18:35:48 2023 +0700

    client: theme dropdown
This commit is contained in:
Dimitry Kolyshev
2023-01-19 13:46:44 +03:00
committed by Ainar Garipov
parent cd76a30790
commit a7dca7aa56
21 changed files with 304 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
client/src/components/App/index.css
View File

@@ -1,4 +1,26 @@
:root {
--bgcolor: #f5f7fb;
--mcolor: #495057;
--scolor: rgba(74, 74, 74, 0.7);
--border-color: rgba(0, 40, 100, 0.12);
--header-bgcolor: #fff;
--card-bgcolor: #fff;
--card-border-color: rgba(0, 40, 100, 0.12);
--ctrl-bgcolor: #fff;
--ctrl-select-bgcolor: rgba(69, 79, 94, 0.12);
--ctrl-dropdown-color: #212529;
--ctrl-dropdown-bgcolor-focus: #f8f9fa;
--ctrl-dropdown-color-focus: #16181b;
--btn-success-bgcolor: #5eba00;
--form-disabled-bgcolor: #f8f9fa;
--form-disabled-color: #495057;
--rt-nodata-bgcolor: rgba(255,255,255,0.8);
--rt-nodata-color: rgba(0,0,0,0.5);
--modal-overlay-bgcolor: rgba(255, 255, 255, 0.75);
--logs__table-bgcolor: #fff;
--logs__row--blue-bgcolor: #e5effd;
--logs__row--white-bgcolor: #fff;
--detailed-info-color: #888888;
--yellow-pale: rgba(247, 181, 0, 0.1);
--green79: #67b279;
--gray-a5: #a5a5a5;
@@ -8,6 +30,32 @@
--font-size-disable-autozoom: 1rem;
}
[data-theme="dark"] {
--bgcolor: #131313;
--mcolor: #e6e6e6;
--scolor: #a5a5a5;
--header-bgcolor: #131313;
--border-color: #222;
--card-bgcolor: #1c1c1c;
--card-border-color: #3d3d3d;
--ctrl-bgcolor: #1c1c1c;
--ctrl-select-bgcolor: #3d3d3d;
--ctrl-dropdown-color: #fff;
--ctrl-dropdown-bgcolor-focus: #000;
--ctrl-dropdown-color-focus: #fff;
--btn-success-bgcolor: #67b279;
--form-disabled-bgcolor: #3d3d3d;
--form-disabled-color: #a5a5a5;
--logs__text-color: #f3f3f3;
--rt-nodata-bgcolor: #1c1c1c;
--rt-nodata-color: #fff;
--modal-overlay-bgcolor: #1c1c1c;
--logs__table-bgcolor: #3d3d3d;
--logs__row--blue-bgcolor: #467fcf;
--logs__row--white-bgcolor: #1c1c1c;
--detailed-info-color: #fff;
}
body {
margin: 0;
padding: 0;

45
client/src/components/App/index.js
View File

@@ -20,8 +20,13 @@ import EncryptionTopline from '../ui/EncryptionTopline';
import Icons from '../ui/Icons';
import i18n from '../../i18n';
import Loading from '../ui/Loading';
import { FILTERS_URLS, MENU_URLS, SETTINGS_URLS } from '../../helpers/constants';
import { getLogsUrlParams, setHtmlLangAttr } from '../../helpers/helpers';
import {
FILTERS_URLS,
MENU_URLS,
SETTINGS_URLS,
THEMES,
} from '../../helpers/constants';
import { getLogsUrlParams, setHtmlLangAttr, setUITheme } from '../../helpers/helpers';
import Header from '../Header';
import { changeLanguage, getDnsStatus } from '../../actions';
@@ -109,6 +114,7 @@ const App = () => {
isCoreRunning,
isUpdateAvailable,
processing,
theme,
} = useSelector((state) => state.dashboard, shallowEqual);
const { processing: processingEncryption } = useSelector((
@@ -138,6 +144,41 @@ const App = () => {
setLanguage();
}, [language]);
const handleAutoTheme = (e, accountTheme) => {
if (accountTheme !== THEMES.auto) {
return;
}
if (e.matches) {
setUITheme(THEMES.dark);
} else {
setUITheme(THEMES.light);
}
};
useEffect(() => {
if (theme !== THEMES.auto) {
setUITheme(theme);
return;
}
const colorSchemeMedia = window.matchMedia('(prefers-color-scheme: dark)');
const prefersDark = colorSchemeMedia.matches;
setUITheme(prefersDark ? THEMES.dark : THEMES.light);
if (colorSchemeMedia.addEventListener !== undefined) {
colorSchemeMedia.addEventListener('change', (e) => {
handleAutoTheme(e, theme);
});
} else {
// Deprecated addListener for older versions of Safari.
colorSchemeMedia.addListener((e) => {
handleAutoTheme(e, theme);
});
}
}, [theme]);
const reloadPage = () => {
window.location.reload();
};