From c3f48cf4fd6f552cc1774e36a78dc77b40230b38 Mon Sep 17 00:00:00 2001
From: wistkeylab <ilham.s@wistkey.dev>
Date: Fri, 6 Mar 2026 11:18:36 +0700
Subject: [PATCH] feat: add toggle theme

---
 applications/viewer/src/components/Nav.svelte | 32 +++++++++++++------
 applications/viewer/tailwind.config.cjs       | 20 ++++++++----
 2 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/applications/viewer/src/components/Nav.svelte b/applications/viewer/src/components/Nav.svelte
index 9c3ca4ad..7bf68062 100644
--- a/applications/viewer/src/components/Nav.svelte
+++ b/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>
\ No newline at end of file
diff --git a/applications/viewer/tailwind.config.cjs b/applications/viewer/tailwind.config.cjs
index 737626a1..722f170a 100644
--- a/applications/viewer/tailwind.config.cjs
+++ b/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;