theme cookie

4 files changed, 19 insertions, 11 deletions

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 />