vmui: improvement the theme (#3731)

* feat: add detect the system theme * fix: change logic fetch tenants * feat: add docs and info to cardinality page --------- Co-authored-by: Aliaksandr Valialkin <valyala@victoriametrics.com>
2024-11-21 14:44:00 +00:00 · 2023-01-31 21:54:59 +01:00 · 2023-01-31 21:54:59 +01:00 · dcc5616126
commit dcc5616126
parent 080a3e2396
28 changed files with 427 additions and 201 deletions
--- a/app/vmui/packages/vmui/src/App.tsx
+++ b/app/vmui/packages/vmui/src/App.tsx
@ -8,56 +8,57 @@ import DashboardsLayout from "./pages/PredefinedPanels";
 import CardinalityPanel from "./pages/CardinalityPanel";
 import TopQueries from "./pages/TopQueries";
 import ThemeProvider from "./components/Main/ThemeProvider/ThemeProvider";
-import Spinner from "./components/Main/Spinner/Spinner";
 import TracePage from "./pages/TracePage";
 import ExploreMetrics from "./pages/ExploreMetrics";
 import PreviewIcons from "./components/Main/Icons/PreviewIcons";

 const App: FC = () => {

-  const [loadingTheme, setLoadingTheme] = useState(true);
+  const [loadedTheme, setLoadedTheme] = useState(false);

  return <>
-    {loadingTheme && <Spinner/>}
-    <ThemeProvider setLoadingTheme={setLoadingTheme}/>
-
-    <HashRouter key={`${loadingTheme}`}>
+    <HashRouter>
      <AppContextProvider>
-        <Routes>
-          <Route
-            path={"/"}
-            element={<Layout/>}
-          >
-            <Route
-              path={router.home}
-              element={<CustomPanel/>}
-            />
-            <Route
-              path={router.metrics}
-              element={<ExploreMetrics/>}
-            />
-            <Route
-              path={router.cardinality}
-              element={<CardinalityPanel/>}
-            />
-            <Route
-              path={router.topQueries}
-              element={<TopQueries/>}
-            />
-            <Route
-              path={router.trace}
-              element={<TracePage/>}
-            />
-            <Route
-              path={router.dashboards}
-              element={<DashboardsLayout/>}
-            />
-            <Route
-              path={router.icons}
-              element={<PreviewIcons/>}
-            />
-          </Route>
-        </Routes>
+        <>
+          <ThemeProvider onLoaded={setLoadedTheme}/>
+          {loadedTheme && (
+            <Routes>
+              <Route
+                path={"/"}
+                element={<Layout/>}
+              >
+                <Route
+                  path={router.home}
+                  element={<CustomPanel/>}
+                />
+                <Route
+                  path={router.metrics}
+                  element={<ExploreMetrics/>}
+                />
+                <Route
+                  path={router.cardinality}
+                  element={<CardinalityPanel/>}
+                />
+                <Route
+                  path={router.topQueries}
+                  element={<TopQueries/>}
+                />
+                <Route
+                  path={router.trace}
+                  element={<TracePage/>}
+                />
+                <Route
+                  path={router.dashboards}
+                  element={<DashboardsLayout/>}
+                />
+                <Route
+                  path={router.icons}
+                  element={<PreviewIcons/>}
+                />
+              </Route>
+            </Routes>
+          )}
+        </>
      </AppContextProvider>
    </HashRouter>
  </>;
--- a/app/vmui/packages/vmui/src/components/Chart/BarChart/BarChart.tsx
+++ b/app/vmui/packages/vmui/src/components/Chart/BarChart/BarChart.tsx
@ -9,7 +9,7 @@ const BarChart: FC<BarChartProps> = ({
  data,
  container,
  configs }) => {
-  const { darkTheme } = useAppState();
+  const { isDarkTheme } = useAppState();

  const uPlotRef = useRef<HTMLDivElement>(null);
  const [uPlotInst, setUPlotInst] = useState<uPlot>();
@ -30,7 +30,7 @@ const BarChart: FC<BarChartProps> = ({
    const u = new uPlot(options, data, uPlotRef.current);
    setUPlotInst(u);
    return u.destroy;
-  }, [uPlotRef.current, layoutSize, darkTheme]);
+  }, [uPlotRef.current, layoutSize, isDarkTheme]);

  useEffect(() => updateChart(), [data]);

--- a/app/vmui/packages/vmui/src/components/Chart/LineChart/LineChart.tsx
+++ b/app/vmui/packages/vmui/src/components/Chart/LineChart/LineChart.tsx
@ -48,7 +48,7 @@ const LineChart: FC<LineChartProps> = ({
  container,
  height
 }) => {
-  const { darkTheme } = useAppState();
+  const { isDarkTheme } = useAppState();

  const uPlotRef = useRef<HTMLDivElement>(null);
  const [isPanning, setPanning] = useState(false);
@ -225,7 +225,7 @@ const LineChart: FC<LineChartProps> = ({
    setUPlotInst(u);
    setXRange({ min: period.start, max: period.end });
    return u.destroy;
-  }, [uPlotRef.current, series, layoutSize, height, darkTheme]);
+  }, [uPlotRef.current, series, layoutSize, height, isDarkTheme]);

  useEffect(() => {
    window.addEventListener("keydown", handleKeyDown);
--- a/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/TenantsConfiguration/TenantsConfiguration.tsx
+++ b/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/TenantsConfiguration/TenantsConfiguration.tsx
@ -3,7 +3,6 @@ import { useAppDispatch, useAppState } from "../../../../state/common/StateConte
 import { useTimeDispatch } from "../../../../state/time/TimeStateContext";
 import { ArrowDownIcon, StorageIcons } from "../../../Main/Icons";
 import Button from "../../../Main/Button/Button";
-import { useFetchAccountIds } from "./hooks/useFetchAccountIds";
 import "./style.scss";
 import { replaceTenantId } from "../../../../utils/default-server-url";
 import classNames from "classnames";
@ -11,13 +10,12 @@ import Popper from "../../../Main/Popper/Popper";
 import { getAppModeEnable } from "../../../../utils/app-mode";
 import Tooltip from "../../../Main/Tooltip/Tooltip";

-const TenantsConfiguration: FC = () => {
+const TenantsConfiguration: FC<{accountIds: string[]}> = ({ accountIds }) => {
  const appModeEnable = getAppModeEnable();

  const { tenantId: tenantIdState, serverUrl } = useAppState();
  const dispatch = useAppDispatch();
  const timeDispatch = useTimeDispatch();
-  const { accountIds } = useFetchAccountIds();

  const [openOptions, setOpenOptions] = useState(false);
  const optionsButtonRef = useRef<HTMLDivElement>(null);
@ -46,7 +44,6 @@ const TenantsConfiguration: FC = () => {
    if (serverUrl) {
      const updateServerUrl = replaceTenantId(serverUrl, tenant);
      if (updateServerUrl === serverUrl) return;
-      console.log("SET_SERVER", updateServerUrl);
      dispatch({ type: "SET_SERVER", payload: updateServerUrl });
      timeDispatch({ type: "RUN_QUERY" });
    }
--- a/app/vmui/packages/vmui/src/components/Configurators/ThemeControl/ThemeControl.tsx
+++ b/app/vmui/packages/vmui/src/components/Configurators/ThemeControl/ThemeControl.tsx
@ -1,19 +1,16 @@
 import React from "react";
 import "./style.scss";
-import classNames from "classnames";
 import { useAppDispatch, useAppState } from "../../../state/common/StateContext";
+import { Theme } from "../../../types";
+import Toggle from "../../Main/Toggle/Toggle";

-const options = [
-  { title: "Light", value: false },
-  { title: "Dark", value: true }
-];
-
+const options = Object.values(Theme).map(value => ({ title: value, value }));
 const ThemeControl = () => {
-  const { darkTheme } = useAppState();
+  const { theme } = useAppState();
  const dispatch = useAppDispatch();

-  const createHandlerClickItem = (value: boolean) => () => {
-    dispatch({ type: "SET_DARK_THEME", payload: value });
+  const handleClickItem = (value: string) => {
+    dispatch({ type: "SET_THEME", payload: value as Theme });
  };

  return (
@ -21,21 +18,12 @@ const ThemeControl = () => {
      <div className="vm-server-configurator__title">
        Theme preferences
      </div>
-      <div className="vm-theme-control-options">
-        <div
-          className="vm-theme-control-options__highlight"
-          style={{ left: darkTheme ? "50%" : 0 }}
+      <div className="vm-theme-control__toggle">
+        <Toggle
+          options={options}
+          value={theme}
+          onChange={handleClickItem}
        />
-        {options.map(item => (
-          <div
-            className={classNames({
-              "vm-theme-control-options__item": true,
-              "vm-theme-control-options__item_active": item.value === darkTheme
-            })}
-            onClick={createHandlerClickItem(item.value)}
-            key={item.title}
-          >{item.title}</div>
-        ))}
      </div>
    </div>
  );
--- a/app/vmui/packages/vmui/src/components/Configurators/ThemeControl/style.scss
+++ b/app/vmui/packages/vmui/src/components/Configurators/ThemeControl/style.scss
@ -1,44 +1,10 @@
@use "src/styles/variables" as *;

 .vm-theme-control {
-  &-options {
-    position: relative;
+
+  &__toggle {
    display: inline-flex;
-    border: $border-divider;
-    border-radius: $border-radius-medium;
-    overflow: hidden;
-
-    &__item {
-      position: relative;
-      padding: $padding-small $padding-global;
-      border-right: $border-divider;
-      color: $color-text;
-      cursor: pointer;
-      z-index: 2;
-      transition: color 200ms ease-out;
-      user-select: none;
-
-      &:last-child {
-        border: none;
-      }
-
-      &_active {
-        color: $color-primary-text;
-      }
-
-      &:hover {
-        box-shadow: $box-shadow-popper;
-      }
-    }
-
-    &__highlight {
-      position: absolute;
-      top: 0;
-      left: 0;
-      background-color: $color-primary;
-      height: 100%;
-      width: 50%;
-      transition: left 150ms ease-in;
-    }
+    min-width: 300px;
+    text-transform: capitalize;
  }
 }
--- a/app/vmui/packages/vmui/src/components/Configurators/TimeRangeSettings/TimeSelector/TimeSelector.tsx
+++ b/app/vmui/packages/vmui/src/components/Configurators/TimeRangeSettings/TimeSelector/TimeSelector.tsx
@ -17,7 +17,7 @@ import classNames from "classnames";
 import { useAppState } from "../../../../state/common/StateContext";

 export const TimeSelector: FC = () => {
-  const { darkTheme } = useAppState();
+  const { isDarkTheme } = useAppState();
  const wrapperRef = useRef<HTMLDivElement>(null);
  const documentSize = useResize(document.body);
  const displayFullDate = useMemo(() => documentSize.width > 1280, [documentSize]);
@ -150,7 +150,7 @@ export const TimeSelector: FC = () => {
          <div
            className={classNames({
              "vm-time-selector-left-inputs": true,
-              "vm-time-selector-left-inputs_dark": darkTheme
+              "vm-time-selector-left-inputs_dark": isDarkTheme
            })}
          >
            <div
--- a/app/vmui/packages/vmui/src/components/Layout/Header/Header.tsx
+++ b/app/vmui/packages/vmui/src/components/Layout/Header/Header.tsx
@ -16,15 +16,17 @@ import StepConfigurator from "../../Configurators/StepConfigurator/StepConfigura
 import { useAppState } from "../../../state/common/StateContext";
 import HeaderNav from "./HeaderNav/HeaderNav";
 import TenantsConfiguration from "../../Configurators/GlobalSettings/TenantsConfiguration/TenantsConfiguration";
+import { useFetchAccountIds } from "../../Configurators/GlobalSettings/TenantsConfiguration/hooks/useFetchAccountIds";

 const Header: FC = () => {
-  const { darkTheme } = useAppState();
+  const { isDarkTheme } = useAppState();
  const appModeEnable = getAppModeEnable();
+  const { accountIds } = useFetchAccountIds();

  const primaryColor = useMemo(() => {
-    const variable = darkTheme ? "color-background-block" : "color-primary";
+    const variable = isDarkTheme ? "color-background-block" : "color-primary";
    return getCssVariable(variable);
-  }, [darkTheme]);
+  }, [isDarkTheme]);

  const { background, color } = useMemo(() => {
    const { headerStyles: {
@ -52,7 +54,7 @@ const Header: FC = () => {
    className={classNames({
      "vm-header": true,
      "vm-header_app": appModeEnable,
-      "vm-header_dark": darkTheme
+      "vm-header_dark": isDarkTheme
    })}
    style={{ background, color }}
  >
@ -70,7 +72,7 @@ const Header: FC = () => {
      background={background}
    />
    <div className="vm-header__settings">
-      {headerSetup?.tenant && <TenantsConfiguration/>}
+      {headerSetup?.tenant && <TenantsConfiguration accountIds={accountIds}/>}
      {headerSetup?.stepControl && <StepConfigurator/>}
      {headerSetup?.timeSelector && <TimeSelector/>}
      {headerSetup?.cardinalityDatePicker && <CardinalityDatePicker/>}
--- a/app/vmui/packages/vmui/src/components/Main/Alert/Alert.tsx
+++ b/app/vmui/packages/vmui/src/components/Main/Alert/Alert.tsx
@ -20,14 +20,14 @@ const icons = {
 const Alert: FC<AlertProps> = ({
  variant,
  children }) => {
-  const { darkTheme } = useAppState();
+  const { isDarkTheme } = useAppState();

  return (
    <div
      className={classNames({
        "vm-alert": true,
        [`vm-alert_${variant}`]: variant,
-        "vm-alert_dark": darkTheme
+        "vm-alert_dark": isDarkTheme
      })}
    >
      <div className="vm-alert__icon">{icons[variant || "info"]}</div>
--- a/app/vmui/packages/vmui/src/components/Main/DatePicker/TImePicker/TimePicker.tsx
+++ b/app/vmui/packages/vmui/src/components/Main/DatePicker/TImePicker/TimePicker.tsx
@ -14,7 +14,7 @@ enum TimeUnits { hour, minutes, seconds }


 const TimePicker: FC<CalendarTimepickerProps>= ({ selectDate, onChangeTime, onClose }) => {
-  const { darkTheme } = useAppState();
+  const { isDarkTheme } = useAppState();

  const [activeField, setActiveField] = useState<TimeUnits>(TimeUnits.hour);
  const [hours, setHours] = useState(selectDate.format("HH"));
@ -159,7 +159,7 @@ const TimePicker: FC<CalendarTimepickerProps>= ({ selectDate, onChangeTime, onCl
      <div
        className={classNames({
          "vm-calendar-time-picker-fields": true,
-          "vm-calendar-time-picker-fields_dark": darkTheme
+          "vm-calendar-time-picker-fields_dark": isDarkTheme
        })}
      >
        <input
--- a/app/vmui/packages/vmui/src/components/Main/Select/Select.tsx
+++ b/app/vmui/packages/vmui/src/components/Main/Select/Select.tsx
@ -27,7 +27,7 @@ const Select: FC<SelectProps> = ({
  autofocus,
  onChange
 }) => {
-  const { darkTheme } = useAppState();
+  const { isDarkTheme } = useAppState();

  const [search, setSearch] = useState("");
  const autocompleteAnchorEl = useRef<HTMLDivElement>(null);
@ -111,7 +111,7 @@ const Select: FC<SelectProps> = ({
    <div
      className={classNames({
        "vm-select": true,
-        "vm-select_dark": darkTheme
+        "vm-select_dark": isDarkTheme
      })}
    >
      <div
--- a/app/vmui/packages/vmui/src/components/Main/Spinner/Spinner.tsx
+++ b/app/vmui/packages/vmui/src/components/Main/Spinner/Spinner.tsx
@ -1,27 +1,31 @@
 import React, { CSSProperties, FC } from "preact/compat";
 import "./style.scss";
 import classNames from "classnames";
-import { getFromStorage } from "../../../utils/storage";
+import { useAppState } from "../../../state/common/StateContext";

 interface SpinnerProps {
  containerStyles?: CSSProperties;
  message?: string
 }

-const Spinner: FC<SpinnerProps> = ({ containerStyles = {}, message }) => (
-  <div
-    className={classNames({
-      "vm-spinner": true,
-      "vm-spinner_dark": getFromStorage("DARK_THEME")
-    })}
-    style={containerStyles && {}}
-  >
-    <div className="half-circle-spinner">
-      <div className="circle circle-1"></div>
-      <div className="circle circle-2"></div>
+const Spinner: FC<SpinnerProps> = ({ containerStyles = {}, message }) => {
+  const { isDarkTheme } = useAppState();
+
+  return (
+    <div
+      className={classNames({
+        "vm-spinner": true,
+        "vm-spinner_dark": isDarkTheme,
+      })}
+      style={containerStyles && {}}
+    >
+      <div className="half-circle-spinner">
+        <div className="circle circle-1"></div>
+        <div className="circle circle-2"></div>
+      </div>
+      {message && <div className="vm-spinner__message">{message}</div>}
    </div>
-    {message && <div className="vm-spinner__message">{message}</div>}
-  </div>
-);
+  );
+};

 export default Spinner;
--- a/app/vmui/packages/vmui/src/components/Main/TextField/TextField.tsx
+++ b/app/vmui/packages/vmui/src/components/Main/TextField/TextField.tsx
@ -39,7 +39,7 @@ const TextField: FC<TextFieldProps> = ({
  onFocus,
  onBlur
 }) => {
-  const { darkTheme } = useAppState();
+  const { isDarkTheme } = useAppState();

  const inputRef = useRef<HTMLInputElement>(null);
  const textareaRef = useRef<HTMLTextAreaElement>(null);
@ -83,7 +83,7 @@ const TextField: FC<TextFieldProps> = ({
    className={classNames({
      "vm-text-field": true,
      "vm-text-field_textarea": type === "textarea",
-      "vm-text-field_dark": darkTheme
+      "vm-text-field_dark": isDarkTheme
    })}
    data-replicated-value={value}
  >
--- a/app/vmui/packages/vmui/src/components/Main/ThemeProvider/ThemeProvider.ts
+++ b/app/vmui/packages/vmui/src/components/Main/ThemeProvider/ThemeProvider.ts
@ -1,12 +1,15 @@
-import { FC, useEffect } from "preact/compat";
+import { FC, useEffect, useState } from "preact/compat";
 import { getContrastColor } from "../../../utils/color";
-import { getCssVariable, setCssVariable } from "../../../utils/theme";
+import { getCssVariable, isSystemDark, setCssVariable } from "../../../utils/theme";
 import { AppParams, getAppModeParams } from "../../../utils/app-mode";
 import { getFromStorage } from "../../../utils/storage";
 import { darkPalette, lightPalette } from "../../../constants/palette";
+import { Theme } from "../../../types";
+import { useAppDispatch, useAppState } from "../../../state/common/StateContext";
+import useSystemTheme from "../../../hooks/useSystemTheme";

-interface StyleVariablesProps {
-  setLoadingTheme: (val: boolean) => void
+interface ThemeProviderProps {
+  onLoaded: (val: boolean) => void
 }

 const colorVariables = [
@ -18,9 +21,18 @@ const colorVariables = [
  "success",
 ];

-export const ThemeProvider: FC<StyleVariablesProps> = ({ setLoadingTheme }) => {
+export const ThemeProvider: FC<ThemeProviderProps> = ({ onLoaded }) => {

-  const { palette = {} } = getAppModeParams();
+  const { palette: paletteAppMode = {} } = getAppModeParams();
+  const { theme } = useAppState();
+  const isDarkTheme = useSystemTheme();
+  const dispatch = useAppDispatch();
+
+  const [palette, setPalette] = useState({
+    [Theme.dark]: darkPalette,
+    [Theme.light]: lightPalette,
+    [Theme.system]: isSystemDark() ? darkPalette : lightPalette
+  });

  const setScrollbarSize = () => {
    const { innerWidth, innerHeight } = window;
@ -30,16 +42,21 @@ export const ThemeProvider: FC<StyleVariablesProps> = ({ setLoadingTheme }) => {
  };

  const setContrastText = () => {
-    colorVariables.forEach(variable => {
+    colorVariables.forEach((variable, i) => {
      const color = getCssVariable(`color-${variable}`);
      const text = getContrastColor(color);
      setCssVariable(`${variable}-text`, text);
+
+      if (i === colorVariables.length - 1) {
+        dispatch({ type: "SET_DARK_THEME" });
+        onLoaded(true);
+      }
    });
  };

  const setAppModePalette = () => {
    colorVariables.forEach(variable => {
-      const colorFromAppMode = palette[variable as keyof AppParams["palette"]];
+      const colorFromAppMode = paletteAppMode[variable as keyof AppParams["palette"]];
      if (colorFromAppMode) setCssVariable(`color-${variable}`, colorFromAppMode);
    });

@ -47,25 +64,33 @@ export const ThemeProvider: FC<StyleVariablesProps> = ({ setLoadingTheme }) => {
  };

  const setTheme = () => {
-    const darkTheme = getFromStorage("DARK_THEME");
-    const palette = darkTheme ? darkPalette : lightPalette;
-    Object.entries(palette).forEach(([variable, value]) => {
+    const theme = (getFromStorage("THEME") || Theme.system) as Theme;
+    const result = palette[theme];
+    Object.entries(result).forEach(([variable, value]) => {
      setCssVariable(variable, value);
    });
    setContrastText();
  };

+  const updatePalette = () => {
+    const newSystemPalette = isSystemDark() ? darkPalette : lightPalette;
+    if (palette[Theme.system] === newSystemPalette) {
+      setTheme();
+      return;
+    }
+    setPalette(prev => ({
+      ...prev,
+      [Theme.system]: newSystemPalette
+    }));
+  };
+
  useEffect(() => {
    setAppModePalette();
    setScrollbarSize();
    setTheme();
-    setLoadingTheme(false);
+  }, [palette]);

-    window.addEventListener("storage", setTheme);
-    return () => {
-      window.removeEventListener("storage", setTheme);
-    };
-  }, []);
+  useEffect(updatePalette, [theme, isDarkTheme]);

  return null;
 };
--- a/app/vmui/packages/vmui/src/components/Main/Toggle/Toggle.tsx
+++ b/app/vmui/packages/vmui/src/components/Main/Toggle/Toggle.tsx
@ -0,0 +1,94 @@
+import React, { FC, useEffect, useRef, useState } from "preact/compat";
+import classNames from "classnames";
+import { ReactNode } from "react";
+import "./style.scss";
+
+interface ToggleProps {
+  options: {value: string, title?: string, icon?: ReactNode}[]
+  value: string
+  onChange: (val: string) => void
+  label?: string
+}
+
+const Toggle: FC<ToggleProps> = ({ options, value, label, onChange }) => {
+
+  const activeRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState({
+    width: "0px",
+    left: "0px",
+    borderRadius: "0px"
+  });
+
+  const createHandlerChange = (value: string) => () => {
+    onChange(value);
+  };
+
+  useEffect(() => {
+    if (!activeRef.current) {
+      setPosition({
+        width: "0px",
+        left: "0px",
+        borderRadius: "0px"
+      });
+      return;
+    }
+    const index = options.findIndex(o => o.value === value);
+    const { width: widthRect } = activeRef.current.getBoundingClientRect();
+
+    let width = widthRect;
+    let left = index * width;
+    let borderRadius = "0";
+    if (index === 0) borderRadius = "16px 0 0 16px";
+
+    if (index === options.length - 1) {
+      borderRadius = "10px";
+      left -= 1;
+      borderRadius = "0 16px 16px 0";
+    }
+
+    if (index !== 0 && (index !== options.length - 1)) {
+      width += 1;
+      left -= 1;
+    }
+
+
+    setPosition({ width: `${width}px`, left: `${left}px`, borderRadius });
+  }, [activeRef, value, options]);
+
+  return (
+    <div className="vm-toggles">
+      {label && (
+        <label className="vm-toggles__label">
+          {label}
+        </label>
+      )}
+      <div
+        className="vm-toggles-group"
+        style={{ gridTemplateColumns: `repeat(${options.length}, 1fr)` }}
+      >
+        {position.borderRadius && <div
+          className="vm-toggles-group__highlight"
+          style={position}
+        />}
+        {options.map((option, i) => (
+          <div
+            className={classNames({
+              "vm-toggles-group-item": true,
+              "vm-toggles-group-item_first": i === 0,
+              "vm-toggles-group-item_active": option.value === value,
+              "vm-toggles-group-item_icon": option.icon && option.title
+            })}
+            onClick={createHandlerChange(option.value)}
+            key={option.value}
+            ref={option.value === value ? activeRef : null}
+          >
+            {option.icon}
+            {option.title}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Toggle;
--- a/app/vmui/packages/vmui/src/components/Main/Toggle/style.scss
+++ b/app/vmui/packages/vmui/src/components/Main/Toggle/style.scss
@ -0,0 +1,81 @@
+@use "src/styles/variables" as *;
+
+.vm-toggles {
+  position: relative;
+  display: grid;
+  gap: 3px;
+  width: 100%;
+
+  &__label {
+    padding: 0 $padding-global;
+    color: $color-text-secondary;
+    font-size: $font-size-small;
+    line-height: 1;
+  }
+
+  &-group {
+    position: relative;
+    display: grid;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+
+    &-item {
+      position: relative;
+      display: grid;
+      align-items: center;
+      justify-content: center;
+      padding: $padding-small;
+      border-right: $border-divider;
+      border-top: $border-divider;
+      border-bottom: $border-divider;
+      font-size: $font-size-small;
+      color: $color-text-secondary;
+      font-weight: bold;
+      cursor: pointer;
+      text-align: center;
+      transition: color 150ms ease-in;
+      z-index: 2;
+      user-select: none;
+
+      &_first {
+        border-radius: 16px 0 0 16px;
+        border-left: $border-divider
+      }
+
+      &:last-child {
+        border-radius: 0 16px 16px 0;
+        border-left: none;
+      }
+
+      &_icon {
+        grid-template-columns: 14px auto;
+        gap: 4px;
+      }
+
+      &:hover {
+        color: $color-primary;
+      }
+
+      &_active {
+        color: $color-primary;
+        border-color: transparent;
+
+        &:hover {
+          background-color: transparent;
+        }
+      }
+    }
+
+    &__highlight {
+      position: absolute;
+      top: 0;
+      height: 100%;
+      background-color: rgba($color-primary, 0.08);
+      border: 1px solid $color-primary;
+      transition: left 200ms cubic-bezier(0.280, 0.840, 0.420, 1), border-radius 200ms linear;
+      z-index: 1;
+    }
+  }
+}
--- a/app/vmui/packages/vmui/src/components/TraceQuery/NestedNav/NestedNav.tsx
+++ b/app/vmui/packages/vmui/src/components/TraceQuery/NestedNav/NestedNav.tsx
@ -16,7 +16,7 @@ interface OpenLevels {
 }

 const NestedNav: FC<RecursiveProps> = ({ trace, totalMsec })  => {
-  const { darkTheme } = useAppState();
+  const { isDarkTheme } = useAppState();
  const [openLevels, setOpenLevels] = useState({} as OpenLevels);

  const handleListClick = (level: number) => () => {
@ -31,7 +31,7 @@ const NestedNav: FC<RecursiveProps> = ({ trace, totalMsec })  => {
    <div
      className={classNames({
        "vm-nested-nav": true,
-        "vm-nested-nav_dark": darkTheme,
+        "vm-nested-nav_dark": isDarkTheme,
      })}
    >
      <div
--- a/app/vmui/packages/vmui/src/constants/palette.ts
+++ b/app/vmui/packages/vmui/src/constants/palette.ts
@ -7,7 +7,7 @@ export const darkPalette = {
  "color-success": "#57ab5a",
  "color-background-body": "#22272e",
  "color-background-block": "#2d333b",
-  "color-background-tooltip": "rgba(22, 22, 22, 0.6)",
+  "color-background-tooltip": "rgba(22, 22, 22, 0.8)",
  "color-text": "#cdd9e5",
  "color-text-secondary": "#768390",
  "color-text-disabled": "#636e7b",
--- a/app/vmui/packages/vmui/src/hooks/useSystemTheme.ts
+++ b/app/vmui/packages/vmui/src/hooks/useSystemTheme.ts
@ -0,0 +1,20 @@
+import { useEffect, useState } from "preact/compat";
+import { isSystemDark } from "../utils/theme";
+
+const useThemeDetector = () => {
+  const [isDarkTheme, setIsDarkTheme] = useState(isSystemDark());
+
+  const mqListener = ((e: MediaQueryListEvent) => {
+    setIsDarkTheme(e.matches);
+  });
+
+  useEffect(() => {
+    const darkThemeMq = window.matchMedia("(prefers-color-scheme: dark)");
+    darkThemeMq.addEventListener("change", mqListener);
+    return () => darkThemeMq.removeEventListener("change", mqListener);
+  }, []);
+
+  return isDarkTheme;
+};
+
+export default useThemeDetector;
--- a/app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityConfigurator/CardinalityConfigurator.tsx
+++ b/app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityConfigurator/CardinalityConfigurator.tsx
@ -1,14 +1,13 @@
-import React, { FC } from "react";
+import React, { FC, useMemo } from "react";
 import QueryEditor from "../../../components/Configurators/QueryEditor/QueryEditor";
 import { useFetchQueryOptions } from "../../../hooks/useFetchQueryOptions";
 import { ErrorTypes } from "../../../types";
 import { useQueryDispatch, useQueryState } from "../../../state/query/QueryStateContext";
 import Switch from "../../../components/Main/Switch/Switch";
-import { PlayIcon, QuestionIcon } from "../../../components/Main/Icons";
+import { InfoIcon, PlayIcon, QuestionIcon, WikiIcon } from "../../../components/Main/Icons";
 import Button from "../../../components/Main/Button/Button";
 import TextField from "../../../components/Main/TextField/TextField";
 import "./style.scss";
-import { useMemo } from "preact/compat";
 import Tooltip from "../../../components/Main/Tooltip/Tooltip";

 export interface CardinalityConfiguratorProps {
@ -65,7 +64,7 @@ const CardinalityConfigurator: FC<CardinalityConfiguratorProps> = ({
    <div className="vm-cardinality-configurator-controls">
      <div className="vm-cardinality-configurator-controls__query">
        <QueryEditor
-          value={query || match || ""}
+          value={query}
          autocomplete={autocomplete}
          options={queryOptions}
          error={error}
@ -91,10 +90,22 @@ const CardinalityConfigurator: FC<CardinalityConfiguratorProps> = ({
          type="text"
          value={focusLabel || ""}
          onChange={onFocusLabelChange}
+          endIcon={(
+            <Tooltip
+              title={(
+                <div>
+                  <p>To identify values with the highest number of series for the selected label.</p>
+                  <p>Adds a table showing the series with the highest number of series.</p>
+                </div>
+              )}
+            >
+              <InfoIcon/>
+            </Tooltip>
+          )}
        />
      </div>
    </div>
-    <div className="vm-cardinality-configurator-bottom__autocomplete">
+    <div className="vm-cardinality-configurator-additional">
      <Switch
        label={"Autocomplete"}
        value={autocomplete}
@ -108,17 +119,22 @@ const CardinalityConfigurator: FC<CardinalityConfiguratorProps> = ({
        Show top {topN} entries per table.
      </div>
      <a
-        className="vm-cardinality-configurator-bottom__docs"
-        href="https://victoriametrics.com/blog/cardinality-explorer/"
+        className="vm-link vm-link_with-icon"
        target="_blank"
+        href="https://docs.victoriametrics.com/#cardinality-explorer"
        rel="help noreferrer"
      >
-        <Tooltip title="Example of using">
-          <Button
-            variant="text"
-            startIcon={<QuestionIcon/>}
-          />
-        </Tooltip>
+        <WikiIcon/>
+        Documentation
+      </a>
+      <a
+        className="vm-link vm-link_with-icon"
+        target="_blank"
+        href="https://victoriametrics.com/blog/cardinality-explorer/"
+        rel="help noreferrer"
+      >
+        <QuestionIcon/>
+        Example of using
      </a>
      <Button
        startIcon={<PlayIcon/>}
--- a/app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityConfigurator/style.scss
+++ b/app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityConfigurator/style.scss
@ -16,20 +16,23 @@
    }
  }

+  &-additional {
+    display: flex;
+    align-items: center;
+  }
+
  &-bottom {
-    display: grid;
-    grid-template-columns: 1fr auto auto;
-    align-items: flex-end;
-    gap: $padding-small;
+    display: flex;
+    align-items: center;
+    gap: $padding-global;

    &__info {
+      flex-grow: 1;
      font-size: $font-size;
    }

-    &__docs {
-      display: flex;
-      align-items: center;
-      justify-content: center;
+    a {
+      color: $color-text-secondary;
    }
  }
 }
--- a/app/vmui/packages/vmui/src/pages/CardinalityPanel/index.tsx
+++ b/app/vmui/packages/vmui/src/pages/CardinalityPanel/index.tsx
@ -31,10 +31,6 @@ const Index: FC = () => {
    cardinalityDispatch({ type: "RUN_QUERY" });
  };

-  const onSetQuery = (query: string) => {
-    setQuery(query);
-  };
-
  const onSetHistory = (step: number) => {
    const newIndexHistory = queryHistoryIndex + step;
    if (newIndexHistory < 0 || newIndexHistory >= queryHistory.length) return;
@ -86,7 +82,7 @@ const Index: FC = () => {
        totalLabelValuePairs={tsdbStatusData.totalLabelValuePairs}
        focusLabel={focusLabel}
        onRunQuery={onRunQuery}
-        onSetQuery={onSetQuery}
+        onSetQuery={setQuery}
        onSetHistory={onSetHistory}
        onTopNChange={onTopNChange}
        onFocusLabelChange={onFocusLabelChange}
--- a/app/vmui/packages/vmui/src/router/index.ts
+++ b/app/vmui/packages/vmui/src/router/index.ts
@ -8,16 +8,18 @@ const router = {
  icons: "/icons"
 };

+export interface RouterOptionsHeader {
+  tenant?: boolean,
+  stepControl?: boolean,
+  timeSelector?: boolean,
+  executionControls?: boolean,
+  globalSettings?: boolean,
+  cardinalityDatePicker?: boolean
+}
+
 export interface RouterOptions {
  title?: string,
-  header: {
-    tenant?: boolean,
-    stepControl?: boolean,
-    timeSelector?: boolean,
-    executionControls?: boolean,
-    globalSettings?: boolean,
-    cardinalityDatePicker?: boolean
-  }
+  header: RouterOptionsHeader
 }

 const routerOptionsDefault = {
--- a/app/vmui/packages/vmui/src/state/common/reducer.ts
+++ b/app/vmui/packages/vmui/src/state/common/reducer.ts
@ -1,24 +1,29 @@
 import { getDefaultServer } from "../../utils/default-server-url";
 import { getQueryStringValue } from "../../utils/query-string";
 import { getFromStorage, saveToStorage } from "../../utils/storage";
+import { Theme } from "../../types";
+import { isDarkTheme } from "../../utils/theme";

 export interface AppState {
  serverUrl: string;
  tenantId: string;
-  darkTheme: boolean
+  theme: Theme;
+  isDarkTheme: boolean | null;
 }

 export type Action =
  | { type: "SET_SERVER", payload: string }
-  | { type: "SET_DARK_THEME", payload: boolean }
+  | { type: "SET_THEME", payload: Theme }
  | { type: "SET_TENANT_ID", payload: string }
+  | { type: "SET_DARK_THEME" }

 const tenantId = getQueryStringValue("g0.tenantID", "") as string;

 export const initialState: AppState = {
  serverUrl: getDefaultServer(tenantId),
  tenantId,
-  darkTheme: !!getFromStorage("DARK_THEME")
+  theme: (getFromStorage("THEME") || Theme.system) as Theme,
+  isDarkTheme: null
 };

 export function reducer(state: AppState, action: Action): AppState {
@ -33,11 +38,16 @@ export function reducer(state: AppState, action: Action): AppState {
        ...state,
        tenantId: action.payload
      };
-    case "SET_DARK_THEME":
-      saveToStorage("DARK_THEME", action.payload);
+    case "SET_THEME":
+      saveToStorage("THEME", action.payload);
      return {
        ...state,
-        darkTheme: action.payload
+        theme: action.payload,
+      };
+    case "SET_DARK_THEME":
+      return {
+        ...state,
+        isDarkTheme: isDarkTheme(state.theme)
      };
    default:
      throw new Error();
--- a/app/vmui/packages/vmui/src/styles/components/link.scss
+++ b/app/vmui/packages/vmui/src/styles/components/link.scss
@ -8,6 +8,14 @@
    color: $color-primary;
  }

+  &_with-icon {
+    display: grid;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    grid-template-columns: 14px auto;
+  }
+
  &:hover {
    color: $color-primary;
    text-decoration: underline;
--- a/app/vmui/packages/vmui/src/types/index.ts
+++ b/app/vmui/packages/vmui/src/types/index.ts
@ -119,3 +119,9 @@ export interface GraphSize {
  isDefault?: boolean,
  height: () => number
 }
+
+export enum Theme {
+  system = "system",
+  light = "light",
+  dark = "dark",
+}
--- a/app/vmui/packages/vmui/src/utils/storage.ts
+++ b/app/vmui/packages/vmui/src/utils/storage.ts
@ -7,7 +7,7 @@ export type StorageKeys = "BASIC_AUTH_DATA"
    | "SERIES_LIMITS"
    | "TABLE_COMPACT"
    | "TIMEZONE"
-    | "DARK_THEME"
+    | "THEME"

 export const saveToStorage = (key: StorageKeys, value: string | boolean | Record<string, unknown>): void => {
  if (value) {
--- a/app/vmui/packages/vmui/src/utils/theme.ts
+++ b/app/vmui/packages/vmui/src/utils/theme.ts
@ -1,3 +1,5 @@
+import { Theme } from "../types";
+
 export const getCssVariable = (variable: string) => {
  return getComputedStyle(document.documentElement).getPropertyValue(`--${variable}`);
 };
@ -5,3 +7,8 @@ export const getCssVariable = (variable: string) => {
 export const setCssVariable = (variable: string, value: string) => {
  document.documentElement.style.setProperty(`--${variable}`, value);
 };
+
+export const isSystemDark = () => window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+export const isDarkTheme = (theme: Theme) => (theme === Theme.system && isSystemDark()) || theme === Theme.dark;
+