Added a night vision and modified the theme of the application

expenses_manager/expenses/static/expenses/js/theme.js

@@ -0,0 +1,20 @@
+document.addEventListener('DOMContentLoaded', function () {
+    var toggle = document.getElementById('themeToggle');
+
+    if (!toggle) {
+        return;
+    }
+
+    function applyIcon(theme) {
+        toggle.textContent = theme === 'dark' ? '☀️' : '🌙';
+    }
+
+    applyIcon(document.documentElement.getAttribute('data-theme'));
+
+    toggle.addEventListener('click', function () {
+        var next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+        document.documentElement.setAttribute('data-theme', next);
+        localStorage.setItem('theme', next);
+        applyIcon(next);
+    });
+});

expenses_manager/expenses/templates/categories/confirm_delete.html

@@ -32,7 +32,7 @@
     <form method="post">
         {% csrf_token %}
         {{ form.as_p }}
-        <button class="btn danger">Eliminar</button>
+        <button class="btn btn-danger">Eliminar</button>
-        <a class="btn" href="{% url 'category_list' %}">Cancelar</a>
+        <a class="btn btn-secondary" href="{% url 'category_list' %}">Cancelar</a>
     </form>
 {% endblock %}

expenses_manager/expenses/templates/categories/form.html

@@ -10,7 +10,7 @@
     <form method="post">
         {% csrf_token %}
         {{ form.as_p }}
-        <button type="submit">Guardar</button>
+        <button type="submit" class="btn btn-primary">Guardar</button>
-        <a class="btn" href="{% url 'category_list' %}">Cancelar</a>
+        <a class="btn btn-secondary" href="{% url 'category_list' %}">Cancelar</a>
     </form>
 {% endblock %}

expenses_manager/expenses/templates/categories/list.html

@@ -12,7 +12,7 @@
     <form method="post">
         {% csrf_token %}
         {{ form.as_p }}
-        <button type="submit">Crear</button>   
+        <button type="submit" class="btn btn-primary">Crear</button>   
     </form>
 
     <hr>

expenses_manager/expenses/templates/expenses/account_confirm_delete.html

@@ -11,8 +11,8 @@
 
     <form method="post">
         {% csrf_token %}
-        <button class="btn">Sí, eliminar</button>
+        <button class="btn btn-danger">Sí, eliminar</button>
-        <a class="btn secondary" href="{% url 'account_list' %}">Cancelar</a>
+        <a class="btn btn-secondary" href="{% url 'account_list' %}">Cancelar</a>
     </form>
 
 {% endblock %}

expenses_manager/expenses/templates/expenses/account_form.html

@@ -14,8 +14,8 @@
         {% csrf_token %}
         {{ form.as_p }}
 
-        <button type="submit">Guardar</button>
+        <button type="submit" class="btn btn-primary">Guardar</button>
-        <a class="btn secondary" href="{% url 'account_list' %}">Cancelar</a>
+        <a class="btn btn-secondary" href="{% url 'account_list' %}">Cancelar</a>
     </form>
 
 {% endblock %}

expenses_manager/expenses/templates/expenses/base.html

@@ -5,6 +5,15 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>{% block title %}Expenses manager{% endblock %}</title>
+        <script>
+            (function() {
+                var theme = localStorage.getItem('theme');
+                if (!theme) {
+                    theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+                }
+                document.documentElement.setAttribute('data-theme', theme);
+            })();
+        </script>
         <link rel="stylesheet" href="{% static 'expenses/css/base.css' %}">
         <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
         {% block extra_css %}{% endblock %}
@@ -39,6 +48,8 @@
 
                     <span class="spacer"></span>
 
+                    <button type="button" class="theme-toggle" id="themeToggle" aria-label="Cambiar tema" title="Cambiar tema"></button>
+
                     <a href="{% url 'password_change' %}">{{ request.user.username }}</a>
 
                     <form method="post" action="{% url 'logout' %}" class="logout-form">
@@ -65,5 +76,6 @@
 
         {% block extra_js %}{% endblock %}
         <script src="{% static 'expenses/js/nav.js' %}" defer></script>
+        <script src="{% static 'expenses/js/theme.js' %}" defer></script>
     </body>
 </html>

expenses_manager/expenses/templates/expenses/base_auth.html

@@ -5,6 +5,15 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>{% block title %}Login{% endblock %}</title>
+        <script>
+            (function() {
+                var theme = localStorage.getItem('theme');
+                if (!theme) {
+                    theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+                }
+                document.documentElement.setAttribute('data-theme', theme);
+            })();
+        </script>
         <link rel="stylesheet" href="{% static 'expenses/css/base.css' %}">
     </head>
     <body>

expenses_manager/expenses/templates/expenses/dashboard.html

@@ -89,7 +89,7 @@
                 Comparar periodo anterior
             </label>
 
-            <button type="submit">Aplicar Filtros</button>
+            <button type="submit" class="btn btn-primary">Aplicar Filtros</button>
         </form>
     </section>
     <script>
