themes

2025-01-01 18:59:01 -06:00
parent 1ba1c25c84
commit 327ba53b69
7 changed files with 23 additions and 38 deletions
@@ -2,7 +2,7 @@
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

-:root {
+[data-theme='light'] {
  --text-color: #000000;
  --bg-color: #f4f4f4;
 }
@@ -9,7 +9,17 @@
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
-		<script src="%sveltekit.assets%/themeGetter.ts"></script>
+		<!--		<script>-->
+		<!--			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);-->
+		<!--			}-->
+		<!--		</script>-->
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
@@ -1,15 +1,7 @@
 <script lang="ts">
 	import '../app.css';
-	import { theme, toggleTheme } from '../stores/themeStore';
-	import { onMount } from 'svelte';

 	let { children } = $props();
-
-	onMount(() => {
-		theme.subscribe((value) => {
-			document.documentElement.setAttribute('data-theme', value);
-		});
-	});
 </script>

 <div class="flex justify-between p-6">
@@ -18,7 +10,6 @@
 		<a href="/about" class="px-6">About</a>
 		<a href="/settings" class="px-6">Settings</a>
 	</nav>
-	<button onclick={toggleTheme} class="object-right px-6">Toggle Theme</button>
 </div>

 <div class="p-4">
@@ -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'));
-}