Use effect

src/hooks.server.ts

@@ -16,6 +16,7 @@ export const handle: Handle = async ({ event, resolve }) => {
   event.setHeaders({
     "cache-control": `private, max-age=${5 * 60}`,
   })
+
   const response = await resolve(event, {
     transformPageChunk: ({ html }) => html.replace("%THEME%", theme),
   })

src/lib/components/ThemePicker.svelte

@@ -6,24 +6,27 @@
   import { slide } from "svelte/transition"
   import type { Theme } from "../../hooks.server"
   import { applyAction, enhance } from "$app/forms"
+  import { browser } from "$app/environment"
+
   let { theme } = $props<{ theme: Theme }>()
 
   function toggleTheme() {
     const currentIndex = themes.indexOf(theme)
     theme = themes[(currentIndex + 1) % themes.length]
     if (theme == "auto") {
-      theme = window.matchMedia("(prefers-color-scheme: dark)").matches
+      theme =
-        ? "light"
+        browser && window.matchMedia("(prefers-color-scheme: dark)").matches
-        : "dark"
+          ? "light"
+          : "dark"
     }
-    console.log(theme)
   }
 
   let icon = $derived.by(() => {
     if (theme === "light") return "🌞"
     if (theme === "dark") return "🌙"
     if (theme === "auto")
-      return window.matchMedia("(prefers-color-scheme: dark)").matches
+      return browser &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches
         ? "🌙"
         : "🌞"
   })

src/routes/+layout.svelte

@@ -1,21 +1,20 @@
 <script lang="ts">
   import NavBar from "$lib/components/NavBar.svelte"
-  import ThemePicker, { type Theme } from "$lib/components/ThemePicker.svelte"
+  import type { Theme } from "../hooks.server"
+  import { browser } from "$app/environment"
 
   import "../app.css"
 
-  // let lastTheme: string | null = null
-  // if (typeof window !== "undefined" && typeof localStorage !== "undefined") {
-  //   lastTheme = localStorage.getItem("theme") || "dark"
-  // }
-
   let { data } = $props()
 
   let theme = $state(data.theme as Theme)
+
+  $effect(() => {
+    browser && (document.documentElement.dataset.theme = theme)
+  })
 </script>
 
-<div data-theme={theme}>
+<div>
-  <!-- <ThemePicker bind:theme /> -->
   <NavBar bind:theme />
 
   <slot />