@@ -152,10 +152,10 @@
         </div>
         
         {% if selected_month == today.month and selected_year == today.year %}
-            <div class="kpi-card" style="border-left: 4px solid #ff9f43;">
+            <div class="kpi-card" style="border-left: 4px solid var(--color-warning-accent);">
                 <span class="kpi-label">Proyección fin de mes</span>
                 <span class="kpi-value">{{ projected_end_of_month|floatformat:2 }}€</span>
-                <small style="color: gray; display:block;">Basado en tu ritmo de gasto actual</small>
+                <small style="color: var(--color-text-muted); display:block;">Basado en tu ritmo de gasto actual</small>
             </div>
         {% endif %}
     </section>
@@ -167,10 +167,10 @@
                 Gastos periodo actual: <strong>{{ kpi_total|floatformat:2 }} €</strong><br>
                 Gastos periodo anterior: <strong>{{ kpi_previous_total|floatformat:2 }} €</strong><br>
                 Diferencia:
-                <strong style="color: {% if kpi_trend == 'up' %}#d9534f{% else %}#5cb85c{% endif %};">
+                <strong style="color: {% if kpi_trend == 'up' %}var(--color-danger-accent){% else %}var(--color-success-accent){% endif %};">
                     {% if kpi_trend == "up" %}+{% endif %}{{ kpi_difference|floatformat:2 }}€ ({{ kpi_percentage|floatformat:1 }}%)
                 </strong>
-                <small style="display:block; color:gray;">
+                <small style="display:block; color: var(--color-text-muted);">
                     {% if kpi_trend == "up" %}⚠️ Has gastado más que el periodo pasado. {% else %} ¡Bien! Has reducido tus gastos. {% endif %}
                 </small>
             </p>
@@ -192,7 +192,7 @@
                             <td>{{ cat.category }}</td>
                             <td>{{ cat.previous|floatformat:2 }}€</td>
                             <td>{{ cat.current|floatformat:2 }}€</td>
-                            <td style="font-weight: bold; color: {% if cat.difference > 0 %}#d9534f{% else %}#5cb85c{% endif %};">
+                            <td style="font-weight: bold; color: {% if cat.difference > 0 %}var(--color-danger-accent){% else %}var(--color-success-accent){% endif %};">
                                 {% if cat.difference > 0 %}+{% endif %}{{ cat.difference|floatformat:2 }}€
                             </td>
                         </tr>
@@ -242,7 +242,7 @@
                             <td>{{ exp.account.name }}</td>
                             <td>{{ exp.category.name }}</td>
                             <td>{{ exp.description|default:"-" }}</td>
-                            <td style="color: #d9534f; font-weight: bold;">{{ exp.amount|floatformat:2 }}</td>
+                            <td style="color: var(--color-danger-accent); font-weight: bold;">{{ exp.amount|floatformat:2 }}</td>
                         </tr>
                     {% empty %}
                         <tr><td colspan="7">No hay gastos recientes registrados</td></tr>

expenses_manager/expenses/templates/expenses/expense_confirm_delete.html

@@ -14,8 +14,8 @@
 
     <form method="post">
         {% csrf_token %}
-        <button class="btn">Sí, eliminar</button>
+        <button class="btn btn-danger">Sí, eliminar</button>
-        <a class="btn secondary" href="{% url 'expense_list' %}">Cancelar</a>
+        <a class="btn btn-secondary" href="{% url 'expense_list' %}">Cancelar</a>
     </form>
 
 {% endblock %}

expenses_manager/expenses/templates/expenses/expense_form.html

@@ -46,7 +46,7 @@
             {% endif %}
         {% endfor %}
 
-        <button type="submit">
+        <button type="submit" class="btn btn-primary">
             {% if form.instance.pk %}
                 Guardar gasto
             {% else %}
@@ -55,5 +55,5 @@
         </button>
     </form>
 
-    <a href="{% url 'expense_list' %}">Volver</a>
+    <a class="btn btn-secondary" href="{% url 'expense_list' %}">Volver</a>
 {% endblock %}

expenses_manager/expenses/templates/expenses/expense_list.html

@@ -44,8 +44,8 @@
                 {% endfor %}
             </select>
 
-            <button type="submit">Filtrar</button>
+            <button type="submit" class="btn btn-primary">Filtrar</button>
-            <a href="{% url 'expense_list' %}" class="btn-secondary">Limpiar</a>
+            <a href="{% url 'expense_list' %}" class="btn btn-secondary">Limpiar</a>
         </div>
 
         <br>

expenses_manager/expenses/templates/expenses/income_confirm_delete.html

@@ -13,8 +13,8 @@
 
     <form method="post">
         {% csrf_token %}
-        <button class="btn">Sí, eliminar</button>
+        <button class="btn btn-danger">Sí, eliminar</button>
-        <a class="btn secondary" href="{% url 'income_list' %}">Cancelar</a>
+        <a class="btn btn-secondary" href="{% url 'income_list' %}">Cancelar</a>
     </form>
 
 {% endblock %}

expenses_manager/expenses/templates/expenses/income_form.html

