add dark mode toggle button

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: 358 72% 31%;
-    --primary-foreground: 220.9 39.3% 11%;
+    --primary-foreground: 0 0% 100%;
 
     --secondary: 215 27.9% 16.9%;
     --secondary-foreground: 210 20% 98%;

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
+        <a href="/logout" rel="external" title="Logout">
-          href="/logout"
+          <Button variant="ghost" class="group text-sm/2 gap-x-2 font-medium">
-          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"
+              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>
-          Logout
+            <span
+              class="text-neutral-700 hover:text-neutral-800 dark:text-neutral-100 dark:hover:text-neutral-100"
+              >Logout</span
+            >
+          </Button>
         </a>
       {/if}
     </div>

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 />