@retail-ui/theme/dist/theme.esm.js

The Theme component of @retail-ui

import { createContext, useState, useEffect, createElement, useContext, useRef } from 'react';
import { useIsomorphicLayoutEffect } from 'react-use';

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

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

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


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

  var oldTheme = usePrevious(theme);
  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 createElement(ThemeContext.Provider, {
    value: {
      theme: theme,
      toggleTheme: toggleTheme
    }
  }, children);
};
var useThemeCtx = function useThemeCtx() {
  return useContext(ThemeContext);
};

export { ThemeContext, ThemeProvider, useThemeCtx };
//# sourceMappingURL=theme.esm.js.map