From 972b7b983feacee5f300133e1b7cb295302c0e4f Mon Sep 17 00:00:00 2001
From: Santiago Lo Coco <se23m504@technikum-wien.at>
Date: Tue, 23 Apr 2024 23:58:17 +0200
Subject: [PATCH] Use effect

---
 src/hooks.server.ts                   |  1 +
 src/lib/components/ThemePicker.svelte | 13 ++++++++-----
 src/routes/+layout.svelte             | 15 +++++++--------
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index 8a60dd8..c5e03b9 100644
--- a/src/hooks.server.ts
+++ b/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),
   })
diff --git a/src/lib/components/ThemePicker.svelte b/src/lib/components/ThemePicker.svelte
index c926ba5..771c935 100644
--- a/src/lib/components/ThemePicker.svelte
+++ b/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
-        ? "light"
-        : "dark"
+      theme =
+        browser && window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? "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
         ? "🌙"
         : "🌞"
   })
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1d255e3..bcd2698 100644
--- a/src/routes/+layout.svelte
+++ b/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}>
-  <!-- <ThemePicker bind:theme /> -->
+<div>
   <NavBar bind:theme />
 
   <slot />