From f5f42437268f2bbee4d5a98c54366095914facb3 Mon Sep 17 00:00:00 2001
From: Captain Efficiency <nathanhubert23@gmail.com>
Date: Sun, 28 Jun 2026 08:52:02 -0400
Subject: [PATCH] fix(theme): use template one-click toggle instead of dropdown
 select

Replace the Light/Dark/System DropdownMenu theme picker with the
ergo-basics template's direct Sun/Moon toggle (mode-watcher `toggleMode`):
one click flips the theme, icons cross-fade. Matches the reputation-system
app's theme control. Component interface is unchanged (`<Theme />`, no props).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/routes/Theme.svelte | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/src/routes/Theme.svelte b/src/routes/Theme.svelte
index d6407ed..59c5f4f 100644
--- a/src/routes/Theme.svelte
+++ b/src/routes/Theme.svelte
@@ -2,14 +2,13 @@
     import Sun from "lucide-svelte/icons/sun";
     import Moon from "lucide-svelte/icons/moon";
 
-    import { resetMode, setMode } from "mode-watcher";
-    import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
+    import { toggleMode } from "mode-watcher";
     import { Button } from "$lib/components/ui/button/index.js";
 </script>
 
-<DropdownMenu.Root>
-<DropdownMenu.Trigger asChild let:builder>
-    <Button builders={[builder]} variant="outline" size="icon">
+<!-- Direct light/dark toggle: one click flips the theme, the Sun/Moon icons
+     rotate + scale to cross-fade. No dropdown. -->
+<Button on:click={toggleMode} variant="outline" size="icon">
     <Sun
     class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
     />
@@ -17,11 +16,4 @@
     class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
     />
     <span class="sr-only">Toggle theme</span>
-    </Button>
-</DropdownMenu.Trigger>
-<DropdownMenu.Content align="end">
-    <DropdownMenu.Item on:click={() => setMode("light")}>Light</DropdownMenu.Item>
-    <DropdownMenu.Item on:click={() => setMode("dark")}>Dark</DropdownMenu.Item>
-    <DropdownMenu.Item on:click={() => resetMode()}>System</DropdownMenu.Item>
-</DropdownMenu.Content>
-</DropdownMenu.Root>
+</Button>