feat: Dark/Light mode switcher

package.json

@@ -39,11 +39,12 @@
     "vite": "^6.0.0"
   },
   "dependencies": {
-    "lucide-svelte": "^0.474.0",
-    "socket.io": "^4.8.1",
     "@types/express": "^5.0.0",
     "cassandra-driver": "^4.7.2",
     "express": "^4.21.2",
+    "lucide-svelte": "^0.474.0",
+    "mode-watcher": "^0.5.1",
+    "socket.io": "^4.8.1",
     "socket.io-client": "^4.8.1",
     "tsm": "^2.3.0",
     "uuid": "^11.0.4"

src/lib/components/mainLayout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import MessagesSquare from 'lucide-svelte/icons/messages-square';
+  import ModeSwitcher from './modeSwitcher.svelte';
   import Channel from './channel.svelte';
   import type { Snippet } from 'svelte';
 
@@ -19,6 +20,7 @@
           <MessagesSquare class="h-6 w-6" />
           <span class="">SVChat</span>
         </a>
+        <ModeSwitcher />
       </div>
       <div class="flex-1">
         <nav class="grid items-start px-2 text-sm font-medium lg:px-4">

src/lib/components/message.svelte

@@ -3,9 +3,9 @@
   const { message, imageSrc, user }: TypeMessage = $props();
 </script>
 
-<div class="w-full hover:bg-base-300 bg-base-200 flex py-2">
+<div class="w-full hover:bg-gray-200 flex py-2 dark:hover:bg-stone-900">
-  <div class="avatar mx-2">
+  <div class="avatar mx-2 rounded-sm">
-    <div class="w-12 h-12 rounded">
+    <div class="w-12 h-12 overflow-hidden rounded-lg border bg-white">
       <img src={imageSrc} alt="Profile image for {user}" />
     </div>
   </div>

src/lib/components/modeSwitcher.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import Sun from 'lucide-svelte/icons/sun';
+  import Moon from 'lucide-svelte/icons/moon-star';
+  import { toggleMode } from 'mode-watcher';
+  import { Button } from '$lib/components/ui/button/index';
+</script>
+
+<Button on:click={toggleMode} variant="outline" size="icon" class="ml-auto">
+  <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>

src/routes/+layout.svelte

@@ -2,10 +2,12 @@
   import '../app.css';
   import type { LayoutProps } from './$types';
   import MainLayout from '$lib/components/mainLayout.svelte';
+  import { ModeWatcher } from 'mode-watcher';
   let { data, children }: LayoutProps = $props();
   const channels = data.channels;
 </script>
 
+<ModeWatcher />
 <MainLayout {channels}>
   {@render children()}
 </MainLayout>

src/routes/+page.svelte

@@ -47,7 +47,7 @@
   {/each}
 {/snippet}
 <div class="flex flex-1 flex-col items-center justify-center rounded-lg shadow-sm gap-1 h-full">
-  <div class="flex-grow flex-col-reverse flex flex-auto overflow-y-scroll overflow-x-hidden rounded-lg border-2 w-full">
+  <div class="flex-grow flex-col-reverse flex flex-auto overflow-y-scroll overflow-x-hidden rounded-lg border w-full">
     {@render message(log)}
     {@render message(data.messages)}
   </div>