fix: dark mode flicker and non-functionality in general (#22)

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"
 	}
 }

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 = "";
 	}

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"}`);
 	};
 }

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 || "");

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", {
+			JSCookie.set("theme", "dark", {
-				sameSite: "strict",
+				path: "/",
+				sameSite: "lax",
+				expires: 2147483647,
 			});
 		} else {
 			document.body.classList.add("light");
 			document.body.classList.remove("dark");
-			setCookie("theme", "light", {
+			JSCookie.set("theme", "light", {
-				sameSite: "strict",
+				path: "/",
+				sameSite: "lax",
+				expires: 2147483647,
 			});
 		}
 	});

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;
 };