$media store by @PaulMaly 👍🏻

Author: Valexr

src/stores/media.ts

@@ -1,6 +1,14 @@
-import watchMedia from 'svelte-media';
+import { type Readable, readable } from 'svelte/store';
 
-const mediaqueries = {
+export type Queries = {
+    [key: string]: boolean | string;
+};
+
+type MediaObject = {
+    [key: string]: MediaQueryList
+}
+
+const queries: Queries = {
     xs: '(max-width: 480px)',
     sm: '(max-width: 600px)',
     md: '(max-width: 840px)',
@@ -15,4 +23,29 @@ const mediaqueries = {
     touch: '(hover: none)',
 };
 
-export const media = watchMedia(mediaqueries);
+export const media: Readable<Queries> = mediaStore(queries)
+
+function mediaStore(queries: Queries = {}) {
+    return readable({}, (set) => {
+        let mqs = Object.entries(queries).reduce((mqs: MediaObject, [key, query]) => {
+            mqs[key] = window.matchMedia(query as string);
+            mqs[key].onchange = (mq) => {
+                mqs[key] = mq;
+                update();
+            };
+            return mqs as MediaObject;
+        }, {});
+
+        function update() {
+            const matches: Queries = Object.entries(mqs).reduce((matches: Queries, [key, mq]) => {
+                matches[key] = mq.matches;
+                return matches;
+            }, {});
+            set(matches);
+        }
+
+        update();
+
+        return () => mqs = {};
+    });
+}

src/stores/theme.ts

@@ -1,15 +1,7 @@
-import { writable } from 'svelte/store';
-
-const darkMedia = window.matchMedia('(prefers-color-scheme: dark)')
+import { writable, get } from 'svelte/store';
+import { media } from '@/stores/media';
 
 export const darkTheme = writable(
-    JSON.parse(sessionStorage.getItem('optimade_darkTheme') as string) ?? darkMedia.matches
+    JSON.parse(sessionStorage.getItem('optimade_darkTheme') as string) ?? get(media).dark
 );
-darkTheme.subscribe((val) => sessionStorage.setItem('optimade_darkTheme', val));
-
-
-function handleMediaChange(event: { matches: boolean; }) {
-    darkTheme.set(event.matches)
-}
-// handleMediaChange(darkMedia)
-darkMedia.addEventListener('change', handleMediaChange);
+darkTheme.subscribe((val) => sessionStorage.setItem('optimade_darkTheme', val));