@mskcc/carbon-react/lib/components/MskTheme/MskTheme.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

'use strict';

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

var React = require('react');
var PropTypes = require('prop-types');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n["default"] = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespace(React);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);

const MskThemeContext = /*#__PURE__*/React__namespace.createContext({
  theme: 'light',
  setTheme: () => {}
});
function MskThemeProvider(_ref) {
  let {
    children,
    theme: initialTheme = 'light'
  } = _ref;
  const [theme, setTheme] = React__namespace.useState(initialTheme);
  React__namespace.useEffect(() => {
    const root = document.documentElement;
    if (theme === 'system') {
      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      const themeClass = prefersDark ? 'dark' : 'light';
      root.setAttribute('data-theme', themeClass);
      root.classList.remove('light', 'dark');
      root.classList.add(themeClass);
    } else {
      root.setAttribute('data-theme', theme);
      root.classList.remove('light', 'dark');
      root.classList.add(theme);
    }
  }, [theme]);
  return /*#__PURE__*/React__namespace.createElement(MskThemeContext.Provider, {
    value: {
      theme,
      setTheme
    }
  }, children);
}

/**
 * Get access to the current theme
 */
function useMskTheme() {
  return React__namespace.useContext(MskThemeContext);
}
MskThemeProvider.displayName = 'MskThemeProvider';
MskThemeProvider.propTypes = {
  children: PropTypes__default["default"].node,
  theme: PropTypes__default["default"].oneOf(['light', 'dark', 'system'])
};

exports.MskThemeContext = MskThemeContext;
exports.MskThemeProvider = MskThemeProvider;
exports.useMskTheme = useMskTheme;