react-system-theme/dist/react-system-theme.cjs.development.js

Use system theme in your react apps.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = _interopDefault(require('react'));

/**
 * Return the current system theme
 * @returns "dark" | "light"
 */

var useSystemTheme = function useSystemTheme() {
  var isDarkTheme = window.matchMedia("(prefers-color-scheme: dark)");

  var _React$useState = React.useState(isDarkTheme.matches),
      isDark = _React$useState[0],
      setIsDark = _React$useState[1];

  var themeListener = function themeListener(e) {
    setIsDark(e.matches);
  };

  React.useEffect(function () {
    isDarkTheme.addEventListener("change", themeListener);
    return function () {
      return isDarkTheme.removeEventListener("change", themeListener);
    };
  }, []);
  return isDark ? "dark" : "light";
};
/**
 * Check if system theme is dark
 * @returns boolean
 */

var useDarkTheme = function useDarkTheme() {
  var _React$useState2 = React.useState(useSystemTheme() === "dark"),
      isDark = _React$useState2[0];

  return isDark;
};
/**
 * Check if system theme is light
 * @returns boolean
 */

var useLightTheme = function useLightTheme() {
  var _React$useState3 = React.useState(useSystemTheme() === "light"),
      isLight = _React$useState3[0];

  return isLight;
};

exports.useDarkTheme = useDarkTheme;
exports.useLightTheme = useLightTheme;
exports.useSystemTheme = useSystemTheme;
//# sourceMappingURL=react-system-theme.cjs.development.js.map