From b8ecfce5f0a14207eb9dda5845a897c6fcd4cb2b Mon Sep 17 00:00:00 2001
From: ijuanes <ijuanes@hackercachy>
Date: Tue, 23 Jun 2026 20:54:15 +0100
Subject: [PATCH] Add dark mode toggle with persistence and fix visibility
 issues

- Add Font Awesome for moon/sun icons
- Add dark mode CSS styles for body, inputs, tables, flash messages
- Add theme toggle button next to language switcher
- Add localStorage persistence for theme preference
- Fix code/bg-gray-100 visibility in dark mode
- Fix table header text color in dark mode
---
 templates/base.html | 124 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 124 insertions(+)

diff --git a/templates/base.html b/templates/base.html
index 705aa98..b748570 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -11,6 +11,9 @@
     <!-- HTMX -->
     <script src="https://unpkg.com/htmx.org@1.9.10"></script>
     
+    <!-- Font Awesome for icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-1y8c6Y8XkZ7Q1Y+v5vYpX+g5Z4XhY+6eZ6X9p6Z1cM5Xf+Z7x2J6FQ0w9Xc3YfXMgZ6e5Z7+6f5Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    
     <!-- Custom styles -->
     <style>
         body {
@@ -39,6 +42,89 @@
         .htmx-request .htmx-indicator {
             opacity: 1;
         }
+        
+        /* Dark mode styles */
+        body.dark-mode {
+            background-color: #1a1a2e;
+            color: #e0e0e0;
+        }
+        body.dark-mode .bg-gray-50 {
+            background-color: #1a1a2e;
+        }
+        body.dark-mode .bg-white {
+            background-color: #16213e;
+        }
+        body.dark-mode .text-gray-900,
+        body.dark-mode .text-gray-800,
+        body.dark-mode .text-gray-700 {
+            color: #e0e0e0;
+        }
+        body.dark-mode .text-gray-600 {
+            color: #b0b0b0;
+        }
+        body.dark-mode .text-gray-500 {
+            color: #9ca3af;
+        }
+        body.dark-mode th.text-gray-500 {
+            color: #d1d5db;
+        }
+        body.dark-mode .border-gray-200 {
+            border-color: #374151;
+        }
+        body.dark-mode .border-gray-300 {
+            border-color: #4b5563;
+        }
+        body.dark-mode input,
+        body.dark-mode select,
+        body.dark-mode textarea {
+            background-color: #1f2937;
+            border-color: #374151;
+            color: #e0e0e0;
+        }
+        body.dark-mode .bg-green-100 {
+            background-color: #064e3b;
+            color: #a7f3d0;
+        }
+        body.dark-mode .bg-red-100 {
+            background-color: #7f1d1d;
+            color: #fecaca;
+        }
+        body.dark-mode .bg-yellow-100 {
+            background-color: #78350f;
+            color: #fde68a;
+        }
+        body.dark-mode .bg-blue-100 {
+            background-color: #1e3a8a;
+            color: #bfdbfe;
+        }
+        body.dark-mode .bg-cobalt-600 {
+            background-color: #0b1f72;
+        }
+        body.dark-mode .bg-cobalt-700 {
+            background-color: #081552;
+        }
+        body.dark-mode table {
+            background-color: #16213e;
+        }
+        body.dark-mode th {
+            background-color: #1f2937;
+            color: #e0e0e0;
+        }
+        body.dark-mode td {
+            border-color: #374151;
+        }
+        body.dark-mode tr:hover {
+            background-color: #1f2937;
+        }
+        body.dark-mode .shadow-md,
+        body.dark-mode .shadow-lg {
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+        }
+        body.dark-mode code,
+        body.dark-mode .bg-gray-100 {
+            background-color: #374151;
+            color: #e0e0e0;
+        }
     </style>
     
     <!-- Tailwind config for custom corporate colors -->
@@ -129,6 +215,12 @@
                                 {{ lang_name }}
                             </a>
                         {% endfor %}
+                        
+                        <!-- Theme Toggle -->
+                        <a href="#" id="theme-toggle" class="text-white hover:text-cobalt-200 ml-2" title="{{ _('Toggle dark mode') }}">
+                            <span class="icon-moon">🌙</span>
+                            <span class="icon-sun" style="display:none;">☀️</span>
+                        </a>
                     </div>
                 </div>
             </div>
@@ -221,5 +313,37 @@
             </div>
         </footer>
     </div>
+    
+    <!-- Theme Toggle Script -->
+    <script>
+        // Check for saved theme preference or default to light mode
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme === 'dark') {
+            document.body.classList.add('dark-mode');
+            updateToggleIcon(true);
+        } else if (savedTheme !== 'light') {
+            // Invalid value - clear and default to light
+            localStorage.removeItem('theme');
+        }
+        
+        document.getElementById('theme-toggle').addEventListener('click', function(e) {
+            e.preventDefault();
+            const isDark = document.body.classList.toggle('dark-mode');
+            localStorage.setItem('theme', isDark ? 'dark' : 'light');
+            updateToggleIcon(isDark);
+        });
+        
+        function updateToggleIcon(isDark) {
+            const iconMoon = document.querySelector('.icon-moon');
+            const iconSun = document.querySelector('.icon-sun');
+            if (isDark) {
+                iconMoon.style.display = 'none';
+                iconSun.style.display = 'inline';
+            } else {
+                iconMoon.style.display = 'inline';
+                iconSun.style.display = 'none';
+            }
+        }
+    </script>
 </body>
 </html>