@@ -19,7 +19,7 @@
     <form method="post">
         {% csrf_token %}
         {{ form.as_p }}
-        <button type="submit">
+        <button type="submit" class="btn btn-primary">
             {% if form.instance.pk %}
                 Guardar ingreso
             {% else %}
@@ -28,5 +28,5 @@
         </button>            
     </form>
 
-    <a class="btn secondary" href="{% url 'income_list' %}">Volver</a>
+    <a class="btn btn-secondary" href="{% url 'income_list' %}">Volver</a>
 {% endblock %}

expenses_manager/expenses/templates/expenses/tag_confirm_delete.html

@@ -10,8 +10,8 @@
 
     <form method="post">
         {% csrf_token %}
-        <button class="btn">Eliminar</button>
+        <button class="btn btn-danger">Eliminar</button>
-        <a class="btn secondary" href="{% url 'tag_list' %}">Cancelar</a>
+        <a class="btn btn-secondary" href="{% url 'tag_list' %}">Cancelar</a>
     </form>
 
 {% endblock %}

expenses_manager/expenses/templates/expenses/tag_form.html

@@ -6,8 +6,8 @@
     <form method="post">
         {% csrf_token %}
         {{ form.as_p }}
-        <button type="submit">Guardar</button>
+        <button type="submit" class="btn btn-primary">Guardar</button>
     </form>
 
-    <a class="btn secondary" href="{% url 'tag_list' %}">Volver</a>
+    <a class="btn btn-secondary" href="{% url 'tag_list' %}">Volver</a>
 {% endblock %}

expenses_manager/expenses/templates/fuel/confirm_delete.html

@@ -20,7 +20,7 @@
     <form method="post">
         {% csrf_token %}
         {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
-        <button class="btn danger">Eliminar</button>
+        <button class="btn btn-danger">Eliminar</button>
-        <a class="btn" href="{% url 'fuel_list' %}">Cancelar</a>
+        <a class="btn btn-secondary" href="{% url 'fuel_list' %}">Cancelar</a>
     </form>
 {% endblock %}

expenses_manager/expenses/templates/fuel/create.html

@@ -21,7 +21,7 @@
         {% csrf_token %}
         {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
         {{ form.as_p }}
-        <button type="submit">
+        <button type="submit" class="btn btn-primary">
             {% if editing %}
                 Guardar repostaje
             {% else %}
@@ -31,10 +31,10 @@
     </form>
     
     {% if next %}
-        <a class="btn" href="{{ next }}">Volver</a>
+        <a class="btn btn-secondary" href="{{ next }}">Volver</a>
     {% elif editing %}
-        <a class="btn" href="{% url 'expense_list' %}">Volver</a>
+        <a class="btn btn-secondary" href="{% url 'expense_list' %}">Volver</a>
     {% else %}
-        <a class="btn" href="{% url 'fuel_list' %}">Volver</a>
+        <a class="btn btn-secondary" href="{% url 'fuel_list' %}">Volver</a>
     {% endif %}
 {% endblock %}

expenses_manager/expenses/templates/goals/confirm_delete.html

@@ -11,8 +11,8 @@
 
 <form method="post">
     {% csrf_token %}
-    <button class="btn">Eliminar</button>
+    <button class="btn btn-danger">Eliminar</button>
-    <a class="btn secondary" href="{% url 'goal_list' %}">Cancelar</a>
+    <a class="btn btn-secondary" href="{% url 'goal_list' %}">Cancelar</a>
 </form>
 
 {% endblock %}

expenses_manager/expenses/templates/goals/form.html

@@ -11,10 +11,10 @@
     <form method="post">
         {% csrf_token %}
         {{ form.as_p }}
-        <button type="submit">
+        <button type="submit" class="btn btn-primary">
             Guardar
         </button>
     </form>
 
-    <a class="btn secondary" href="{% url 'goal_list' %}">Volver</a>
+    <a class="btn btn-secondary" href="{% url 'goal_list' %}">Volver</a>
 {% endblock %}

expenses_manager/expenses/templates/goals/list.html

@@ -9,7 +9,7 @@
 {% block content %}
 <h2>Objetivos</h2>
 
-<a class=btn href="{% url 'goal_create' %}">➕ Nuevo objetivo</a>
+<a class="btn btn-primary" href="{% url 'goal_create' %}">➕ Nuevo objetivo</a>
 
 <div class="table-wrap">
 <table>

expenses_manager/expenses/templates/registration/login.html

@@ -7,7 +7,7 @@
 <form method="post">
     {% csrf_token %}
     {{ form.as_p }}
-    <button type="submit">Entrar</button>
+    <button type="submit" class="btn btn-primary">Entrar</button>
 </form>
 
 <p class="auth-help">

expenses_manager/expenses/templates/registration/password_change_form.html

@@ -5,6 +5,6 @@
     <form method="post">
         {% csrf_token %}
         {{ form.as_p }}
-        <button type="submit">Cambiar</button>
+        <button type="submit" class="btn btn-primary">Cambiar</button>
     </form>
 {% endblock %}