Primer version funcional

static_assets/js/theme.js

@@ -0,0 +1,31 @@
+// assets/js/theme.js
+document.addEventListener('DOMContentLoaded', () => {
+    const themeToggle = document.getElementById('theme-toggle');
+    const themeIcon = document.getElementById('theme-icon');
+
+    const applyTheme = (theme) => {
+        if (theme === 'dark') {
+            document.documentElement.classList.add('dark-mode');
+            if(themeIcon) themeIcon.classList.replace('bi-sun-fill', 'bi-moon-fill');
+        } else {
+            document.documentElement.classList.remove('dark-mode');
+            if(themeIcon) themeIcon.classList.replace('bi-moon-fill', 'bi-sun-fill');
+        }
+    };
+
+    // Aplica el tema guardado al cargar la página.
+    // Esto se hace en el head para evitar FOUC, pero lo mantenemos aquí para el ícono.
+    const storedTheme = localStorage.getItem('theme') || 'light';
+    applyTheme(storedTheme);
+
+
+    if(themeToggle) {
+        themeToggle.addEventListener('click', () => {
+            const isDarkMode = document.documentElement.classList.contains('dark-mode');
+            const newTheme = isDarkMode ? 'light' : 'dark';
+            
+            localStorage.setItem('theme', newTheme);
+            applyTheme(newTheme);
+        });
+    }
+});