diff --git a/package-lock.json b/package-lock.json index eef9d32..a9bfea9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@sveltejs/adapter-node": "^5.2.9", "@tailwindcss/forms": "^0.5.9", "autoprefixer": "^10.4.20", + "js-cookie": "^3.0.5", "vitest": "^2.0.4" }, "devDependencies": { @@ -2870,6 +2871,15 @@ "jiti": "bin/jiti.js" } }, + "node_modules/js-cookie": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz", + "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==", + "license": "MIT", + "engines": { + "node": ">=14" + } + }, "node_modules/js-yaml": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", diff --git a/package.json b/package.json index 500a691..1f3e7f8 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "@sveltejs/adapter-node": "^5.2.9", "@tailwindcss/forms": "^0.5.9", "autoprefixer": "^10.4.20", + "js-cookie": "^3.0.5", "vitest": "^2.0.4" } } diff --git a/src/app.css b/src/app.css index ceabe09..ead4b79 100644 --- a/src/app.css +++ b/src/app.css @@ -2,7 +2,7 @@ @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; -:root { +[data-theme='light'] { --text-color: #000000; --bg-color: #f4f4f4; } diff --git a/src/app.html b/src/app.html index ea96c07..449b278 100644 --- a/src/app.html +++ b/src/app.html @@ -9,7 +9,17 @@ %sveltekit.head% - + + + + + + + + + + +
%sveltekit.body%
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 9d8106c..c52ee18 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,15 +1,7 @@
@@ -18,7 +10,6 @@ About Settings -
diff --git a/src/stores/themeStore.ts b/src/stores/themeStore.ts deleted file mode 100644 index 17060de..0000000 --- a/src/stores/themeStore.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { writable } from 'svelte/store'; -import { browser } from '$app/environment'; - -let storedTheme: string = 'light'; -if (browser) { - storedTheme = localStorage.getItem('theme') || 'light'; -} -export const theme = writable(storedTheme); - -theme.subscribe((value) => { - if (browser) { - localStorage.setItem('theme', value); - } -}); - -export function toggleTheme() { - theme.update((currentTheme) => (currentTheme === 'light' ? 'dark' : 'light')); -} diff --git a/static/themeGetter.ts b/static/themeGetter.ts deleted file mode 100644 index f549516..0000000 --- a/static/themeGetter.ts +++ /dev/null @@ -1,9 +0,0 @@ -const saved_theme = localStorage.getItem('theme'); -if (saved_theme) { - document.body.setAttribute('data-theme', saved_theme); -} else { - const prefers_dark = window.matchMedia('(prefers-color-scheme: dark)').matches; - const theme = prefers_dark ? 'dark' : 'light'; - document.body.setAttribute('data-theme', theme); - localStorage.setItem('theme', theme); -}