diff --git a/package.json b/package.json
index f620468..5eab105 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
"clsx": "^2.1.1",
"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/app.html b/src/app.html
index 77a5ff5..03c4c3b 100644
--- a/src/app.html
+++ b/src/app.html
@@ -6,7 +6,7 @@
%sveltekit.head%
-
+
%sveltekit.body%
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
new file mode 100644
index 0000000..a847d23
--- /dev/null
+++ b/src/hooks.server.ts
@@ -0,0 +1,9 @@
+import type { Handle } from "@sveltejs/kit";
+
+export const handle: Handle = async ({ event, resolve }) => {
+ const theme = event.cookies.get("theme") ?? "";
+ const res = await resolve(event, {
+ transformPageChunk: ({ html }) => html.replace("%theme%", theme),
+ });
+ return res;
+};
diff --git a/src/lib/store/index.svelte.ts b/src/lib/store/index.svelte.ts
index a0b5904..8362c15 100644
--- a/src/lib/store/index.svelte.ts
+++ b/src/lib/store/index.svelte.ts
@@ -21,6 +21,7 @@ class Theme {
public dark = $state(false);
public toggle = () => {
this.dark = !this.dark;
+ console.log(this.dark);
};
}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5143fd1..81ace1a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -9,6 +9,9 @@
import { PUB_HOSTNAME, PUB_PLAUSIBLE_URL } from "$env/static/public";
import FancyMenu from "$lib/components/functional/FancyMenu.svelte";
import { writable } from "svelte/store";
+ import { SunIcon } from "lucide-svelte";
+ import { browser } from "$app/environment";
+ import { setCookie } from "typescript-cookie";
let { children, data } = $props();
let shouldGoBack = writable(false);
@@ -46,6 +49,23 @@
goto("/");
}
};
+
+ $effect(() => {
+ if (!browser) return;
+ if (theme.dark) {
+ document.body.classList.add("dark");
+ document.body.classList.remove("light");
+ setCookie("theme", "dark", {
+ sameSite: "strict",
+ });
+ } else {
+ document.body.classList.add("light");
+ document.body.classList.remove("dark");
+ setCookie("theme", "light", {
+ sameSite: "strict",
+ });
+ }
+ });
@@ -91,6 +111,11 @@
+
+
+
{#key data.pathname}
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
new file mode 100644
index 0000000..5e4a6de
--- /dev/null
+++ b/src/routes/+layout.ts
@@ -0,0 +1,16 @@
+import { browser } from "$app/environment";
+import { theme } from "$lib/store/index.svelte";
+import { getCookie, setCookie } from "typescript-cookie";
+
+export const load = ({ data }) => {
+ if (!browser) return;
+ const themeStr = getCookie("theme");
+ if (typeof themeStr === "undefined") {
+ theme.dark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+ setCookie("theme", theme.dark ? "dark" : "light");
+ } else {
+ theme.dark = themeStr === "dark";
+ }
+ theme.dark = getCookie("theme") === "dark";
+ return data;
+};