MediaQuery via RxJs

[kalgon]

I am currently using something like this:

import {fromEvent, map, startWith} from 'rxjs';

export function media(query: string) {
  const mediaQuery = window.matchMedia(query);
  return fromEvent<MediaQueryList>(mediaQuery, 'change').pipe(
    startWith(mediaQuery),
    map(list => list.matches)
  );
}

in order to create an effect to automatically change the style (based on OS preferences) in bootstrap (through a NgRx effect in my case):

createEffect(
  (document = inject(DOCUMENT)) => media('(prefers-color-scheme: dark)').pipe(
    tap(dark => document.body.setAttribute('data-bs-theme', dark ? 'dark' : 'light'))
  ),
  {functional: true, dispatch: false}
);

I don't know if the media function would be a good addition to this library (even if it is really simple to implement it self).