fix $darkTheme store

Author: Valexr

src/components/loaders/Cards.svelte

@@ -8,7 +8,7 @@
 
 <script lang="ts" context="module">
 	import ContentLoader from 'svelte-content-loader';
-	import { media } from '@/stores/media';
+	import { darkTheme } from '@/stores/theme';
 </script>
 
 <script lang="ts">
@@ -24,5 +24,5 @@
 
 	$: x = (width - cols * w) / cols + cols / 2;
 	$: y = (height - rows * h) / rows + rows / 2;
-	$: colors = $media.dark ? { primaryColor: '#303742', secondaryColor: '#252b33' } : {};
+	$: colors = $darkTheme ? { primaryColor: '#303742', secondaryColor: '#252b33' } : {};
 </script>

src/stores/media.ts

@@ -1,14 +1,14 @@
-import { writable } from 'svelte/store';
+import { type Readable, readable } from 'svelte/store';
 
-type MediaQuery = {
+export type Queries = {
     [key: string]: boolean | string;
 };
-type BrowserStorage = {
-    type: string
-    key: string
+
+type MediaObject = {
+    [key: string]: MediaQueryList
 }
 
-const mediaQueries: MediaQuery = {
+const queries: Queries = {
     xs: '(max-width: 480px)',
     sm: '(max-width: 600px)',
     md: '(max-width: 840px)',
@@ -23,43 +23,29 @@ const mediaQueries: MediaQuery = {
     touch: '(hover: none)',
 };
 
-export const media = watchMedia(mediaQueries, { key: 'optimade-media' })
-
-function watchMedia(queries: MediaQuery, storage: Partial<BrowserStorage>) {
-    const { subscribe, set, update } = writable({});
-    const base = { type: 'session', key: 'media-query' }
-
-    storage = { ...base, ...storage }
-
-    if (persist(storage)) {
-        const match: MediaQuery = JSON.parse(persist(storage).getItem(storage.key as string) as string) || {};
-
-        for (const query in queries) {
-            const media = window.matchMedia(queries[query] as string)
-            setMatches(media, query)
-            media.onchange = (e) => setMatches(e, query)
+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);
         }
 
-        subscribe((match): void => persist(storage).setItem(storage.key as string, JSON.stringify(match)));
-
-        function setMatches(media: MediaQueryList | MediaQueryListEvent, query: string) {
-            if ('target' in media) match[query] = media.matches;
-            else match[query] ??= media.matches;
-            set(match);
-            persist(storage).setItem(storage.key as string, JSON.stringify(match));
-        }
-    }
-
-    function persist(storage: Partial<BrowserStorage>): Storage {
-        try {
-            const store = storage.type === 'session' ? sessionStorage : localStorage
-            store.setItem(storage.key as string, storage.key as string);
-            store.removeItem(storage.key as string);
-            return store;
-        } catch (e) {
-            console.error(e)
-        }
-    }
+        update();
 
-    return { subscribe, set, update }
+        return () => mqs = {};
+    });
 }

src/stores/theme.ts

@@ -0,0 +1,7 @@
+import { writable, get } from 'svelte/store';
+import { media } from '@/stores/media';
+
+export const darkTheme = writable(
+    JSON.parse(sessionStorage.getItem('optimade_darkTheme') as string) ?? get(media).dark
+);
+darkTheme.subscribe((val) => sessionStorage.setItem('optimade_darkTheme', val));

src/views/Footer.svelte

@@ -7,7 +7,7 @@
 				<a href="http://www.optimade.org" target="_blank">OPTIMADE</a> standard &mdash; Open Databases Integration for Materials Design.
 			</Col>
 			<Col col="auto">
-				<Switch bind:value={$media.dark}>Dark theme</Switch>
+				<Switch bind:value={$darkTheme}>Dark theme</Switch>
 			</Col>
 		</Grid>
 	</Container>
@@ -18,9 +18,9 @@
 
 	import { nodeAttribute } from '@/helpers/dom';
 
-	import { media } from '@/stores/media';
+	import { darkTheme } from '@/stores/theme';
 
-	$: nodeAttribute(document.documentElement, 'color-scheme', $media.dark ? 'dark' : 'light');
+	$: nodeAttribute(document.documentElement, 'color-scheme', $darkTheme ? 'dark' : 'light');
 </script>
 
 <style lang="scss">

src/views/Result.svelte

@@ -16,7 +16,7 @@
 		<Col col="5" md="12">
 			<ModuleSelect bind:selectedValue={module} />
 			<br />
-			<Hero size="sm" bg={$media.dark ? 'dark' : 'gray'}>
+			<Hero size="sm" bg={$darkTheme ? 'dark' : 'gray'}>
 				<div class="module">
 					<iframe name="visualisationFrame" bind:this={iframe} src={module} title="Module window" />
 				</div>
@@ -29,7 +29,7 @@
 
 <script lang="ts" context="module">
 	import { Col, Divider, Grid, Hero, Input, Steps } from 'svelte-spectre';
-	import { media } from '@/stores/media';
+	import { darkTheme } from '@/stores/theme';
 
 	import ModuleSelect from '@/views/ModuleSelect/ModuleSelect.svelte';
 	import * as JSON from '@/components/JSON';