theme cookie

10 files changed, 36 insertions, 20 deletions

diff --git a/src/components/DarkToggle.svelte b/src/components/DarkToggle.svelte
index 7ed2ba1c..5ddc80a1 100644
--- a/src/components/DarkToggle.svelte
+++ b/src/components/DarkToggle.svelte
@@ -1,7 +1,10 @@
 <script>
   import { t } from "$lib/translations";
   import { theme } from "$lib/store";
-  let dark = () => ($theme = $theme === "dark" ? "light" : "dark");
+  let dark = () => {
+    $theme = $theme === "dark" ? "light" : "dark";
+    document.cookie = `theme=${$theme}; path=/; max-age=86400`;
+  };
 </script>
 
 <button
diff --git a/src/lib/store.ts b/src/lib/store.ts
index fab92773..5c7a0957 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -57,7 +57,7 @@ export const pin = persistLocal("pin");
 export const rate = writable();
 export const request = writable();
 export const requestRedirect = writable();
-export const theme = persistLocal("theme", "light");
+export const theme = writable("light");
 export const token = persistSession("token");
 export const ndef = writable();
 export const showQr = persistLocal("showQr", true);
diff --git a/src/routes/(app)/+layout.server.ts b/src/routes/(app)/+layout.server.ts
index b5a279f2..96bde919 100644
--- a/src/routes/(app)/+layout.server.ts
+++ b/src/routes/(app)/+layout.server.ts
@@ -55,5 +55,6 @@ export async function load({ cookies, request, url, params }) {
 		console.log(e);
 	}
 
-	return { user, token, rate, rates, subject };
+	const theme = cookies.get("theme");
+	return { user, token, rate, rates, subject, theme };
 }
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 301b838b..095e597d 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -10,7 +10,7 @@
     passwordPrompt,
     password,
     pin,
-    theme,
+    theme as themeStore,
   } from "$lib/store";
   import { page } from "$app/stores";
   import { browser } from "$app/environment";
@@ -24,13 +24,16 @@
 
   export let data;
 
-  let { generate, rate, user, subject, token, rates } = data;
+  let { generate, rate, user, subject, token, rates, theme } = data;
+  $: theme = $themeStore;
 
   $: update(data);
   let update = (data) => {
-    ({ rate, user, subject, token, rates } = data);
+    ({ rate, user, subject, token, rates, theme } = data);
   };
 
+  $themeStore = theme;
+
   afterNavigate(() => {
     if (user) {
       preloadData(`/${user.username}`);
@@ -113,7 +116,7 @@
 
 <SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
 
-<main class="pb-20 min-h-dvh" data-theme={$theme}>
+<main class="pb-20 min-h-dvh" data-theme={theme}>
   <AppHeader {user} {subject} />
   {#if !$loading}
     <slot />
diff --git a/src/routes/(app)/invoice/[id]/+layout.server.ts b/src/routes/(app)/invoice/[id]/+layout.server.ts
index a844b928..e428d9fe 100644
--- a/src/routes/(app)/invoice/[id]/+layout.server.ts
+++ b/src/routes/(app)/invoice/[id]/+layout.server.ts
@@ -1,6 +1,6 @@
-import * as Qr from "qrcode-base64";
 import { get } from "$lib/utils";
 import { redirect } from "@sveltejs/kit";
+import * as Qr from "qrcode-base64";
 
 export async function load({ cookies, depends, params, url, parent }) {
 	depends("app:invoice");
@@ -36,5 +36,6 @@ export async function load({ cookies, depends, params, url, parent }) {
 	}
 
 	const src = Qr.drawImg(invoice?.text || "", { size: 500 });
-	return { id, invoice, subject, src, user, token };
+	const theme = cookies.get("theme");
+	return { id, invoice, subject, src, user, token, theme };
 }
diff --git a/src/routes/(app)/invoice/[id]/[email protected] b/src/routes/(app)/invoice/[id]/[email protected]
index da801750..62c05db1 100644
--- a/src/routes/(app)/invoice/[id]/[email protected]
+++ b/src/routes/(app)/invoice/[id]/[email protected]
@@ -10,7 +10,7 @@
     passwordPrompt,
     password,
     pin,
-    theme,
+    theme as themeStore,
   } from "$lib/store";
   import { page } from "$app/stores";
   import { browser } from "$app/environment";
@@ -24,13 +24,16 @@
 
   export let data;
 
-  let { generate, rate, user, subject, token, rates } = data;
+  let { generate, rate, user, subject, token, rates, theme } = data;
 
   $: update(data);
   let update = (data) => {
-    ({ rate, user, subject, token, rates } = data);
+    ({ rate, user, subject, token, rates, theme } = data);
   };
 
+  $: theme = $themeStore;
+  $themeStore = theme;
+
   onMount(async () => {
     if (browser) {
       checkSocket();
@@ -104,7 +107,7 @@
 
 <SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
 
-<main class="min-h-dvh" data-theme={$theme}>
+<main class="min-h-dvh" data-theme={theme}>
   <AppHeader {user} {subject} />
   {#if !$loading}
     <slot />
diff --git a/src/routes/(static)/+layout.svelte b/src/routes/(static)/+layout.svelte
index f09852fb..c9bdc091 100644
--- a/src/routes/(static)/+layout.svelte
+++ b/src/routes/(static)/+layout.svelte
@@ -1,18 +1,20 @@
 <script>
   import { SvelteToast } from "@zerodevx/svelte-toast";
   import Footer from "$comp/Footer.svelte";
-  import { theme } from "$lib/store";
   import LandingHeader from "$comp/LandingHeader.svelte";
+  import { theme as themeStore } from "$lib/store";
 
   export let data;
+  let { theme } = data;
   $: ({ user } = data);
+  $: theme = $themeStore;
 </script>
 
 <SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
 <LandingHeader {user} />
 <main
   class="container flex px-4 md:px-40 mx-auto min-h-[600px]"
-  data-theme={$theme}
+  data-theme={theme}
 >
   <slot />
 </main>
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
index b4022e69..78a4d012 100644
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@@ -37,8 +37,10 @@ export const load = async ({ cookies, request, url }) => {
 	}
 
 	await loadTranslations(locale, pathname); // keep this just before the `return`
+	const theme = cookies.get("theme");
 
 	return {
+		theme,
 		host,
 		pathname,
 		i18n: { locale, route: pathname },
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 78ce0fd9..e5aeb206 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,15 +4,18 @@
   import "../app.css";
   import { loading, t } from "$lib/translations";
   import { onMount } from "svelte";
-  import { installPrompt, theme } from "$lib/store";
+  import { installPrompt, theme as themeStore } from "$lib/store";
 
   export let data;
-  let { pathname } = data;
+  let { pathname, theme } = data;
+  $themeStore = theme;
 
   let host = PUBLIC_DOMAIN.includes("localhost")
     ? `http://${PUBLIC_DOMAIN}`
     : `https://${PUBLIC_DOMAIN}`;
 
+  $: theme = $themeStore
+
   onMount(() => {
     if (!browser) return;
     window.addEventListener("beforeinstallprompt", (event) => {
@@ -44,7 +47,7 @@
 </svelte:head>
 
 {#if !$loading}
-  <main data-theme={$theme}>
+  <main data-theme={theme}>
     <slot />
   </main>
 {/if}
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index fac22b19..ee0ed70c 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -10,8 +10,6 @@ export const load = async ({ data }) => {
 
 	await setRoute(route);
 	await setLocale(locale);
-
-	return i18n;
 };
 
 addIcon("coinos:logo", {