mode-watcher

src/lib/components/extra/DarkMode.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+ import SunIcon from "@lucide/svelte/icons/sun";
+ import MoonIcon from "@lucide/svelte/icons/moon";
+
+ import { toggleMode } from "mode-watcher";
+ import { Button } from "$lib/components/ui/button/index.js";
+</script>
+
+<Button onclick={toggleMode} variant="outline" size="icon">
+ <SunIcon
+  class="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 !transition-all dark:scale-0 dark:-rotate-90"
+ />
+ <MoonIcon
+  class="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 !transition-all dark:scale-100 dark:rotate-0"
+ />
+ <span class="sr-only">Toggle theme</span>
+</Button>

src/routes/+layout.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
-	import './layout.css';
+	import '../app.css';
 	import favicon from '$lib/assets/favicon.svg';
+    import { ModeWatcher } from "mode-watcher";
 
 	let { children } = $props();
 </script>
 
 <svelte:head><link rel="icon" href={favicon} /></svelte:head>
+
+<ModeWatcher />
 {@render children()}

src/routes/+page.svelte

@@ -1,2 +1,3 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<div class="flex min-h-screen flex-col items-center justify-center gap-2">
+    <h1>test</h1>
+</div>