@blockstack/ui/dist/color-modes/index.esm.js

Blockstack UI components built using React and styled-components with styled-system.

import React__default, { useEffect, useCallback } from 'react';
import { useMediaQuery } from '../hooks/use-media-query.esm.js';
export { Color } from './types.esm.js';
export { color, colorGet, generateCssVariables, themeColor } from './utils.esm.js';
import { ColorModes } from './styles.esm.js';
export { ColorModes } from './styles.esm.js';

var ColorModeContext = /*#__PURE__*/React__default.createContext({
  colorMode: undefined
});
var ColorModeProvider = function ColorModeProvider(_ref) {
  var colorMode = _ref.colorMode,
      children = _ref.children,
      onChange = _ref.onChange;

  var _React$useState = React__default.useState(colorMode),
      mode = _React$useState[0],
      setMode = _React$useState[1];

  var _useMediaQuery = useMediaQuery('(prefers-color-scheme: dark)'),
      darkmode = _useMediaQuery[0];

  var _useMediaQuery2 = useMediaQuery('(prefers-color-scheme: light)'),
      lightmode = _useMediaQuery2[0];

  useEffect(function () {
    if (!mode) {
      setMode(darkmode ? 'dark' : 'light');
    }
  }, [mode, darkmode, lightmode]);
  var setColorMode = useCallback(function (mode) {
    setMode(mode);
    onChange && onChange(mode);
  }, [mode]);
  var toggleColorMode = useCallback(function () {
    if (mode === 'light') {
      setColorMode('dark');
      return;
    }

    if (mode === 'dark') {
      setColorMode('light');
      return;
    }

    if (!colorMode && darkmode) {
      setColorMode('light');
      return;
    }

    if (!mode && lightmode) {
      setColorMode('dark');
      return;
    }
  }, [mode, lightmode, darkmode]);
  return React__default.createElement(ColorModeContext.Provider, {
    value: {
      colorMode: mode,
      toggleColorMode: toggleColorMode
    }
  }, React__default.createElement(ColorModes, {
    colorMode: mode
  }), children);
};

export { ColorModeContext, ColorModeProvider };
//# sourceMappingURL=index.esm.js.map