@modern-kit/react/dist/hooks/useColorScheme/index.mjs

modern-kit/react

import { isFunction } from '@modern-kit/utils';
import { useLocalStorage } from '../useLocalStorage/index.mjs';
import { usePreferredColorScheme } from '../usePreferredColorScheme/index.mjs';
import { useCallback, useEffect } from 'react';
import '../useVisibilityChange/index.mjs';
import '../useEventListener/index.mjs';
import '../usePreservedCallback/index.mjs';
import '../useIsomorphicLayoutEffect/index.mjs';
import '../useMediaQuery/index.mjs';

const COLOR_SCHEME_DEFAULT_KEY = "color-scheme";
function useColorScheme({
  defaultValue,
  key = COLOR_SCHEME_DEFAULT_KEY,
  shouldSetBodyClass = false
} = {}) {
  const preferredColorScheme = usePreferredColorScheme();
  const defaultValueToUse = isFunction(defaultValue) ? defaultValue() : defaultValue;
  const { state: colorScheme, setState: setColorScheme } = useLocalStorage({
    key,
    initialValue: defaultValueToUse ?? preferredColorScheme
  });
  const setToggleMode = useCallback(() => {
    setColorScheme((prev) => prev === "dark" ? "light" : "dark");
  }, [setColorScheme]);
  const setDarkMode = useCallback(() => {
    setColorScheme("dark");
  }, [setColorScheme]);
  const setLightMode = useCallback(() => {
    setColorScheme("light");
  }, [setColorScheme]);
  const setPreferredMode = useCallback(() => {
    setColorScheme(preferredColorScheme);
  }, [setColorScheme, preferredColorScheme]);
  useEffect(() => {
    if (shouldSetBodyClass) {
      document.body.classList.add(colorScheme);
    }
    return () => {
      if (shouldSetBodyClass) {
        document.body.classList.remove(colorScheme);
      }
    };
  }, [colorScheme, shouldSetBodyClass]);
  return {
    colorScheme,
    preferredColorScheme,
    setToggleMode,
    setDarkMode,
    setLightMode,
    setPreferredMode
  };
}

export { useColorScheme };
//# sourceMappingURL=index.mjs.map