react-system-theme/dist/react-system-theme.esm.js

Use system theme in your react apps.

import React from 'react';

/**
 * Return the current system theme
 * @returns "dark" | "light"
 */

var useSystemTheme = function useSystemTheme() {
  var isDarkTheme = window.matchMedia("(prefers-color-scheme: dark)");

  var _React$useState = React.useState(isDarkTheme.matches),
      isDark = _React$useState[0],
      setIsDark = _React$useState[1];

  var themeListener = function themeListener(e) {
    setIsDark(e.matches);
  };

  React.useEffect(function () {
    isDarkTheme.addEventListener("change", themeListener);
    return function () {
      return isDarkTheme.removeEventListener("change", themeListener);
    };
  }, []);
  return isDark ? "dark" : "light";
};
/**
 * Check if system theme is dark
 * @returns boolean
 */

var useDarkTheme = function useDarkTheme() {
  var _React$useState2 = React.useState(useSystemTheme() === "dark"),
      isDark = _React$useState2[0];

  return isDark;
};
/**
 * Check if system theme is light
 * @returns boolean
 */

var useLightTheme = function useLightTheme() {
  var _React$useState3 = React.useState(useSystemTheme() === "light"),
      isLight = _React$useState3[0];

  return isLight;
};

export { useDarkTheme, useLightTheme, useSystemTheme };
//# sourceMappingURL=react-system-theme.esm.js.map