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;