From 18811cc7a128c66c1e039d9bb3f52d2d195b8d49 Mon Sep 17 00:00:00 2001
From: Bob <dv4xd@proton.me>
Date: Wed, 7 Aug 2024 21:28:49 +0800
Subject: [PATCH] problem: can't select light/dark mode theme

---
 package-lock.json                  |  9 +++++++++
 package.json                       |  1 +
 src/layouts/SidePanelLayout.svelte | 23 +++++++++++++++++------
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4c293a6..dcb22e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
 				"mode-watcher": "^0.3.0",
 				"paneforge": "^0.0.4",
 				"qrious": "^4.0.2",
+				"svelte-radix": "^1.1.0",
 				"svelte-sonner": "^0.3.24",
 				"sveltekit-superforms": "^2.14.0",
 				"tailwind-merge": "^2.3.0",
@@ -5003,6 +5004,14 @@
 				}
 			}
 		},
+		"node_modules/svelte-radix": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/svelte-radix/-/svelte-radix-1.1.0.tgz",
+			"integrity": "sha512-kyE9wZiJV937INGb+wiBkAjmGtQUUYRPkVL2Q+/gj+9Vog1Ewd2wNvNmpNMUd+c+euxoc5u5YZMuCUgky9EUPw==",
+			"peerDependencies": {
+				"svelte": "^3.54.0 || ^4.0.0 || ^5.0.0"
+			}
+		},
 		"node_modules/svelte-sonner": {
 			"version": "0.3.24",
 			"resolved": "https://registry.npmjs.org/svelte-sonner/-/svelte-sonner-0.3.24.tgz",
diff --git a/package.json b/package.json
index ce5d1da..3350cf0 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
 		"mode-watcher": "^0.3.0",
 		"paneforge": "^0.0.4",
 		"qrious": "^4.0.2",
+		"svelte-radix": "^1.1.0",
 		"svelte-sonner": "^0.3.24",
 		"sveltekit-superforms": "^2.14.0",
 		"tailwind-merge": "^2.3.0",
diff --git a/src/layouts/SidePanelLayout.svelte b/src/layouts/SidePanelLayout.svelte
index b85546e..f0e0e15 100644
--- a/src/layouts/SidePanelLayout.svelte
+++ b/src/layouts/SidePanelLayout.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import Menu from 'lucide-svelte/icons/menu';
-	import Search from 'lucide-svelte/icons/search';
-
+	import Sun from 'svelte-radix/Sun.svelte';
+	import Moon from 'svelte-radix/Moon.svelte';
+	import { toggleMode } from 'mode-watcher';
 	import { Button } from '$lib/components/ui/button/index.js';
-	import { Input } from '$lib/components/ui/input/index.js';
 	import * as Sheet from '$lib/components/ui/sheet/index.js';
 	import NewMenu from '../components/Menu.svelte';
 	import RocketPillCard from '../components/RocketPillCard.svelte';
@@ -57,10 +57,21 @@
 					</div>
 				</Sheet.Content>
 			</Sheet.Root>
-			 <NotifyMe />
-
-			<div class="w-full flex-1 shrink"><Badge class="flex h-8 max-w-16 shrink-0 items-center justify-center rounded-sm">{$bitcoinTip.height}</Badge>
+			<NotifyMe />
+			<div class="w-full flex-1 shrink">
+				<Badge class="flex h-8 max-w-16 shrink-0 items-center justify-center rounded-sm"
+					>{$bitcoinTip.height}</Badge
+				>
 			</div>
+			<Button on:click={toggleMode} variant="outline" size="icon" class="shrink-0">
+				<Sun
+					class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+				/>
+				<Moon
+					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>
 			<Login />
 		</header>
 		<div class="flex flex-1 flex-col gap-4 overflow-auto p-4 lg:gap-6 lg:p-6">