feat(theme): add theme toggle functionality and initialize theme state

frontend/src/lib/components/sidebar/nav-user.svelte

@@ -10,6 +10,8 @@
 	import LogOutIcon from "@lucide/svelte/icons/log-out";
 	import SparklesIcon from "@lucide/svelte/icons/sparkles";
 	import LanguagesIcon from "@lucide/svelte/icons/languages";
+	import MoonIcon from "@lucide/svelte/icons/moon";
+	import SunIcon from "@lucide/svelte/icons/sun";
 	import { logout } from "$lib/auth";
 	import { cookieName } from "$lib/paraglide/runtime";
 	import { page } from "$app/state";
@@ -21,6 +23,30 @@
 	// Estado reactivo del idioma actual
 	let currentLocale = $derived(page.data.locale || 'en');
 
+	// Estado reactivo del tema actual
+	let isDarkMode = $state(false);
+
+	// Inicializar el estado del tema al montar el componente
+	$effect(() => {
+		if (browser) {
+			// Cargar la preferencia guardada o usar el valor actual del HTML
+			const savedTheme = localStorage.getItem('theme');
+			if (savedTheme) {
+				isDarkMode = savedTheme === 'dark';
+				if (savedTheme === 'dark') {
+					document.documentElement.classList.add('dark');
+				} else {
+					document.documentElement.classList.remove('dark');
+				}
+			} else {
+				// Si no hay preferencia guardada, usar el valor actual
+				isDarkMode = document.documentElement.classList.contains('dark');
+				// Guardar el estado actual
+				localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
+			}
+		}
+	});
+
 	async function handleLogout() {
 		await logout();
 	}
@@ -42,6 +68,23 @@
 		// Recargar la página para que el servidor procese el nuevo idioma
 		window.location.reload();
 	}
+
+	function toggleTheme() {
+		if (!browser) return;
+		
+		const html = document.documentElement;
+		const newTheme = html.classList.contains('dark') ? 'light' : 'dark';
+		
+		if (newTheme === 'dark') {
+			html.classList.add('dark');
+		} else {
+			html.classList.remove('dark');
+		}
+		
+		// Guardar la preferencia en localStorage
+		localStorage.setItem('theme', newTheme);
+		isDarkMode = newTheme === 'dark';
+	}
 </script>
 
 <Sidebar.Menu>
@@ -111,6 +154,15 @@
 					<LanguagesIcon />
 					Language: {currentLocale.toUpperCase()}
 				</DropdownMenu.Item>
+				<DropdownMenu.Item onclick={toggleTheme}>
+					{#if isDarkMode}
+						<SunIcon />
+						Light Mode
+					{:else}
+						<MoonIcon />
+						Dark Mode
+					{/if}
+				</DropdownMenu.Item>
 				<DropdownMenu.Separator />
 				<DropdownMenu.Item onclick={handleLogout}>
 					<LogOutIcon />