use ModeWatcher for skeleton 4/5 examples (already in 3) to standardize, simplify, and fixes initial mode issue

techniq · techniq · commit b5cb17099fe2 · 2026-07-30T20:11:14.000-04:00
diff --git a/examples/skeleton-4/package.json b/examples/skeleton-4/package.json
@@ -21,6 +21,7 @@
 		"@sveltejs/vite-plugin-svelte": "^7.1.2",
 		"@tailwindcss/vite": "^4.3.0",
 		"layerchart": "workspace:*",
+		"mode-watcher": "^1.1.0",
 		"prettier": "^3.8.3",
 		"prettier-plugin-svelte": "^4.1.0",
 		"prettier-plugin-tailwindcss": "^0.8.0",
diff --git a/examples/skeleton-4/src/app.html b/examples/skeleton-4/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-theme="cerberus">
+<html lang="en">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
diff --git a/examples/skeleton-4/src/lib/components/Lightswitch.svelte b/examples/skeleton-4/src/lib/components/Lightswitch.svelte
diff --git a/examples/skeleton-4/src/routes/+layout.svelte b/examples/skeleton-4/src/routes/+layout.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
-	import '../app.css';
-	import Lightswitch from '$lib/components/Lightswitch.svelte';
+	import { Switch } from '@skeletonlabs/skeleton-svelte';
+	import { ModeWatcher, mode, setMode } from 'mode-watcher';
+
 	import favicon from '$lib/assets/favicon.svg';
+	import '../app.css';
 
 	let { children } = $props();
 </script>
@@ -10,9 +12,20 @@
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
+<ModeWatcher defaultTheme="cerberus" />
+
 <main class="p-4">
 	<div class="pb-4 text-right">
-		<Lightswitch />
+		<Switch
+			checked={mode.current === 'dark'}
+			onCheckedChange={(e) => setMode(e.checked ? 'dark' : 'light')}
+		>
+			<Switch.Control>
+				<Switch.Thumb />
+			</Switch.Control>
+			<Switch.HiddenInput />
+		</Switch>
 	</div>
-	{@render children()}
+
+	{@render children?.()}
 </main>
diff --git a/examples/skeleton-5/package.json b/examples/skeleton-5/package.json
@@ -21,6 +21,7 @@
 		"@sveltejs/vite-plugin-svelte": "^7.1.2",
 		"@tailwindcss/vite": "^4.3.0",
 		"layerchart": "workspace:*",
+		"mode-watcher": "^1.1.0",
 		"prettier": "^3.8.3",
 		"prettier-plugin-svelte": "^4.1.0",
 		"prettier-plugin-tailwindcss": "^0.8.0",
diff --git a/examples/skeleton-5/src/app.html b/examples/skeleton-5/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-theme="cerberus">
+<html lang="en">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
diff --git a/examples/skeleton-5/src/lib/components/Lightswitch.svelte b/examples/skeleton-5/src/lib/components/Lightswitch.svelte
diff --git a/examples/skeleton-5/src/routes/+layout.svelte b/examples/skeleton-5/src/routes/+layout.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
-	import '../app.css';
-	import Lightswitch from '$lib/components/Lightswitch.svelte';
+	import { Switch } from '@skeletonlabs/skeleton-svelte';
+	import { ModeWatcher, mode, setMode } from 'mode-watcher';
+
 	import favicon from '$lib/assets/favicon.svg';
+	import '../app.css';
 
 	let { children } = $props();
 </script>
@@ -10,9 +12,20 @@
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
+<ModeWatcher defaultTheme="cerberus" />
+
 <main class="p-4">
 	<div class="pb-4 text-right">
-		<Lightswitch />
+		<Switch
+			checked={mode.current === 'dark'}
+			onCheckedChange={(e) => setMode(e.checked ? 'dark' : 'light')}
+		>
+			<Switch.Control>
+				<Switch.Thumb />
+			</Switch.Control>
+			<Switch.HiddenInput />
+		</Switch>
 	</div>
-	{@render children()}
+
+	{@render children?.()}
 </main>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
