fannypack-v5/es/Provider/ColorModeContext.js

An accessible, composable, and friendly React UI Kit

import { createContext, useMemo, useState, useEffect, useCallback, createElement } from 'react';
import './ThemeContext.js';
import 'classnames';
import 'emotion';
import '@emotion/core';
import 'emotion-theming';
import '@emotion/styled';
import { useTheme } from '../utils/useTheme.js';
import { useLocalStorage } from '../utils/useLocalStorage.js';

var ColorModeContext = createContext({
  setColorMode: function setColorMode() {},
  colorMode: 'default'
});
function Provider(props) {
  var children = props.children,
      _defaultMode = props.mode; ////////////////////////////////////

  var _useTheme = useTheme(),
      theme = _useTheme.theme;

  var localStorage = useLocalStorage();
  var defaultMode = useMemo(function () {
    return getDefaultMode(_defaultMode, {
      localStorage: localStorage,
      theme: theme
    });
  }, [_defaultMode, localStorage, theme]); ////////////////////////////////////

  var _React$useState = useState(defaultMode),
      mode = _React$useState[0],
      setMode = _React$useState[1]; ////////////////////////////////////


  useEffect(function () {
    localStorage.set('colorMode', defaultMode);
  }, [defaultMode, localStorage]); ////////////////////////////////////

  var setColorMode = useCallback(function (colorMode) {
    setMode(colorMode);
    localStorage.set('colorMode', colorMode);
  }, [localStorage]); ////////////////////////////////////

  var value = useMemo(function () {
    return {
      colorMode: mode,
      setColorMode: setColorMode
    };
  }, [mode, setColorMode]); ////////////////////////////////////

  return /*#__PURE__*/createElement(ColorModeContext.Provider, {
    value: value
  }, children);
}

function getDefaultMode(mode, _ref) {
  var localStorage = _ref.localStorage,
      theme = _ref.theme;
  var useSystemColorMode = theme.modes.useSystemColorMode;
  var defaultMode = mode;

  if (useSystemColorMode && typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    defaultMode = 'dark';
  }

  if (localStorage.get('colorMode')) {
    defaultMode = localStorage.get('colorMode');
  }

  return defaultMode;
}

export { ColorModeContext, Provider };