UNPKG

prefers-mode

Version:

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

3 lines (2 loc) 2.84 kB
var _=Object.create;var h=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var p=e=>h(e,"__esModule",{value:!0});var D=(e,t)=>{p(e);for(var r in t)h(e,r,{get:t[r],enumerable:!0})},I=(e,t,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of U(t))!g.call(e,a)&&a!=="default"&&h(e,a,{get:()=>t[a],enumerable:!(r=F(t,a))||r.enumerable});return e},x=e=>I(p(h(e!=null?_(w(e)):{},"default",e&&e.__esModule&&"default"in e?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e);D(exports,{CONTRAST_PREFS:()=>E,MOTION_PREFS:()=>i,PrefersProvider:()=>b,SCHEME_PREFS:()=>c,getDefaultPrefs:()=>l,usePrefers:()=>H});var s=x(require("react"));var c={UNSUPPORTED:0,NO_PREFERENCE:1,DARK:2,LIGHT:3,CUSTOM_ONE:4,CUSTOM_TWO:5,CUSTOM_THREE:6},i={UNSUPPORTED:0,NO_PREFERENCE:1,REDUCE:2},E={NO_PREFERENCE:0,MORE:1,LESS:2};var l=()=>({colorScheme:c.LIGHT,reducedMotion:i.NO_PREFERENCE,contrast:E.NO_PREFERENCE}),N=(0,s.createContext)({prefs:l(),setPrefs:()=>{}}),H=()=>{(0,s.useContext)(N)},b=()=>{let[e,t]=(0,s.useState)(l()),[r,a]=(0,s.useState)({colorScheme:null,reducedMotion:null,contrast:null}),u=(0,s.useCallback)(o=>{r.colorScheme===null&&(o.matches?t({...e,colorScheme:c.LIGHT}):t({...e,colorScheme:c.DARK}))},[r]),S=(0,s.useCallback)(o=>{r.reducedMotion===null&&(o.matches?t({...e,reducedMotion:i.REDUCE}):t({...e,reducedMotion:i.NO_PREFERENCE}))},[r]),M=(0,s.useCallback)(o=>{r.contrast===null&&(o.matches?t({...e,contrast:E.MORE}):t({...e,contrast:E.LESS}))},[r]);return(0,s.useEffect)(()=>{let o=window.matchMedia("(prefers-color-scheme: no-preference)"),n=window.matchMedia("(prefers-color-scheme: light)"),C=window.matchMedia("(prefers-color-scheme: dark)"),P=window.matchMedia("(prefers-contrast: more"),O=window.matchMedia("(prefers-contrast: less"),v=!C.matches&&!n.matches&&!o.matches,L=window.matchMedia("(prefers-reduced-motion: no-preference)"),d=window.matchMedia("(prefers-reduced-motion: reduce)"),T=!L.matches&&!d.matches,f=c.NO_PREFERENCE,m=i.NO_PREFERENCE,R=E.NO_PREFERENCE;return v?f=c.UNSUPPORTED:n.matches?f=c.LIGHT:C.matches&&(f=c.DARK),T?m=i.UNSUPPORTED:d.matches&&(m=i.REDUCE),O.matches&&(R=E.LESS),P.matches&&(R=E.MORE),t({colorScheme:f,reducedMotion:m,contrast:R}),n.addEventListener("change",u),d.addEventListener("change",S),P.addEventListener("change",M),()=>{n.removeEventListener("change",u),d.removeEventListener("change",S),P.removeEventListener("change",M)}},[]),(0,s.useEffect)(()=>{let o={...e};Object.keys(r).forEach(n=>{r[n]!==null&&!!parseInt(r[n])&&(o[n]=r[n])}),t(o)},[r]),s.default.createElement(N.Provider,{value:{prefs:e,setPrefs:a}})};0&&(module.exports={CONTRAST_PREFS,MOTION_PREFS,PrefersProvider,SCHEME_PREFS,getDefaultPrefs,usePrefers}); //# sourceMappingURL=prefers-mode.min.js.map