[Yaci Viewer] Toggle Dark/Light Mode

applications/viewer/src/components/Nav.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount, onDestroy } from 'svelte';
-    import { page } from "$app/stores";
+    import { theme, toggleTheme } from '$lib/stores/theme';
 
     function closeMenu(menuId: string) {
         if (typeof document !== 'undefined') {
@@ -20,19 +20,20 @@
             const target = event.target as Node;
             // Check if the click is outside the open menu
             if (menuElement && !menuElement.contains(target)) {
-                closeMenu(openMenuId); // Close the currently open menu
-                openMenuId = null; // Reset the open menu tracker
+                closeMenu(openMenuId);
+                // Close the currently open menu
+                openMenuId = null;
+                // Reset the open menu tracker
             }
         }
     }
 
     function handleMenuToggle(event: MouseEvent) {
         if (typeof document === 'undefined') return;
-
         const target = event.target as HTMLElement;
         const linkClicked = target.closest('a');
         const detailsParent = target.closest('details');
-
+        
         if (linkClicked && detailsParent) {
             const menuId = detailsParent.id;
             closeMenu(menuId);
@@ -111,8 +112,21 @@
     <div class="flex-1">
         <a class="btn btn-ghost normal-case text-xl" href="/">Yaci Viewer</a>
     </div>
-    <div class="flex-none">
-        <!-- Mobile Menu Button -->
+
+    <div class="flex-none flex items-center gap-1 md:gap-2">
+
+        <button class="btn btn-ghost btn-circle" on:click={toggleTheme} aria-label="Toggle Theme">
+            {#if $theme === 'yaci-dark'}
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+                </svg>
+            {:else}
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+                </svg>
+            {/if}
+        </button>
+
         <div class="dropdown dropdown-end lg:hidden">
             <label tabindex="0" class="btn btn-ghost lg:hidden">
                 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
@@ -193,7 +207,7 @@
                 </li>
             </ul>
         </div>
-        <!-- Desktop Menu -->
+
         <ul id="desktop-menu-list" class="menu menu-horizontal px-1 hidden lg:flex">
             <li><a href="/">Home</a></li>
             <li><a href="/blocks">Blocks</a></li>
@@ -267,4 +281,4 @@
             </li>
         </ul>
     </div>
-</div>
+</div>

applications/viewer/tailwind.config.cjs

@@ -1,16 +1,24 @@
 const config = {
-	content: [
-		'./src/**/*.{html,js,svelte,ts}'
-	],
+	content: ['./src/**/*.{html,js,svelte,ts}'],
 
 	theme: {
 		extend: {}
 	},
 
-	plugins: [
-        require('daisyui')
-	],
+	plugins: [require('daisyui')],
 	darkMode: 'class',
+	daisyui: {
+		themes: [
+			{
+				yaci: {
+					...require('daisyui/src/theming/themes')['light']
+				},
+				'yaci-dark': {
+					...require('daisyui/src/theming/themes')['dark']
+				}
+			}
+		]
+	}
 };
 
 module.exports = config;