get system theme

3 files changed, 20 insertions, 1 deletions

diff --git a/src/components/DarkToggle.svelte b/src/components/DarkToggle.svelte
index be1fe858..904df022 100644
--- a/src/components/DarkToggle.svelte
+++ b/src/components/DarkToggle.svelte
@@ -3,7 +3,7 @@
   import { theme } from "$lib/store";
   let dark = () => {
     $theme = $theme === "dark" ? "light" : "dark";
-    document.cookie = `theme=${$theme}; path=/; max-age=86400`;
+    document.cookie = `theme=${$theme}; path=/; max-age=21000000`;
   };
 </script>
 
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
index 7fa95931..584e836c 100644
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@@ -37,6 +37,7 @@ export const load = async ({ cookies, request, url }) => {
 	}
 
 	await loadTranslations(locale, pathname); // keep this just before the `return`
+
 	const theme = cookies.get("theme") || "light";
 
 	return {
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index 0de57279..5f480c5a 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -1,5 +1,7 @@
+import { browser } from "$app/environment";
 import { addTranslations, setLocale, setRoute } from "$lib/translations/index";
 import { addIcon } from "iconify-icon";
+import cookies from "js-cookie";
 
 /** @type {import('@sveltejs/kit').Load} */
 export const load = async ({ data }) => {
@@ -10,6 +12,22 @@ export const load = async ({ data }) => {
 
 	await setRoute(route);
 	await setLocale(locale);
+
+	if (browser) {
+		let theme = cookies.get("theme");
+
+		if (!theme) {
+			theme = matchMedia("(prefers-color-scheme: dark)").matches
+				? "dark"
+				: "light";
+
+			const expires = new Date();
+			expires.setSeconds(expires.getSeconds() + 21000000);
+
+			cookies.set("theme", theme, { path: "/", expires });
+			if (theme === "dark") location.reload();
+		}
+	}
 };
 
 addIcon("coinos:logo", {