fix: mount ModeWatcher and Toaster at the root layout

The reader and login pages use +layout@ breakouts to escape the (root) shell, so anything mounted in (root)/+layout.svelte never reaches them. ModeWatcher was mounted there and duplicated in login/+layout@.svelte, which left the reader's theme toggle inert: it flipped the store but nothing wrote .dark onto <html>. Mount both once at the top-level +layout.svelte instead, which every route inherits regardless of breakouts.
2026-08-11 21:46:50 -04:00
parent 2aba90f910
commit 49f94f9ee1
3 changed files with 10 additions and 8 deletions
@@ -11,9 +11,7 @@
 	import { setThemeState } from '$lib/theme/theme.svelte';
 	import type { ThemeConfig } from '$lib/theme/presets';

-	import { ModeWatcher } from 'mode-watcher';
 	import { untrack, type Snippet } from 'svelte';
-	import { Toaster } from 'svelte-sonner';

 	let {
 		data,
@@ -40,8 +38,6 @@
 	});
 </script>

-<Toaster />
-<ModeWatcher />

 <div class="[--header-height:calc(--spacing(14))]">
 	<Sidebar.Provider class="flex flex-col">
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import '../app.css';
 	import favicon from '$lib/assets/favicon.svg';
+	import { ModeWatcher } from 'mode-watcher';
+	import { Toaster } from 'svelte-sonner';

 	let { children } = $props();
 </script>
@@ -9,6 +11,14 @@
 	<link rel="icon" href={favicon} />
 </svelte:head>

+<!--
+	Mounted here rather than per layout: the reader and login use +layout@ to
+	break out of (root), so anything mounted there never reaches them. The theme
+	toggle in the reader did nothing because ModeWatcher was not running.
+-->
+<Toaster />
+<ModeWatcher />
+
 <div class="flex h-screen min-h-screen flex-col">
 	<!-- Main Content Area -->
 	<main class="flex-1">
@@ -1,8 +1,6 @@
 <script lang="ts">
 	import '../../app.css';
 	import favicon from '$lib/assets/favicon.svg';
-	import { Toaster } from 'svelte-sonner';
-	import { ModeWatcher } from 'mode-watcher';
 	import ThemeToggle from '$lib/components/layout/theme-toggle.svelte';

 	let { children } = $props();
@@ -12,8 +10,6 @@
 	<link rel="icon" href={favicon} />
 </svelte:head>

-<Toaster />
-<ModeWatcher />

 <div class="flex h-screen min-h-screen flex-col">
 	<!-- Header -->