ahooks/lib/useTheme/index.js

react hooks library

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ThemeMode = void 0;
exports["default"] = useTheme;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _useMemoizedFn = _interopRequireDefault(require("../useMemoizedFn"));
var _isBrowser = _interopRequireDefault(require("../utils/isBrowser"));
var ThemeMode;
(function (ThemeMode) {
  ThemeMode["LIGHT"] = "light";
  ThemeMode["DARK"] = "dark";
  ThemeMode["SYSTEM"] = "system";
})(ThemeMode || (exports.ThemeMode = ThemeMode = {}));
var useCurrentTheme = function useCurrentTheme() {
  var matchMedia = _isBrowser["default"] ? window.matchMedia('(prefers-color-scheme: dark)') : undefined;
  var _useState = (0, _react.useState)(function () {
      if (_isBrowser["default"]) {
        return (matchMedia === null || matchMedia === void 0 ? void 0 : matchMedia.matches) ? ThemeMode.DARK : ThemeMode.LIGHT;
      } else {
        return ThemeMode.LIGHT;
      }
    }),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    theme = _useState2[0],
    setTheme = _useState2[1];
  (0, _react.useEffect)(function () {
    var onThemeChange = function onThemeChange(event) {
      if (event.matches) {
        setTheme(ThemeMode.DARK);
      } else {
        setTheme(ThemeMode.LIGHT);
      }
    };
    if (matchMedia === null || matchMedia === void 0 ? void 0 : matchMedia.addEventListener) {
      matchMedia.addEventListener('change', onThemeChange);
    } else if (matchMedia === null || matchMedia === void 0 ? void 0 : matchMedia.addListener) {
      matchMedia.addListener(onThemeChange);
    }
    return function () {
      if (matchMedia === null || matchMedia === void 0 ? void 0 : matchMedia.removeEventListener) {
        matchMedia.removeEventListener('change', onThemeChange);
      } else if (matchMedia === null || matchMedia === void 0 ? void 0 : matchMedia.removeListener) {
        matchMedia.removeListener(onThemeChange);
      }
    };
  }, []);
  return theme;
};
function useTheme() {
  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var localStorageKey = options.localStorageKey;
  var _useState3 = (0, _react.useState)(function () {
      var preferredThemeMode = (localStorageKey === null || localStorageKey === void 0 ? void 0 : localStorageKey.length) && localStorage.getItem(localStorageKey);
      return preferredThemeMode || ThemeMode.SYSTEM;
    }),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    themeMode = _useState4[0],
    setThemeMode = _useState4[1];
  var setThemeModeWithLocalStorage = function setThemeModeWithLocalStorage(mode) {
    setThemeMode(mode);
    if (localStorageKey === null || localStorageKey === void 0 ? void 0 : localStorageKey.length) {
      localStorage.setItem(localStorageKey, mode);
    }
  };
  var currentTheme = useCurrentTheme();
  var theme = themeMode === ThemeMode.SYSTEM ? currentTheme : themeMode;
  return {
    theme: theme,
    themeMode: themeMode,
    setThemeMode: (0, _useMemoizedFn["default"])(setThemeModeWithLocalStorage)
  };
}