As a convenience feature, the return value of createBreakpoints also contains a non-enumerable .key property that will return the last matching breakpoint id to allow using it as an object key:

`ts
import { createBreakpoints } from "@solid-primitives/media";

const breakpoints = {
sm: "640px",
lg: "1024px",
xl: "1280px",
};

const matches = createBreakpoints(breakpoints);

const moduleSize = () =>
({
sm: 2,
lg: 4,
xl: 6,
})[matches.key];
`

This can be very helpful for things like the mapHeight option in createMasonry.

> Warning for this feature to work, the breakpoints needs to be ordered from small to large. If you cannot ensure this, use the sortBreakpoints helper.

$3

If you cannot rely on the order of the breakpoints from smallest to largest, this small helper fixes it for you:

`ts
// unfortunately in the wrong order:
const breakpoints = {
xl: "1280px",
lg: "1024px",
sm: "640px",
};

const matches = createBreakpoints(sortBreakpoints(breakpoints));

const moduleSize = () =>
({
sm: 2,
lg: 4,
xl: 6,
})[matches.key];
`

$3

Working Demo

createPrefersDark

Provides a signal indicating if the user has requested dark color theme. The setting is being watched with a Media Query.

$3

`ts
import { createPrefersDark } from "@solid-primitives/media";

const prefersDark = createPrefersDark();
createEffect(() => {
prefersDark(); // => boolean
});
`

$3

createPrefersDark accepts a serverFallback argument — value that should be returned on the server — defaults to false.

`ts
const prefersDark = createPrefersDark(true);
// will return true on the server and during hydration on the client
prefersDark();
`

$3

This primitive provides a singleton root variant that will reuse the same signal and media query across the whole application.

`ts
import { usePrefersDark } from "@solid-primitives/media";

const prefersDark = usePrefersDark();
createEffect(() => {
prefersDark(); // => boolean
});
`

> Note: usePrefersDark will deopt to createPrefersDark if used during hydration. (see issue #310)

Notes

$3

Due to older versions of mobile Safari on iOS 13 not supporting addEventListener on the MediaQueryList API, this primitive will need to be polyfilled. If your application needs to support much older versions of the browser you should use a polyfill utility or patch the missing function like so:

`ts
if ((!"addEventListener") in MediaQueryList) {
MediaQueryList.prototype.addEventListener = function (type, callback) {
if (type === "change") this.addListener(callback);
};
MediaQueryList.prototype.removeEventListener = function (type, callback) {
if (type === "change") this.removeListener(callback);
};
}
``

Changelog

See CHANGELOG.md

Contributors

Thanks to Aditya Agarwal for contributing createBreakpoints.