AdguardTeam/AdGuardHome
1
1
Fork 0
mirror of https://github.com/AdguardTeam/AdGuardHome.git synced 2024-08-16 22:20:30 +03:00
Code Issues 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -19,6 +19,7 @@ and this project adheres to
### Added
- Experimental Dark UI theme ([#613]).
- The new HTTP API `PUT /control/profile/update`, that updates current user
language and UI theme. The format of request body is described in
`openapi/openapi.yaml`.

3
client/src/__locales/en.json
View File

@ -298,6 +298,9 @@
"blocking_mode_nxdomain": "NXDOMAIN: Respond with NXDOMAIN code",
"blocking_mode_null_ip": "Null IP: Respond with zero IP address (0.0.0.0 for A; :: for AAAA)",
"blocking_mode_custom_ip": "Custom IP: Respond with a manually set IP address",
"theme_auto": "Auto",
"theme_light": "Light",
"theme_dark": "Dark",
"upstream_dns_client_desc": "If you keep this field empty, AdGuard Home will use the servers configured in the <0>DNS settings</0>.",
"tracker_source": "Tracker source",
"source_label": "Source",

16
client/src/actions/index.js
View File

@ -363,18 +363,18 @@ export const changeLanguage = (lang) => async (dispatch) => {
}
};
export const getLanguageRequest = createAction('GET_LANGUAGE_REQUEST');
export const getLanguageFailure = createAction('GET_LANGUAGE_FAILURE');
export const getLanguageSuccess = createAction('GET_LANGUAGE_SUCCESS');
export const changeThemeRequest = createAction('CHANGE_THEME_REQUEST');
export const changeThemeFailure = createAction('CHANGE_THEME_FAILURE');
export const changeThemeSuccess = createAction('CHANGE_THEME_SUCCESS');
export const getLanguage = () => async (dispatch) => {
dispatch(getLanguageRequest());
export const changeTheme = (theme) => async (dispatch) => {
dispatch(changeThemeRequest());
try {
const langSettings = await apiClient.getCurrentLanguage();
dispatch(getLanguageSuccess(langSettings.language));
await apiClient.changeTheme({ theme });
dispatch(changeThemeSuccess({ theme }));
} catch (error) {
dispatch(addErrorToast({ error }));
dispatch(getLanguageFailure());
dispatch(changeThemeFailure());
}
};

41
client/src/api/Api.js
View File

@ -1,8 +1,12 @@
import axios from 'axios';
import { getPathWithQueryString } from '../helpers/helpers';
import { QUERY_LOGS_PAGE_LIMIT, HTML_PAGES, R_PATH_LAST_PART } from '../helpers/constants';
import {
QUERY_LOGS_PAGE_LIMIT, HTML_PAGES, R_PATH_LAST_PART, THEMES,
} from '../helpers/constants';
import { BASE_URL } from '../../constants';
import i18n from '../i18n';
import { LANGUAGES } from '../helpers/twosky';
class Api {
baseUrl = BASE_URL;
@ -224,21 +228,21 @@ class Api {
}
// Language
CURRENT_LANGUAGE = { path: 'i18n/current_language', method: 'GET' };
CHANGE_LANGUAGE = { path: 'i18n/change_language', method: 'POST' };
async changeLanguage(config) {
const profile = await this.getProfile();
profile.language = config.language;
getCurrentLanguage() {
const { path, method } = this.CURRENT_LANGUAGE;
return this.makeRequest(path, method);
return this.setProfile(profile);
}
changeLanguage(config) {
const { path, method } = this.CHANGE_LANGUAGE;
const parameters = {
data: config,
};
return this.makeRequest(path, method, parameters);
// Theme
async changeTheme(config) {
const profile = await this.getProfile();
profile.theme = config.theme;
return this.setProfile(profile);
}
// DHCP
@ -571,11 +575,24 @@ class Api {
// Profile
GET_PROFILE = { path: 'profile', method: 'GET' };
UPDATE_PROFILE = { path: 'profile/update', method: 'PUT' };
getProfile() {
const { path, method } = this.GET_PROFILE;
return this.makeRequest(path, method);
}
setProfile(data) {
const theme = data.theme ? data.theme : THEMES.auto;
const defaultLanguage = i18n.language ? i18n.language : LANGUAGES.en;
const language = data.language ? data.language : defaultLanguage;
const { path, method } = this.UPDATE_PROFILE;
const config = { data: { theme, language } };
return this.makeRequest(path, method, config);
}
// DNS config
GET_DNS_CONFIG = { path: 'dns_info', method: 'GET' };

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();
};

2
client/src/components/Header/Header.css
View File

@ -47,7 +47,7 @@
width: 250px;
height: 100vh;
transition: transform 0.3s ease;
background-color: #fff;
background-color: var(--header-bgcolor);
overflow-y: auto;
}

3
client/src/components/Logs/Cells/IconTooltip.css
View File

@ -4,7 +4,8 @@
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 4px !important;
pointer-events: auto !important;
background-color: var(--white);
background-color: var(--ctrl-bgcolor);
color: var(--scolor);
z-index: 102;
overflow-y: auto;
max-height: 100%;

14
client/src/components/Logs/Logs.css
View File

@ -31,7 +31,7 @@
overflow: hidden;
font-size: 1rem;
font-family: var(--font-family-sans-serif);
color: var(--gray-4d);
color: var(--logs__text-color);
letter-spacing: 0;
line-height: 1.5rem;
}
@ -48,7 +48,7 @@
.detailed-info {
font-size: 0.8rem;
line-height: 1.4;
color: #888888;
color: var(--detailed-info-color);
}
.logs__text--link {
@ -369,7 +369,7 @@
/* QUERY_STATUS_COLORS */
.logs__row--blue {
background-color: var(--blue);
background-color: var(--logs__row--blue-bgcolor);
}
.logs__row--green {
@ -381,7 +381,7 @@
}
.logs__row--white {
background-color: var(--white);
background-color: var(--logs__row--white-bgcolor);
}
.logs__row--yellow {
@ -389,8 +389,8 @@
}
.logs__no-data {
color: var(--gray-4d);
background-color: var(--white80);
color: var(--mcolor);
background-color: var(--logs__table-bgcolor);
pointer-events: none;
font-weight: 600;
text-align: center;
@ -403,7 +403,7 @@
}
.logs__table {
background-color: var(--white);
background-color: var(--logs__table-bgcolor);
border: 0;
border-radius: 8px;
min-height: 43rem;

2
client/src/components/Settings/Settings.css
View File

@ -77,7 +77,7 @@
.form__desc {
margin-top: 10px;
font-size: 13px;
color: rgba(74, 74, 74, 0.7);
color: var(--scolor);
}
.form__desc--top {

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

@ -107,5 +107,5 @@
.checkbox__label-subtitle {
display: block;
line-height: 1.5;
color: rgba(74, 74, 74, 0.7);
color: var(--scolor);
}

10
client/src/components/ui/Footer.css
View File

@ -18,6 +18,11 @@
align-items: center;
}
.footer__column--theme {
min-width: 220px;
margin-bottom: 0;
}
.footer__column--language {
min-width: 220px;
margin-bottom: 0;
@ -49,6 +54,11 @@
}
.footer__column--language {
min-width: initial;
margin-left: 20px;
}
.footer__column--theme {
min-width: initial;
margin-left: auto;
}

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

@ -1,8 +1,9 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
import classNames from 'classnames';
import { REPOSITORY, PRIVACY_POLICY_LINK } from '../../helpers/constants';
import { REPOSITORY, PRIVACY_POLICY_LINK, THEMES } from '../../helpers/constants';
import { LANGUAGES } from '../../helpers/twosky';
import i18n from '../../i18n';
@ -10,6 +11,7 @@ import Version from './Version';
import './Footer.css';
import './Select.css';
import { setHtmlLangAttr } from '../../helpers/helpers';
import { changeTheme } from '../../actions';
const linksData = [
{
@ -29,6 +31,11 @@ const linksData = [
const Footer = () => {
const { t } = useTranslation();
const dispatch = useDispatch();
const currentTheme = useSelector((state) => (state.dashboard ? state.dashboard.theme : 'auto'));
const profileName = useSelector((state) => (state.dashboard ? state.dashboard.name : ''));
const isLoggedIn = profileName !== '';
const getYear = () => {
const today = new Date();
@ -41,6 +48,11 @@ const Footer = () => {
setHtmlLangAttr(value);
};
const onThemeChanged = (event) => {
const { value } = event.target;
dispatch(changeTheme(value));
};
const renderCopyright = () => <div className="footer__column">
<div className="footer__copyright">
{t('copyright')} &copy; {getYear()}{' '}
@ -58,6 +70,25 @@ const Footer = () => {
{t(name)}
</a>);
const renderThemeSelect = (currentTheme, isLoggedIn) => {
if (!isLoggedIn) {
return '';
}
return <select
className="form-control select select--theme"
value={currentTheme}
onChange={onThemeChanged}
>
{Object.values(THEMES)
.map((theme) => (
<option key={theme} value={theme}>
{t(`theme_${theme}`)}
</option>
))}
</select>;
};
return (
<>
<footer className="footer">
@ -66,6 +97,9 @@ const Footer = () => {
<div className="footer__column footer__column--links">
{renderLinks(linksData)}
</div>
<div className="footer__column footer__column--theme">
{renderThemeSelect(currentTheme, isLoggedIn)}
</div>
<div className="footer__column footer__column--language">
<select
className="form-control select select--language"

1
client/src/components/ui/Modal.css
View File

@ -11,6 +11,7 @@
.ReactModal__Overlay--after-open {
opacity: 1;
transition: opacity 150ms ease-out;
background-color: var(--modal-overlay-bgcolor) !important;
}
.ReactModal__Content {

20
client/src/components/ui/ReactTable.css
View File

@ -13,6 +13,26 @@
overflow: visible;
}
.ReactTable .rt-noData {
color: var(--rt-nodata-color);
background-color: var(--rt-nodata-bgcolor);
}
.ReactTable .-loading {
color: var(--rt-nodata-color);
background-color: var(--rt-nodata-bgcolor);
}
.ReactTable .-pagination input, .ReactTable .-pagination select {
color: var(--rt-nodata-color);
background-color: var(--rt-nodata-bgcolor);
}
[data-theme=dark] .ReactTable .-pagination .-btn {
color: var(--scolor);
background-color: var(--ctrl-bgcolor);
}
.rt-tr-group.logs__row--red {
background-color: rgba(223, 56, 18, 0.05);
}

34
client/src/components/ui/Select.css
View File

@ -1,8 +1,25 @@
.select.select--theme {
height: 45px;
padding: 0 32px 2px 11px;
outline: 0;
border-color: var(--ctrl-select-bgcolor);
background-image: url("./svg/chevron-down.svg");
background-repeat: no-repeat;
background-position: right 9px center;
background-size: 17px 20px;
appearance: none;
cursor: pointer;
}
.select--theme::-ms-expand {
opacity: 0;
}
.select.select--language {
height: 45px;
padding: 0 32px 2px 33px;
outline: 0;
border-color: rgba(69, 79, 94, 0.12);
border-color: var(--ctrl-select-bgcolor);
background-image: url("./svg/globe.svg"), url("./svg/chevron-down.svg");
background-repeat: no-repeat, no-repeat;
background-position: left 11px center, right 9px center;
@ -16,8 +33,9 @@
}
.basic-multi-select .select__control {
border: 1px solid rgba(0, 40, 100, 0.12);
border: 1px solid var(--card-border-color);;
border-radius: 3px;
background-color: var(--ctrl-bgcolor);
}
.basic-multi-select .select__control:hover {
@ -36,4 +54,16 @@
.basic-multi-select .select__menu {
z-index: 3;
background-color: var(--ctrl-bgcolor);
}
[data-theme=dark] .basic-multi-select .select__option:hover,
[data-theme=dark] .basic-multi-select .select__option--is-focused,
[data-theme=dark] .basic-multi-select .select__option--is-focused:hover {
background-color: var(--ctrl-select-bgcolor);
color: var(--ctrl-dropdown-color);
}
[data-theme=dark] .select__multi-value__remove svg {
filter: invert(1);
}

59
client/src/components/ui/Tabler.css
View File

@ -85,9 +85,9 @@ body {
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
color: var(--mcolor);
text-align: left;
background-color: #f5f7fb;
background-color: var(--bgcolor);
}
[tabindex="-1"]:focus {
@ -1943,10 +1943,10 @@ pre code {
padding: 0.375rem 0.75rem;
font-size: 0.9375rem;
line-height: 1.6;
color: #495057;
background-color: #fff;
color: var(--mcolor);
background-color: var(--card-bgcolor);
background-clip: padding-box;
border: 1px solid rgba(0, 40, 100, 0.12);
border: 1px solid var(--card-border-color);
border-radius: 3px;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@ -1957,8 +1957,8 @@ pre code {
}
.form-control:focus {
color: #495057;
background-color: #fff;
color: var(--mcolor);
background-color: var(--ctrl-bgcolor);
border-color: #1991eb;
outline: 0;
box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
@ -1991,7 +1991,8 @@ pre code {
.form-control:disabled,
.form-control[readonly] {
background-color: #f8f9fa;
background-color: var(--form-disabled-bgcolor);
color: var(--form-disabled-color);
opacity: 1;
}
@ -2580,7 +2581,7 @@ fieldset:disabled a.btn {
.btn-success {
color: #fff;
background-color: #5eba00;
background-color: var(--btn-success-bgcolor);
border-color: #5eba00;
}
@ -3244,7 +3245,7 @@ tbody.collapse.show {
color: #495057;
text-align: left;
list-style: none;
background-color: #fff;
background-color: var(--ctrl-bgcolor);
background-clip: padding-box;
border: 1px solid rgba(0, 40, 100, 0.12);
border-radius: 3px;
@ -3348,7 +3349,7 @@ tbody.collapse.show {
padding: 0.25rem 1.5rem;
clear: both;
font-weight: 400;
color: #212529;
color: var(--ctrl-dropdown-color);
text-align: inherit;
white-space: nowrap;
background-color: transparent;
@ -3357,9 +3358,9 @@ tbody.collapse.show {
.dropdown-item:hover,
.dropdown-item:focus {
color: #16181b;
color: var(--ctrl-dropdown-color-focus);
text-decoration: none;
background-color: #f8f9fa;
background-color: var(--ctrl-dropdown-bgcolor-focus);
}
.dropdown-item.active,
@ -3794,11 +3795,11 @@ tbody.collapse.show {
height: 2.375rem;
padding: 0.5rem 1.75rem 0.5rem 0.75rem;
line-height: 1.5;
color: #495057;
color: var(--mcolor);
vertical-align: middle;
background: #fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMCA1Jz48cGF0aCBmaWxsPScjOTk5JyBkPSdNMCAwTDEwIDBMNSA1TDAgMCcvPjwvc3ZnPg==") no-repeat right 0.75rem center;
background: var(--card-bgcolor) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMCA1Jz48cGF0aCBmaWxsPScjOTk5JyBkPSdNMCAwTDEwIDBMNSA1TDAgMCcvPjwvc3ZnPg==") no-repeat right 0.75rem center;
background-size: 8px 10px;
border: 1px solid rgba(0, 40, 100, 0.12);
border: 1px solid var(--card-border-color);
border-radius: 3px;
-webkit-appearance: none;
-moz-appearance: none;
@ -4469,9 +4470,9 @@ tbody.collapse.show {
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-color: var(--card-bgcolor);
background-clip: border-box;
border: 1px solid rgba(0, 40, 100, 0.12);
border: 1px solid var(--card-border-color);
border-radius: 3px;
}
@ -5475,9 +5476,9 @@ button.close {
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #fff;
background-color: var(--card-bgcolor);
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border: 1px solid var(--card-border-color);
border-radius: 3px;
outline: 0;
}
@ -10268,8 +10269,8 @@ body.fixed-header .page {
.header {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
background: #fff;
border-bottom: 1px solid rgba(0, 40, 100, 0.12);
background: var(--header-bgcolor);
border-bottom: 1px solid var(--border-color);
}
body.fixed-header .header {
@ -10325,6 +10326,10 @@ body.fixed-header .header {
width: auto;
}
[data-theme=dark] .header-brand-img {
filter:invert(1);
}
.header-avatar {
width: 2rem;
height: 2rem;
@ -10382,8 +10387,8 @@ body.fixed-header .header {
}
.footer {
background: #fff;
border-top: 1px solid rgba(0, 40, 100, 0.12);
background: var(--card-bgcolor);
border-top: 1px solid var(--card-border-color);
font-size: 0.875rem;
padding: 1.25rem 0;
color: #9aa0ac;
@ -13686,13 +13691,17 @@ Card alert
content: "";
}
[data-theme=dark] .dropdown-menu-arrow:before {
border-bottom-color: var(--ctrl-bgcolor);
}
.dropdown-menu-arrow:after {
position: absolute;
top: -5px;
left: 12px;
display: inline-block;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
border-bottom: 5px solid var(--ctrl-bgcolor);
border-left: 5px solid transparent;
content: "";
}

5
client/src/components/ui/Tooltip.css
View File

@ -4,6 +4,11 @@
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
}
[data-theme=dark] .tooltip-container {
background-color: var(--ctrl-select-bgcolor);
color: var(--mcolor);
}
.tooltip-custom--narrow {
max-width: 14rem;
}

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

@ -227,6 +227,14 @@ export const BLOCKING_MODES = {
custom_ip: 'custom_ip',
};
// Note that translation strings contain these modes (theme_CONSTANT)
// i.e. theme_auto, theme_light.
export const THEMES = {
auto: 'auto',
dark: 'dark',
light: 'light',
};
export const WHOIS_ICONS = {
location: 'location',
orgname: 'network',

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

@ -670,6 +670,15 @@ export const setHtmlLangAttr = (language) => {
window.document.documentElement.lang = language;
};
/**
* Sets UI theme.
*
* @param theme
*/
export const setUITheme = (theme) => {
document.body.dataset.theme = theme;
};
/**
* @param values {object}
* @returns {object}

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

@ -112,14 +112,6 @@ const dashboard = handleActions(
return newState;
},
[actions.getLanguageSuccess]: (state, { payload }) => {
const newState = {
...state,
language: payload,
};
return newState;
},
[actions.getClientsRequest]: (state) => ({
...state,
processingClients: true,
@ -148,8 +140,13 @@ const dashboard = handleActions(
[actions.getProfileSuccess]: (state, { payload }) => ({
...state,
name: payload.name,
theme: payload.theme,
processingProfile: false,
}),
[actions.changeThemeSuccess]: (state, { payload }) => ({
...state,
theme: payload.theme,
}),
},
{
processing: true,
@ -168,6 +165,7 @@ const dashboard = handleActions(
autoClients: [],
supportedTags: [],
name: '',
theme: 'auto',
checkUpdateFlag: false,
},
);