@retail-ui/theme/dist/theme.cjs.development.js

The Theme component of @retail-ui

'use strict';

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

var React = require('react');
var reactUse = require('react-use');

var usePrevious = function usePrevious(theme) {
  var ref = React.useRef();
  React.useEffect(function () {
    ref.current = theme;
  });
  return ref.current;
};

var ThemeContext = /*#__PURE__*/React.createContext({
  theme: 'dark',
  toggleTheme: function toggleTheme() {
    return null;
  }
});
var ThemeProvider = function ThemeProvider(_ref) {
  var children = _ref.children;

  // defaults to light theme
  var _React$useState = React.useState('light'),
      theme = _React$useState[0],
      setTheme = _React$useState[1]; // set user's preferred color scheme on first load


  reactUse.useIsomorphicLayoutEffect(function () {
    setTheme(!!window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
  }, []); // change theme

  var oldTheme = usePrevious(theme);
  React.useEffect(function () {
    document.documentElement.classList.remove("theme-" + oldTheme);
    document.documentElement.classList.add("theme-" + theme);
  }, [theme, oldTheme]);

  function toggleTheme() {
    if (theme === 'light') setTheme('dark');else setTheme('light');
  }

  return React.createElement(ThemeContext.Provider, {
    value: {
      theme: theme,
      toggleTheme: toggleTheme
    }
  }, children);
};
var useThemeCtx = function useThemeCtx() {
  return React.useContext(ThemeContext);
};

exports.ThemeContext = ThemeContext;
exports.ThemeProvider = ThemeProvider;
exports.useThemeCtx = useThemeCtx;
//# sourceMappingURL=theme.cjs.development.js.map