agrega toggle de modo claro/oscuro con persistencia en localStorage

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-23 18:20:08 -04:00
parent 36a40938c7
commit ca021cc3f7
5 changed files with 67 additions and 19 deletions
@@ -1,9 +1,10 @@
 <!DOCTYPE html>
-<html lang="es">
+<html lang="es" data-theme="dark">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Spotify Cantina{% endblock %}</title>
+    <script>(function(){var t=localStorage.getItem('theme')||'dark';document.documentElement.setAttribute('data-theme',t);})()</script>
    <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
@@ -13,6 +14,7 @@
            <a href="/">Reproductor</a>
            <a href="/stats/">Estadísticas</a>
            <a id="admin-nav-btn" href="/admin/login" class="btn-sm">Admin</a>
+            <button id="theme-toggle" class="theme-toggle" onclick="toggleTheme()" title="Cambiar tema">☀️</button>
        </div>
    </nav>
    <script>
@@ -23,6 +25,20 @@
                btn.href = '/admin/playlists';
            }
        }).catch(() => {});
+
+        function toggleTheme() {
+            const current = document.documentElement.getAttribute('data-theme') || 'dark';
+            const next = current === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', next);
+            localStorage.setItem('theme', next);
+            document.getElementById('theme-toggle').textContent = next === 'dark' ? '☀️' : '🌙';
+        }
+
+        (function syncToggleIcon() {
+            const t = document.documentElement.getAttribute('data-theme') || 'dark';
+            const btn = document.getElementById('theme-toggle');
+            if (btn) btn.textContent = t === 'dark' ? '☀️' : '🌙';
+        })();
    </script>
    <main>
        {% block content %}{% endblock %}