From d70df05c6dce2fe1b32961580b7205795c4a4bf9 Mon Sep 17 00:00:00 2001
From: nullptr <62841684+not-nullptr@users.noreply.github.com>
Date: Thu, 14 Nov 2024 14:13:15 +0000
Subject: [PATCH] fix: dark mode flicker and non-functionality in general (#22)

---
 package.json                  |  3 ++-
 src/hooks.server.ts           |  3 ++-
 src/lib/store/index.svelte.ts |  6 ++++++
 src/routes/+layout.server.ts  | 11 ++++++++++-
 src/routes/+layout.svelte     | 14 +++++++++-----
 src/routes/+layout.ts         | 10 ++++++----
 6 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 5eab105..376e914 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@types/eslint": "^9.6.0",
+		"@types/js-cookie": "^3.0.6",
 		"autoprefixer": "^10.4.20",
 		"eslint": "^9.7.0",
 		"eslint-config-prettier": "^9.1.0",
@@ -40,9 +41,9 @@
 		"@imagemagick/magick-wasm": "^0.0.31",
 		"client-zip": "^2.4.5",
 		"clsx": "^2.1.1",
+		"js-cookie": "^3.0.5",
 		"lucide-svelte": "^0.456.0",
 		"svelte-adapter-bun": "^0.5.2",
-		"typescript-cookie": "^1.0.6",
 		"wasm-vips": "^0.0.11"
 	}
 }
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index d28c64a..cd470ec 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -5,7 +5,8 @@ export const handle: Handle = async ({ event, resolve }) => {
 	if (theme !== "dark" && theme !== "light") {
 		event.cookies.set("theme", "", {
 			path: "/",
-			sameSite: "strict",
+			sameSite: "lax",
+			expires: new Date(2147483647 * 1000),
 		});
 		theme = "";
 	}
diff --git a/src/lib/store/index.svelte.ts b/src/lib/store/index.svelte.ts
index d1f7068..8b6cca1 100644
--- a/src/lib/store/index.svelte.ts
+++ b/src/lib/store/index.svelte.ts
@@ -1,5 +1,6 @@
 import { log } from "$lib/logger";
 import { VertFile } from "$lib/types";
+import JSCookie from "js-cookie";
 
 class Files {
 	public files = $state<VertFile[]>([]);
@@ -9,6 +10,11 @@ class Theme {
 	public dark = $state(false);
 	public toggle = () => {
 		this.dark = !this.dark;
+		JSCookie.set("theme", this.dark ? "dark" : "light", {
+			path: "/",
+			sameSite: "lax",
+			expires: 2147483647,
+		});
 		log(["theme"], `set to ${this.dark ? "dark" : "light"}`);
 	};
 }
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
index a3e9b3d..3e24f66 100644
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@@ -1,4 +1,13 @@
-export const load = ({ url, request }) => {
+export const load = ({ url, request, cookies }) => {
+	// if the "theme" cookie isn't "dark" or "light", reset it
+	const theme = cookies.get("theme") ?? "";
+	if (theme !== "dark" && theme !== "light") {
+		cookies.set("theme", "", {
+			path: "/",
+			sameSite: "lax",
+			expires: new Date(0),
+		});
+	}
 	const { pathname } = url;
 	const ua = request.headers.get("user-agent");
 	const isMobile = /mobile/i.test(ua || "");
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8bdfe30..3ab61c7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -11,7 +11,7 @@
 	import { writable } from "svelte/store";
 	import { MoonIcon, SunIcon } from "lucide-svelte";
 	import { browser } from "$app/environment";
-	import { setCookie } from "typescript-cookie";
+	import JSCookie from "js-cookie";
 	let { children, data } = $props();
 
 	let shouldGoBack = writable(false);
@@ -55,14 +55,18 @@
 		if (theme.dark) {
 			document.body.classList.add("dark");
 			document.body.classList.remove("light");
-			setCookie("theme", "dark", {
-				sameSite: "strict",
+			JSCookie.set("theme", "dark", {
+				path: "/",
+				sameSite: "lax",
+				expires: 2147483647,
 			});
 		} else {
 			document.body.classList.add("light");
 			document.body.classList.remove("dark");
-			setCookie("theme", "light", {
-				sameSite: "strict",
+			JSCookie.set("theme", "light", {
+				path: "/",
+				sameSite: "lax",
+				expires: 2147483647,
 			});
 		}
 	});
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index 8348af2..f10ab4e 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -1,18 +1,20 @@
 import { browser } from "$app/environment";
 import { theme } from "$lib/store/index.svelte";
-import { getCookie, setCookie } from "typescript-cookie";
+import JSCookie from "js-cookie";
 
 export const load = ({ data }) => {
 	if (!browser) return;
-	const themeStr = getCookie("theme");
+	const themeStr = JSCookie.get("theme");
 	if (typeof themeStr === "undefined") {
 		theme.dark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-		setCookie("theme", theme.dark ? "dark" : "light", {
+		JSCookie.set("theme", theme.dark ? "dark" : "light", {
 			sameSite: "strict",
+			path: "/",
+			expires: 2147483647,
 		});
 	} else {
 		theme.dark = themeStr === "dark";
 	}
-	theme.dark = getCookie("theme") === "dark";
+	theme.dark = JSCookie.get("theme") === "dark";
 	return data;
 };