prefers-mode/dist/prefers-mode.js

Detect & listen to preferences for prefers-color-scheme, prefers-reduced-motion, and prefers-contrast.

var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
var __export = (target, all) => {
  __markAsModule(target);
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __reExport = (target, module2, desc) => {
  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
    for (let key of __getOwnPropNames(module2))
      if (!__hasOwnProp.call(target, key) && key !== "default")
        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
  }
  return target;
};
var __toModule = (module2) => {
  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
};

// src/index.tsx
__export(exports, {
  CONTRAST_PREFS: () => CONTRAST_PREFS,
  MOTION_PREFS: () => MOTION_PREFS,
  PrefersProvider: () => PrefersProvider,
  SCHEME_PREFS: () => SCHEME_PREFS,
  getDefaultPrefs: () => getDefaultPrefs,
  usePrefers: () => usePrefers
});
var import_react = __toModule(require("react"));

// src/schemas.tsx
var SCHEME_PREFS = {
  UNSUPPORTED: 0,
  NO_PREFERENCE: 1,
  DARK: 2,
  LIGHT: 3,
  CUSTOM_ONE: 4,
  CUSTOM_TWO: 5,
  CUSTOM_THREE: 6
};
var MOTION_PREFS = {
  UNSUPPORTED: 0,
  NO_PREFERENCE: 1,
  REDUCE: 2
};
var CONTRAST_PREFS = {
  NO_PREFERENCE: 0,
  MORE: 1,
  LESS: 2
};

// src/index.tsx
var getDefaultPrefs = () => {
  return {
    colorScheme: SCHEME_PREFS.LIGHT,
    reducedMotion: MOTION_PREFS.NO_PREFERENCE,
    contrast: CONTRAST_PREFS.NO_PREFERENCE
  };
};
var PrefersContext = (0, import_react.createContext)({
  prefs: getDefaultPrefs(),
  setPrefs: () => {
  }
});
var usePrefers = () => {
  (0, import_react.useContext)(PrefersContext);
};
var PrefersProvider = () => {
  const [prefs, setPrefs] = (0, import_react.useState)(getDefaultPrefs());
  const [overrides, setOverrides] = (0, import_react.useState)({
    colorScheme: null,
    reducedMotion: null,
    contrast: null
  });
  const handleLightSchemeChange = (0, import_react.useCallback)((event) => {
    if (overrides.colorScheme === null) {
      if (event.matches) {
        setPrefs({ ...prefs, colorScheme: SCHEME_PREFS.LIGHT });
      } else {
        setPrefs({ ...prefs, colorScheme: SCHEME_PREFS.DARK });
      }
    }
  }, [overrides]);
  const handleReducedMotionChange = (0, import_react.useCallback)((event) => {
    if (overrides.reducedMotion === null) {
      if (event.matches) {
        setPrefs({ ...prefs, reducedMotion: MOTION_PREFS.REDUCE });
      } else {
        setPrefs({ ...prefs, reducedMotion: MOTION_PREFS.NO_PREFERENCE });
      }
    }
  }, [overrides]);
  const handleContrastChange = (0, import_react.useCallback)((event) => {
    if (overrides.contrast === null) {
      if (event.matches) {
        setPrefs({ ...prefs, contrast: CONTRAST_PREFS.MORE });
      } else {
        setPrefs({ ...prefs, contrast: CONTRAST_PREFS.LESS });
      }
    }
  }, [overrides]);
  (0, import_react.useEffect)(() => {
    const isNoPrefScheme = window.matchMedia("(prefers-color-scheme: no-preference)");
    const isLightScheme = window.matchMedia("(prefers-color-scheme: light)");
    const isDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
    const isContrastMore = window.matchMedia("(prefers-contrast: more");
    const isContrastLess = window.matchMedia("(prefers-contrast: less");
    const isUnsuppScheme = !isDarkScheme.matches && !isLightScheme.matches && !isNoPrefScheme.matches;
    const isNoPrefMotion = window.matchMedia("(prefers-reduced-motion: no-preference)");
    const isReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
    const isUnsuppMotion = !isNoPrefMotion.matches && !isReducedMotion.matches;
    let colorScheme = SCHEME_PREFS.NO_PREFERENCE;
    let reducedMotion = MOTION_PREFS.NO_PREFERENCE;
    let contrast = CONTRAST_PREFS.NO_PREFERENCE;
    if (!isUnsuppScheme) {
      if (isLightScheme.matches) {
        colorScheme = SCHEME_PREFS.LIGHT;
      } else if (isDarkScheme.matches) {
        colorScheme = SCHEME_PREFS.DARK;
      }
    } else {
      colorScheme = SCHEME_PREFS.UNSUPPORTED;
    }
    if (!isUnsuppMotion) {
      if (isReducedMotion.matches) {
        reducedMotion = MOTION_PREFS.REDUCE;
      }
    } else {
      reducedMotion = MOTION_PREFS.UNSUPPORTED;
    }
    if (isContrastLess.matches) {
      contrast = CONTRAST_PREFS.LESS;
    }
    if (isContrastMore.matches) {
      contrast = CONTRAST_PREFS.MORE;
    }
    setPrefs({
      colorScheme,
      reducedMotion,
      contrast
    });
    isLightScheme.addEventListener("change", handleLightSchemeChange);
    isReducedMotion.addEventListener("change", handleReducedMotionChange);
    isContrastMore.addEventListener("change", handleContrastChange);
    return () => {
      isLightScheme.removeEventListener("change", handleLightSchemeChange);
      isReducedMotion.removeEventListener("change", handleReducedMotionChange);
      isContrastMore.removeEventListener("change", handleContrastChange);
    };
  }, []);
  (0, import_react.useEffect)(() => {
    const newPrefs = { ...prefs };
    Object.keys(overrides).forEach((key) => {
      if (overrides[key] !== null && !!parseInt(overrides[key])) {
        newPrefs[key] = overrides[key];
      }
    });
    setPrefs(newPrefs);
  }, [overrides]);
  return /* @__PURE__ */ import_react.default.createElement(PrefersContext.Provider, {
    value: {
      prefs,
      setPrefs: setOverrides
    }
  });
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  CONTRAST_PREFS,
  MOTION_PREFS,
  PrefersProvider,
  SCHEME_PREFS,
  getDefaultPrefs,
  usePrefers
});