From fe42de5bfa53874c761ceaf27165c71e18fc011d Mon Sep 17 00:00:00 2001
From: ijuanes <ijuanes@hackercachy>
Date: Wed, 24 Jun 2026 19:50:49 +0100
Subject: [PATCH] Phase 4: Comprehensive dark mode enhancement

- Added dark mode styles for responsive tables (.table-responsive)
- Added dark mode styles for mobile cards (.mobile-card)
- Enhanced form element dark mode (inputs, selects, textareas)
- Added dark mode for buttons (.bg-gray-200)
- Added dark mode for footer
- Added dark mode for breadcrumb navigation
- Added dark mode for prose/markdown preview
- Improved focus states for form elements in dark mode
- Added dark mode for placeholder text
- Comprehensive contrast ratios for accessibility
---
 templates/base.html | 111 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 111 insertions(+)

diff --git a/templates/base.html b/templates/base.html
index 11c5b2c..425ddf7 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -81,6 +81,12 @@
             border-color: #374151;
             color: #e0e0e0;
         }
+        body.dark-mode input:focus,
+        body.dark-mode select:focus,
+        body.dark-mode textarea:focus {
+            border-color: #4d7aff;
+            ring-color: #4d7aff;
+        }
         body.dark-mode .bg-green-100 {
             background-color: #064e3b;
             color: #a7f3d0;
@@ -126,6 +132,111 @@
             color: #e0e0e0;
         }
         
+        /* Dark mode for responsive tables */
+        body.dark-mode .table-responsive {
+            background-color: #16213e;
+        }
+        body.dark-mode .table-responsive thead {
+            background-color: #1f2937;
+        }
+        body.dark-mode .table-responsive th {
+            background-color: #1f2937;
+            color: #d1d5db;
+            border-bottom-color: #374151;
+        }
+        body.dark-mode .table-responsive td {
+            color: #e0e0e0;
+            border-bottom-color: #374151;
+        }
+        body.dark-mode .table-responsive tbody tr:hover {
+            background-color: #1f2937;
+        }
+        
+        /* Dark mode for mobile cards */
+        body.dark-mode .mobile-card {
+            background-color: #16213e;
+            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
+        }
+        body.dark-mode .mobile-card .card-label {
+            color: #9ca3af;
+        }
+        body.dark-mode .mobile-card .card-value {
+            color: #e0e0e0;
+        }
+        body.dark-mode .mobile-card .card-row {
+            border-bottom-color: #374151;
+        }
+        
+        /* Dark mode for form elements */
+        body.dark-mode input[type="text"],
+        body.dark-mode input[type="email"],
+        body.dark-mode input[type="number"],
+        body.dark-mode input[type="date"],
+        body.dark-mode input[type="file"],
+        body.dark-mode select,
+        body.dark-mode textarea {
+            background-color: #1f2937;
+            border-color: #374151;
+            color: #e0e0e0;
+        }
+        body.dark-mode input::placeholder,
+        body.dark-mode textarea::placeholder {
+            color: #6b7280;
+        }
+        
+        /* Dark mode for buttons */
+        body.dark-mode .bg-gray-200 {
+            background-color: #374151;
+            color: #e0e0e0;
+        }
+        body.dark-mode .bg-gray-200:hover {
+            background-color: #4b5563;
+        }
+        body.dark-mode .hover\:bg-gray-300:hover {
+            background-color: #4b5563;
+        }
+        
+        /* Dark mode for footer */
+        body.dark-mode footer {
+            border-color: #374151;
+        }
+        body.dark-mode footer p {
+            color: #9ca3af;
+        }
+        
+        /* Dark mode for breadcrumb */
+        body.dark-mode .text-cobalt-600 {
+            color: #80a0ff;
+        }
+        body.dark-mode .hover\:text-cobalt-800:hover {
+            color: #b3c6ff;
+        }
+        
+        /* Dark mode for prose (markdown preview) */
+        body.dark-mode .prose {
+            color: #e0e0e0;
+        }
+        body.dark-mode .prose h1,
+        body.dark-mode .prose h2,
+        body.dark-mode .prose h3 {
+            color: #ffffff;
+        }
+        body.dark-mode .prose a {
+            color: #80a0ff;
+        }
+        body.dark-mode .prose code {
+            background-color: #374151;
+            color: #e0e0e0;
+        }
+        body.dark-mode .prose pre {
+            background-color: #1f2937;
+            border-color: #374151;
+        }
+        body.dark-mode .prose blockquote {
+            border-color: #374151;
+            color: #b0b0b0;
+        }
+        
         /* Responsive Table Styles */
         .table-container {
             overflow-x: auto;