From b3653c0a6d448d215c96511ae88c5f3bc741e52f Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Sat, 16 Nov 2024 21:19:34 -0800 Subject: get system theme --- src/components/DarkToggle.svelte | 2 +- src/routes/+layout.server.ts | 1 + src/routes/+layout.ts | 18 ++++++++++++++++++ 3 files changed, 20 insertions(+), 1 deletion(-) (limited to 'src') 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`; }; 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", { -- cgit v1.2.3