github.com/turbot/steampipe@v1.7.0-rc.0.0.20240517123944-7cef272d4458/ui/dashboard/src/hooks/useChartThemeColors.ts (about)

     1  import { KeyValueStringPairs } from "../components/dashboards/common/types";
     2  import { useDashboard } from "./useDashboard";
     3  import { useCallback, useEffect, useState } from "react";
     4  
     5  const useChartThemeColors = () => {
     6    const {
     7      themeContext: { theme, wrapperRef },
     8    } = useDashboard();
     9  
    10    const getThemeColors = useCallback(() => {
    11      // We need to get the theme CSS variable values - these are accessible on the theme root element and below in the tree
    12      const style = wrapperRef
    13        ? // @ts-ignore
    14          window.getComputedStyle(wrapperRef)
    15        : null;
    16      if (style) {
    17        const dashboard = style.getPropertyValue("--color-dashboard").trim();
    18        const dashboardPanel = style
    19          .getPropertyValue("--color-dashboard-panel")
    20          .trim();
    21        const blackScale3 = style
    22          .getPropertyValue("--color-black-scale-3")
    23          .trim();
    24        const blackScale4 = style
    25          .getPropertyValue("--color-black-scale-4")
    26          .trim();
    27        const foreground = style.getPropertyValue("--color-foreground").trim();
    28        const foregroundLight = style
    29          .getPropertyValue("--color-foreground-light")
    30          .trim();
    31        const foregroundLighter = style
    32          .getPropertyValue("--color-foreground-lighter")
    33          .trim();
    34        const foregroundLightest = style
    35          .getPropertyValue("--color-foreground-lightest")
    36          .trim();
    37        const alert = style.getPropertyValue("--color-alert").trim();
    38        const info = style.getPropertyValue("--color-info").trim();
    39        const ok = style.getPropertyValue("--color-ok").trim();
    40        return {
    41          dashboard,
    42          dashboardPanel,
    43          blackScale3,
    44          blackScale4,
    45          foreground,
    46          foregroundLight,
    47          foregroundLighter,
    48          foregroundLightest,
    49          alert,
    50          info,
    51          ok,
    52        } as KeyValueStringPairs;
    53      } else {
    54        return {};
    55      }
    56    }, [wrapperRef]);
    57  
    58    const [themeColors, setThemeColors] = useState<KeyValueStringPairs>(
    59      getThemeColors()
    60    );
    61    const [random, setRandom] = useState<number | null>(null);
    62  
    63    useEffect(() => {
    64      setThemeColors(getThemeColors());
    65      // getThemeColors uses a ref that can sit outside the hook dependencies
    66    }, [getThemeColors, random, theme.name, setThemeColors]);
    67  
    68    useEffect(() => {
    69      setRandom(Math.random() * Math.random());
    70    }, [setRandom, theme]);
    71  
    72    return themeColors;
    73  };
    74  
    75  export default useChartThemeColors;