feat(ui): add mode-watcher (dark/light mode)

package.json

@@ -21,6 +21,7 @@
 		"autoprefixer": "^10.4.20",
 		"clsx": "^2.1.1",
 		"drizzle-kit": "^0.30.2",
+		"mode-watcher": "^0.5.1",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"tailwind-merge": "^3.1.0",

pnpm-lock.yaml

@@ -33,6 +33,9 @@ importers:
       drizzle-kit:
         specifier: ^0.30.2
         version: 0.30.6
+      mode-watcher:
+        specifier: ^0.5.1
+        version: 0.5.1(svelte@5.25.6)
       svelte:
         specifier: ^5.0.0
         version: 5.25.6
@@ -1176,6 +1179,11 @@ packages:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  mode-watcher@0.5.1:
+    resolution: {integrity: sha512-adEC6T7TMX/kzQlaO/MtiQOSFekZfQu4MC+lXyoceQG+U5sKpJWZ4yKXqw846ExIuWJgedkOIPqAYYRk/xHm+w==}
+    peerDependencies:
+      svelte: ^4.0.0 || ^5.0.0-next.1
+
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -2394,6 +2402,10 @@ snapshots:
 
   minipass@7.1.2: {}
 
+  mode-watcher@0.5.1(svelte@5.25.6):
+    dependencies:
+      svelte: 5.25.6
+
   mri@1.2.0: {}
 
   mrmime@2.0.1: {}

src/routes/+layout.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
-	import '../app.css';
+	import "../app.css";
+	import { ModeWatcher } from "mode-watcher";
 	let { children } = $props();
 </script>
 
+<ModeWatcher />
 {@render children()}