|
|
@@ -5,6 +5,16 @@
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Calculadora Solar</title>
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
+ <script>
|
|
|
+ // Inicialización del tema
|
|
|
+ const getStoredTheme = () => localStorage.getItem('theme');
|
|
|
+ const getPreferredTheme = () => {
|
|
|
+ const storedTheme = getStoredTheme();
|
|
|
+ if (storedTheme) return storedTheme;
|
|
|
+ return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
|
+ };
|
|
|
+ document.documentElement.setAttribute('data-bs-theme', getPreferredTheme());
|
|
|
+ </script>
|
|
|
</head>
|
|
|
<body>
|
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
|
|
|
@@ -24,6 +34,11 @@
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="{{ url_for('main.configuracion') }}">Configuración</a>
|
|
|
</li>
|
|
|
+ <li class="nav-item">
|
|
|
+ <button class="btn nav-link" id="theme-toggle" title="Cambiar tema">
|
|
|
+ 🌓
|
|
|
+ </button>
|
|
|
+ </li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -32,5 +47,13 @@
|
|
|
{% block content %}{% endblock %}
|
|
|
</div>
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
+ <script>
|
|
|
+ document.getElementById('theme-toggle').addEventListener('click', () => {
|
|
|
+ const currentTheme = document.documentElement.getAttribute('data-bs-theme');
|
|
|
+ const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
|
|
+ document.documentElement.setAttribute('data-bs-theme', newTheme);
|
|
|
+ localStorage.setItem('theme', newTheme);
|
|
|
+ });
|
|
|
+ </script>
|
|
|
</body>
|
|
|
</html>
|
Matthew Trejo