Refactor ThemePicker

src/lib/components/NavBar.svelte

@@ -1,49 +1,9 @@
-<script lang="ts" context="module">
-  export const themes = ["light", "dark", "auto"] as const
-  //   export type Theme = (typeof themes)[number]
-</script>
-
 <script lang="ts">
-  // import {browser} from '$app/environment'
   import { applyAction, enhance } from "$app/forms"
-  import { page } from "$app/stores"
+  import ThemePicker from "./ThemePicker.svelte"
-  import { slide } from "svelte/transition"
   import type { Theme } from "../../hooks.server"
+
   let { theme } = $props<{ theme: Theme }>()
-
-  // const deriveNextTheme = (theme: Theme): Theme => {
-  // 	switch (theme) {
-  // 		case 'dark':
-  // 			return 'light'
-  // 		case 'light':
-  // 			return 'dark'
-  // 		case 'auto':
-  // 		default:
-  // 			if (!browser) return 'auto'
-  // 			return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'light' : 'dark'
-  // 	}
-  // }
-  // $derived nextTheme = deriveNextTheme($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"
-    }
-    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
-        ? "🌙"
-        : "🌞"
-  })
 </script>
 
 <header class="flex items-center justify-between px-2 py-4">
@@ -54,21 +14,6 @@
   <nav class="flex items-center gap-4">
     <button class="py-2 px-4"> Login </button>
 
-    <form
+    <ThemePicker bind:theme />
-      method="POST"
-      action="/?/theme"
-      use:enhance={async () => {
-        return async ({ result }) => {
-          await applyAction(result)
-        }
-      }}
-    >
-      <input name="theme" value={theme} hidden />
-      {#key theme}
-        <button transition:slide={{ axis: "x" }} onclick={toggleTheme}>
-          {icon}
-        </button>
-      {/key}
-    </form>
   </nav>
 </header>

src/lib/components/ThemePicker.svelte

@@ -1,38 +1,47 @@
 <script lang="ts" context="module">
-  export const themes = ["light", "dark"] as const
+  export const themes = ["light", "dark", "auto"] as const
-  export type Theme = (typeof themes)[number]
 </script>
 
 <script lang="ts">
   import { slide } from "svelte/transition"
+  import type { Theme } from "../../hooks.server"
+  import { applyAction, enhance } from "$app/forms"
   let { theme } = $props<{ theme: Theme }>()
 
   function toggleTheme() {
     const currentIndex = themes.indexOf(theme)
     theme = themes[(currentIndex + 1) % themes.length]
-    // if (typeof window !== "undefined" && typeof localStorage !== "undefined") {
+    if (theme == "auto") {
-    //   localStorage.setItem("theme", theme)
+      theme = 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
+        ? "🌙"
+        : "🌞"
   })
 </script>
 
-{#key theme}
+<form
-  <button transition:slide={{ axis: "x" }} onclick={toggleTheme}>
+  method="POST"
-    {icon}
+  action="/?/theme"
-  </button>
+  use:enhance={async () => {
-{/key}
+    return async ({ result }) => {
-
+      await applyAction(result)
-<slot />
+    }
-
+  }}
-<style lang="postcss">
+>
-  button {
+  <input name="theme" value={theme} hidden />
-    @apply absolute top-0 right-0;
+  {#key theme}
-    @apply text-3xl;
+    <button transition:slide={{ axis: "x" }} onclick={toggleTheme}>
-    @apply cursor-pointer;
+      {icon}
-  }
+    </button>
-</style>
+  {/key}
+</form>