From 43bfa77f9beb7ef0b743f5c36c112ce36fea6c8a Mon Sep 17 00:00:00 2001
From: Shahrad Elahi <shahradq@gmail.com>
Date: Sat, 27 Apr 2024 01:42:16 +0330
Subject: [PATCH] add dark mode toggle button

---
 web/src/app.css                               |  4 +-
 web/src/lib/components/page/PageHeader.svelte | 45 ++++++++++++++-----
 web/src/routes/+layout.svelte                 |  2 +
 3 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/web/src/app.css b/web/src/app.css
index 9e78d4d..5fb89d3 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -53,8 +53,8 @@
     --border: 215 27.9% 16.9%;
     --input: 215 27.9% 16.9%;
 
-    --primary: 210 20% 98%;
-    --primary-foreground: 220.9 39.3% 11%;
+    --primary: 358 72% 31%;
+    --primary-foreground: 0 0% 100%;
 
     --secondary: 215 27.9% 16.9%;
     --secondary-foreground: 210 20% 98%;
diff --git a/web/src/lib/components/page/PageHeader.svelte b/web/src/lib/components/page/PageHeader.svelte
index ad2697f..f855fe2 100644
--- a/web/src/lib/components/page/PageHeader.svelte
+++ b/web/src/lib/components/page/PageHeader.svelte
@@ -1,4 +1,11 @@
 <script lang="ts">
+  import Sun from 'lucide-svelte/icons/sun';
+  import Moon from 'lucide-svelte/icons/moon';
+
+  import { toggleMode } from 'mode-watcher';
+  import { Button } from '$lib/components/ui/button';
+  import { cn } from '$lib/utils';
+
   export let showLogout: boolean = false;
 </script>
 
@@ -9,7 +16,7 @@
       <h1 class="max-sm:text-lg">WireAdmin</h1>
     </div>
 
-    <div class={'flex items-center gap-x-8'}>
+    <div class={'flex items-center gap-x-3'}>
       <a
         href={'https://github.com/shahradelahi/wireadmin'}
         title={'Giv me a star on Github'}
@@ -17,21 +24,35 @@
       >
         <img
           src={'https://img.shields.io/github/stars/shahradelahi/wireadmin.svg?style=social&label=Star'}
-          alt={'Giv me a star on Github'}
+          alt={'Gimme a Star'}
         />
       </a>
 
+      <Button on:click={toggleMode} variant="ghost" size="icon">
+        <Sun
+          class="h-[1rem] w-[1rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+        />
+        <Moon
+          class="absolute h-[1rem] w-[1rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+        />
+        <span class="sr-only">Toggle theme</span>
+      </Button>
+
       {#if showLogout}
-        <a
-          href="/logout"
-          rel="external"
-          title="Logout"
-          class="group text-sm/2 font-medium text-neutral-700 hover:text-neutral-800"
-        >
-          <i
-            class="far fa-arrow-right-from-arc text-sm text-neutral-500 group-hover:text-neutral-800 mr-0.5"
-          ></i>
-          Logout
+        <a href="/logout" rel="external" title="Logout">
+          <Button variant="ghost" class="group text-sm/2 gap-x-2 font-medium">
+            <i
+              class={cn(
+                'far fa-arrow-right-from-arc text-sm mr-0.5',
+                'text-neutral-500 group-hover:text-neutral-800',
+                'dark:text-neutral-400 dark:group-hover:text-neutral-100',
+              )}
+            ></i>
+            <span
+              class="text-neutral-700 hover:text-neutral-800 dark:text-neutral-100 dark:hover:text-neutral-100"
+              >Logout</span
+            >
+          </Button>
         </a>
       {/if}
     </div>
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 68b64ec..403bf4f 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
   import '../app.css';
   import { Toaster } from 'svelte-french-toast';
+  import { ModeWatcher } from 'mode-watcher';
 </script>
 
+<ModeWatcher />
 <slot />
 <Toaster />