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

modern-kit/react

'use strict';

var utils = require('@modern-kit/utils');
var hooksUseLocalStorage = require('../useLocalStorage/index.cjs');
var hooksUsePreferredColorScheme = require('../usePreferredColorScheme/index.cjs');
var React = require('react');
require('../useVisibilityChange/index.cjs');
require('../useEventListener/index.cjs');
require('../usePreservedCallback/index.cjs');
require('../useIsomorphicLayoutEffect/index.cjs');
require('../useMediaQuery/index.cjs');

const COLOR_SCHEME_DEFAULT_KEY = "color-scheme";
function useColorScheme({
  defaultValue,
  key = COLOR_SCHEME_DEFAULT_KEY,
  shouldSetBodyClass = false
} = {}) {
  const preferredColorScheme = hooksUsePreferredColorScheme.usePreferredColorScheme();
  const defaultValueToUse = utils.isFunction(defaultValue) ? defaultValue() : defaultValue;
  const { state: colorScheme, setState: setColorScheme } = hooksUseLocalStorage.useLocalStorage({
    key,
    initialValue: defaultValueToUse ?? preferredColorScheme
  });
  const setToggleMode = React.useCallback(() => {
    setColorScheme((prev) => prev === "dark" ? "light" : "dark");
  }, [setColorScheme]);
  const setDarkMode = React.useCallback(() => {
    setColorScheme("dark");
  }, [setColorScheme]);
  const setLightMode = React.useCallback(() => {
    setColorScheme("light");
  }, [setColorScheme]);
  const setPreferredMode = React.useCallback(() => {
    setColorScheme(preferredColorScheme);
  }, [setColorScheme, preferredColorScheme]);
  React.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
  };
}

exports.useColorScheme = useColorScheme;
//# sourceMappingURL=index.cjs.map