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

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

import * as React from 'react';
import PropTypes from 'prop-types';

const MskThemeContext = /*#__PURE__*/React.createContext({
  theme: 'light',
  setTheme: () => {}
});
function MskThemeProvider(_ref) {
  let {
    children,
    theme: initialTheme = 'light'
  } = _ref;
  const [theme, setTheme] = React.useState(initialTheme);
  React.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.createElement(MskThemeContext.Provider, {
    value: {
      theme,
      setTheme
    }
  }, children);
}

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

export { MskThemeContext, MskThemeProvider, useMskTheme };