all: sync with master; upd chlog

client/src/components/ui/Dropdown.css

@@ -1,6 +1,6 @@
 .dropdown-item.active,
 .dropdown-item:active {
-    background-color: var(--green-74);
+    background-color: var(--btn-success-bgcolor);
 }
 
 .dropdown-menu {

client/src/components/ui/Footer.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import classNames from 'classnames';
@@ -10,7 +10,7 @@ import i18n from '../../i18n';
 import Version from './Version';
 import './Footer.css';
 import './Select.css';
-import { setHtmlLangAttr } from '../../helpers/helpers';
+import { setHtmlLangAttr, setUITheme } from '../../helpers/helpers';
 import { changeTheme } from '../../actions';
 
 const linksData = [
@@ -36,6 +36,13 @@ const Footer = () => {
     const currentTheme = useSelector((state) => (state.dashboard ? state.dashboard.theme : 'auto'));
     const profileName = useSelector((state) => (state.dashboard ? state.dashboard.name : ''));
     const isLoggedIn = profileName !== '';
+    const [currentThemeLocal, setCurrentThemeLocal] = useState('auto');
+
+    useEffect(() => {
+        if (!isLoggedIn) {
+            setUITheme(window.matchMedia('(prefers-color-scheme: dark)').matches ? THEMES.dark : THEMES.light);
+        }
+    }, []);
 
     const getYear = () => {
         const today = new Date();
@@ -53,6 +60,12 @@ const Footer = () => {
         dispatch(changeTheme(value));
     };
 
+    const onThemeChangedLocal = (event) => {
+        const { value } = event.target;
+        setUITheme(value);
+        setCurrentThemeLocal(value);
+    };
+
     const renderCopyright = () => <div className="footer__column">
         <div className="footer__copyright">
             {t('copyright')} &copy; {getYear()}{' '}
@@ -70,24 +83,34 @@ const Footer = () => {
             {t(name)}
         </a>);
 
-    const renderThemeSelect = (currentTheme, isLoggedIn) => {
-        if (!isLoggedIn) {
-            return '';
-        }
+    const themeSelectOptions = () => (
+        Object.values(THEMES)
+            .map((theme) => (
+                <option key={theme} value={theme}>
+                    {t(`theme_${theme}`)}
+                </option>
+            ))
+    );
 
-        return <select
+    const renderThemeSelect = () => (
+        <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>;
-    };
+            {themeSelectOptions()}
+        </select>
+    );
+
+    const renderThemeSelectLocal = () => (
+        <select
+            className="form-control select select--theme"
+            value={currentThemeLocal}
+            onChange={onThemeChangedLocal}
+        >
+            {themeSelectOptions()}
+        </select>
+    );
 
     return (
         <>
@@ -98,7 +121,7 @@ const Footer = () => {
                             {renderLinks(linksData)}
                         </div>
                         <div className="footer__column footer__column--theme">
-                            {renderThemeSelect(currentTheme, isLoggedIn)}
+                            {isLoggedIn ? renderThemeSelect() : renderThemeSelectLocal()}
                         </div>
                         <div className="footer__column footer__column--language">
                             <select

client/src/components/ui/Line.css

@@ -11,6 +11,10 @@
     font-size: 0.7rem;
 }
 
+.card-chart-bg {
+    color: var(--black);
+}
+
 .card-chart-bg path[d^="M0,32"] {
     transform: translateY(32px);
 }

client/src/components/ui/Line.js

@@ -25,9 +25,9 @@ const Line = ({
         theme={{
             crosshair: {
                 line: {
-                    stroke: 'black',
+                    stroke: 'currentColor',
                     strokeWidth: 1,
-                    strokeOpacity: 0.35,
+                    strokeOpacity: 0.5,
                 },
             },
         }}

client/src/components/ui/Loading.css

@@ -13,7 +13,7 @@
     z-index: 100;
     width: 100%;
     min-height: 100vh;
-    background-color: rgba(255, 255, 255, 0.48);
+    background-color: var(--loading-bg);
 }
 
 .loading:after {

client/src/components/ui/ReactTable.css

@@ -23,14 +23,29 @@
     background-color: var(--rt-nodata-bgcolor);
 }
 
+.ReactTable .-loading .-loading-inner {
+    color: var(--gray300);
+}
+
 .ReactTable .-pagination input, .ReactTable .-pagination select {
     color: var(--rt-nodata-color);
     background-color: var(--rt-nodata-bgcolor);
 }
 
+[data-theme=dark] .ReactTable .rt-table::-webkit-scrollbar-track {
+    background-color: var(--card-bgcolor);
+}
+
+[data-theme=dark] .ReactTable .rt-table::-webkit-scrollbar-thumb {
+    background-color: #888888;
+}
+
 [data-theme=dark] .ReactTable .-pagination .-btn {
-    color: var(--scolor);
-    background-color: var(--ctrl-bgcolor);
+    filter: invert(1);
+}
+
+[data-theme=dark] .ReactTable .-pagination .-btn:disabled {
+    opacity: 1;
 }
 
 .rt-tr-group.logs__row--red {

client/src/components/ui/Tabler.css

@@ -2579,16 +2579,58 @@ fieldset:disabled a.btn {
     box-shadow: 0 0 0 2px rgba(134, 142, 150, 0.5);
 }
 
+[data-theme=dark] .btn-secondary {
+    color: #868e96;
+    background-color: transparent;
+    background-image: none;
+    border-color: #868e96;
+}
+
+[data-theme=dark] .btn-secondary:hover {
+    color: #fff;
+    background-color: #868e96;
+    border-color: #868e96;
+}
+
+[data-theme=dark] .btn-secondary:focus,
+[data-theme=dark] .btn-secondary.focus {
+    box-shadow: none;
+}
+
+[data-theme=dark] .btn-secondary:focus-visible,
+[data-theme=dark] .btn-secondary.focus {
+    box-shadow: 0 0 0 2px rgba(134, 142, 150, 0.5);
+}
+
+[data-theme=dark] .btn-secondary.disabled,
+[data-theme=dark] .btn-secondary:disabled {
+    color: #868e96;
+    background-color: transparent;
+    border: none;
+}
+
+[data-theme=dark] .btn-secondary:not(:disabled):not(.disabled):active,
+[data-theme=dark] .btn-secondary:not(:disabled):not(.disabled).active {
+    color: #fff;
+    background-color: #868e96;
+    border-color: #868e96;
+}
+
+[data-theme=dark] .btn-secondary:not(:disabled):not(.disabled):active:focus,
+[data-theme=dark] .btn-secondary:not(:disabled):not(.disabled).active:focus {
+    box-shadow: 0 0 0 2px rgba(134, 142, 150, 0.5);
+}
+
 .btn-success {
     color: #fff;
     background-color: var(--btn-success-bgcolor);
-    border-color: #5eba00;
+    border-color: var(--btn-success-bgcolor);
 }
 
 .btn-success:hover {
     color: #fff;
     background-color: #4b9400;
-    border-color: #448700;
+    border-color: #4b9400;
 }
 
 .btn-success:focus,
@@ -2608,7 +2650,7 @@ fieldset:disabled a.btn {
 .show>.btn-success.dropdown-toggle {
     color: #fff;
     background-color: #448700;
-    border-color: #3e7a00;
+    border-color: #448700;
 }
 
 .btn-success:not(:disabled):not(.disabled):active:focus,
@@ -3251,6 +3293,10 @@ tbody.collapse.show {
     border-radius: 3px;
 }
 
+[data-theme=dark] .dropdown-menu {
+    border: 1px solid var(--card-border-color);
+}
+
 .dropup .dropdown-menu {
     margin-top: 0;
     margin-bottom: 0.125rem;
@@ -5509,7 +5555,7 @@ button.close {
     -ms-flex-pack: justify;
     justify-content: space-between;
     padding: 1rem;
-    border-bottom: 1px solid #e9ecef;
+    border-bottom: 1px solid var(--card-border-color);
     border-top-left-radius: 3px;
     border-top-right-radius: 3px;
 }
@@ -5539,7 +5585,7 @@ button.close {
     -ms-flex-pack: end;
     justify-content: flex-end;
     padding: 1rem;
-    border-top: 1px solid #e9ecef;
+    border-top: 1px solid var(--card-border-color);
 }
 
 .modal-footer> :not(:first-child) {
@@ -13679,6 +13725,10 @@ Card alert
     color: #6e7687;
 }
 
+[data-theme=dark] .dropdown-item {
+    color: #ffffff;
+}
+
 .dropdown-menu-arrow:before {
     position: absolute;
     top: -6px;
@@ -13706,6 +13756,10 @@ Card alert
     content: "";
 }
 
+[data-theme=dark] .dropdown-menu-arrow:after {
+    border-bottom: 5px solid var(--card-border-color);
+}
+
 .dropdown-menu-arrow.dropdown-menu-right:before,
 .dropdown-menu-arrow.dropdown-menu-right:after {
     left: auto;
@@ -15473,6 +15527,10 @@ a.tag-addon:hover {
     transition: 0.3s border-color, 0.3s background-color;
 }
 
+[data-theme=dark] .custom-switch-indicator {
+    opacity: 0.75;
+}
+
 .custom-switch-indicator:before {
     content: "";
     position: absolute;

client/src/components/ui/Tabs.css

@@ -3,7 +3,7 @@
     justify-content: space-between;
     margin-bottom: 15px;
     padding: 10px 0;
-    border-bottom: 1px solid #e8e8e8;
+    border-bottom: 1px solid var(--card-border-color);
     overflow: auto;
 }
 
@@ -40,6 +40,10 @@
     opacity: 0.6;
 }
 
+[data-theme=dark] .tab__control {
+    filter: invert(1);
+}
+
 @media screen and (min-width: 768px) {
     .tab__control {
         white-space: normal;