ijuanes/GestionTablets
ijuanes/GestionTablets
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Phase 4: Comprehensive dark mode enhancement

Browse source 
- 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
This commit is contained in:
ijuanes 2026-06-24 19:50:49 +01:00
parent c7ad302334
commit fe42de5bfa
1 changed files with 111 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

111
templates/base.html
View file

@ -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;