Pull request 1713: 613 dark theme vol.2

Updates #613.

Squashed commit of the following:

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

    client: review dark theme colors

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

    client: review dark theme colors

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

    client: review dark theme colors

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

    client: default language

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

    client: default language

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

    client: review dark theme colors

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

    client: review dark theme colors

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

    client: dark theme colors

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

    client: dark theme colors

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

    all: docs

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

    client: imp code

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

    client: dark theme login

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

    client: dark theme css

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

    client: imp code

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

    client: imp code

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

    client: auto theme handling

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

    home: imp docs

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

    client: theme dropdown

CHANGELOG.md

@@ -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`.

client/src/__locales/en.json

@@ -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",

client/src/actions/index.js

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

client/src/api/Api.js

@@ -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' };
 

client/src/components/App/index.css

@@ -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;

client/src/components/App/index.js

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

client/src/components/Header/Header.css

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

client/src/components/Logs/Cells/IconTooltip.css

@@ -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%;

client/src/components/Logs/Logs.css

@@ -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,16 +381,16 @@
 }
 
 .logs__row--white {
-    background-color: var(--white);
+    background-color: var(--logs__row--white-bgcolor);
 }
 
 .logs__row--yellow {
     background-color: var(--yellow);
 }
 
 .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;

client/src/components/Settings/Settings.css

@@ -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 {

client/src/components/ui/Checkbox.css

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

client/src/components/ui/Footer.css

@@ -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;
     }