Function useTheme

src/client/hooks/useTheme.ts:55–116

()

}

export function useTheme() {
  const defaultTheme: ValidTheme =
    typeof window !== 'undefined'
      ? window?.matchMedia('(prefers-color-scheme: dark)')?.matches
        ? 'dark'
        : 'light'
      : 'light';
  const customTheme = window.localStorage.getItem(THEME_CONFIG);
  const theme = isValidTheme(customTheme) ? customTheme : defaultTheme;

  const primaryColor = useMemo(
    () => colord(THEME_COLORS[theme].primary),
    [theme]
  );
  const healthColor = useMemo(
    () => colord(THEME_COLORS[theme].green400),
    [theme]
  );

  const colors = useMemo(
    () => ({
      theme: {
        ...THEME_COLORS[theme],
      },
      chart: {
        error: twColors.red[500],
        text: THEME_COLORS[theme].gray700,
        line: THEME_COLORS[theme].gray200,
        pv: primaryColor.alpha(0.4).toRgbString(),
        uv: primaryColor.alpha(0.6).toRgbString(),
        monitor: healthColor.alpha(0.8).toRgbString(),
        default: primaryColor.alpha(0.8).toRgbString(),
      },
      map: {
        baseColor: THEME_COLORS[theme].primary,
        fillColor: THEME_COLORS[theme].gray100,
        strokeColor: THEME_COLORS[theme].primary,
        hoverColor: THEME_COLORS[theme].primary,
      },
    }),
    []
  );

  function saveTheme(value: string) {
    window.localStorage.setItem(THEME_CONFIG, value);
  }

  useEffect(() => {
    document.body.setAttribute('data-theme', theme);
  }, [theme]);

  useEffect(() => {
    const url = new URL(window?.location?.href);
    const theme = url.searchParams.get('theme');

    if (theme && ['light', 'dark'].includes(theme)) {
      saveTheme(theme);
    }