@r3l/app/lib/styles/ColorMode.js

Relevant App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.InitializeColorMode = exports.ColorModeProvider = exports.useColorMode = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = require("react");

var _core = require("@theme-ui/core");

var _css = require("@theme-ui/css");

var _core2 = require("@emotion/core");

var _customProperties = require("./custom-properties");

var _common = require("@r3l/common");

var _utils = require("../utils");

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

var STORAGE_KEY = 'theme-ui-color-mode';
var storage = {
  get: function get(init) {
    try {
      // @ts-ignore
      return _utils.storage.getItem(STORAGE_KEY) || init;
    } catch (e) {
      console.warn('localStorage is disabled and color mode might not work as expected.', 'Please check your Site Settings.', e);
    }
  },
  set: function set(value) {
    try {
      // @ts-ignore
      _utils.storage.setItem(STORAGE_KEY, value);
    } catch (e) {
      console.warn('localStorage is disabled and color mode might not work as expected.', 'Please check your Site Settings.', e);
    }
  }
};

var getMediaQuery = function getMediaQuery() {
  var darkQuery = '(prefers-color-scheme: dark)';
  var lightQuery = '(prefers-color-scheme: light)';
  var darkMQL = window.matchMedia ? window.matchMedia(darkQuery) : {
    media: false
  };
  var lightMQL = window.matchMedia ? window.matchMedia(lightQuery) : {
    media: false
  };
  var dark = darkMQL.media === darkQuery && darkMQL.matches;
  if (dark) return 'dark';
  var light = lightMQL.media === lightQuery && lightMQL.matches;
  if (light) return 'light';
  return 'default';
};

var useColorModeState = function useColorModeState() {
  var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

  var _useState = (0, _react.useState)(theme.initialColorModeName || 'default'),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      mode = _useState2[0],
      setMode = _useState2[1]; // initialize state


  (0, _react.useEffect)(function () {
    var stored = theme.useLocalStorage !== false && storage.get();
    if (!_common.IS_NATIVE) document.body.classList.remove('theme-ui-' + stored);

    if (!stored && theme.useColorSchemeMediaQuery) {
      var query = getMediaQuery();
      setMode(query);
      return;
    }

    if (!stored || stored === mode) return;
    setMode(stored);
  }, []);
  (0, _react.useEffect)(function () {
    if (!mode || theme.useLocalStorage === false) return;
    storage.set(mode);
  }, [mode]);

  if (process.env.NODE_ENV !== 'production') {
    if (theme.colors && theme.colors.modes && theme.initialColorModeName && Object.keys(theme.colors.modes).indexOf(theme.initialColorModeName) > -1) {
      console.warn('The `initialColorModeName` value should be a unique name' + ' and cannot reference a key in `theme.colors.modes`.');
    }
  }

  return [mode, setMode];
};

var useColorMode = function useColorMode() {
  var _useThemeUI = (0, _core.useThemeUI)(),
      theme = _useThemeUI.theme,
      colorMode = _useThemeUI.colorMode,
      setColorMode = _useThemeUI.setColorMode;

  if (typeof setColorMode !== 'function') {
    // return ['', () => null, () => ''];
    throw new Error("[useColorMode] requires the ColorModeProvider component");
  }

  var modePath = function modePath(color) {
    return theme.initialColorModeName === colorMode ? "colors.".concat(color) : "colors.modes.".concat(colorMode, ".").concat(color);
  };

  var getColor = function getColor(color) {
    return (0, _css.get)(theme, modePath(color), color);
  };

  return [colorMode, setColorMode, getColor];
};

exports.useColorMode = useColorMode;

var applyColorMode = function applyColorMode(theme, mode) {
  if (!mode) return theme;
  var modes = (0, _css.get)(theme, 'colors.modes', {});
  return _core.merge.all({}, theme, {
    colors: (0, _css.get)(modes, mode, {})
  });
};

var BodyStyles = function BodyStyles() {
  return (0, _core.jsx)(_core2.Global, {
    styles: function styles(theme) {
      return (0, _customProperties.createColorStyles)(theme);
    }
  });
};

var ColorModeProvider = function ColorModeProvider(_ref) {
  var children = _ref.children;
  var outer = (0, _core.useThemeUI)();

  var _useColorModeState = useColorModeState(outer.theme),
      _useColorModeState2 = (0, _slicedToArray2.default)(_useColorModeState, 2),
      colorMode = _useColorModeState2[0],
      setColorMode = _useColorModeState2[1];

  var theme = applyColorMode(outer.theme || {}, colorMode);

  var emotionTheme = _objectSpread({}, theme);

  if (theme.useCustomProperties !== false) {
    emotionTheme.colors = (0, _customProperties.toCustomProperties)(emotionTheme.colors, 'colors');
  }

  var context = _objectSpread(_objectSpread({}, outer), {}, {
    theme: theme,
    colorMode: colorMode,
    setColorMode: setColorMode
  });

  return (0, _core.jsx)(_core2.ThemeContext.Provider, {
    value: emotionTheme
  }, (0, _core.jsx)(_core.Context.Provider, {
    value: context
  }, !_common.IS_NATIVE ? (0, _core.jsx)(BodyStyles, {
    key: 'color-mode'
  }) : null, children));
};

exports.ColorModeProvider = ColorModeProvider;
var noflash = "(function() { try {\n  var mode = localStorage.getItem('theme-ui-color-mode');\n  if (!mode) return\n  document.body.classList.add('theme-ui-' + mode);\n} catch (e) {} })();";

var InitializeColorMode = function InitializeColorMode() {
  return (0, _core.jsx)('script', {
    key: 'theme-ui-no-flash',
    dangerouslySetInnerHTML: {
      __html: noflash
    }
  });
};

exports.InitializeColorMode = InitializeColorMode;
//# sourceMappingURL=ColorMode.js.map