diff --git a/frontend/src/app.html b/frontend/src/app.html
index e52450df..608bad89 100644
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -1,10 +1,19 @@
-
+
Anexo76 - Gestión de Comercio Exterior
+
%sveltekit.head%
diff --git a/frontend/src/lib/components/sidebar/nav-user.svelte b/frontend/src/lib/components/sidebar/nav-user.svelte
index 151259a8..f3f472e2 100644
--- a/frontend/src/lib/components/sidebar/nav-user.svelte
+++ b/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';
+ }
@@ -111,6 +154,15 @@
Language: {currentLocale.toUpperCase()}
+
+ {#if isDarkMode}
+
+ Light Mode
+ {:else}
+
+ Dark Mode
+ {/if}
+