You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
27 lines
925 B
JavaScript
27 lines
925 B
JavaScript
10 months ago
|
import { readable } from 'svelte/store';
|
||
|
|
import { BROWSER } from 'esm-env';
|
||
|
|
/** Prefers reduced motion */
|
||
|
|
const reducedMotionQuery = '(prefers-reduced-motion: reduce)';
|
||
|
|
function prefersReducedMotion() {
|
||
|
|
if (!BROWSER)
|
||
|
|
return false;
|
||
|
|
return window.matchMedia(reducedMotionQuery).matches;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Indicates that the user has enabled reduced motion on their device.
|
||
|
|
*
|
||
|
|
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
|
||
|
|
*/
|
||
|
|
export const prefersReducedMotionStore = readable(prefersReducedMotion(), (set) => {
|
||
|
|
if (BROWSER) {
|
||
|
|
const setReducedMotion = (event) => {
|
||
|
|
set(event.matches);
|
||
|
|
};
|
||
|
|
const mediaQueryList = window.matchMedia(reducedMotionQuery);
|
||
|
|
mediaQueryList.addEventListener('change', setReducedMotion);
|
||
|
|
return () => {
|
||
|
|
mediaQueryList.removeEventListener('change', setReducedMotion);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|