/** * Dark Mode CSS Overrides * Scoped under [data-theme="dark"] on * * Color Palette (Tailwind gray / Filament-inspired): * Page bg: #111827 (gray-900) * Card bg: #1f2937 (gray-800) * Surface: #374151 (gray-700) * Input border: #4b5563 (gray-600) * Muted text: #9ca3af (gray-400) * Secondary: #d1d5db (gray-300) * Primary text: #e5e7eb (gray-200) * Headings: #f9fafb (gray-50) * Accent slate: #94a3b8 (slate-400) — muted gray-blue * Brand teal: #14b8a6 (teal-400, dark mode) / #0d9488 (teal-600, light mode) * * 6 Mar 2026 Brian Sim */ /* ================================================================ 0. TRANSITIONS — only after page load to prevent FOUC animation ================================================================ */ .theme-transitions-enabled, .theme-transitions-enabled *, .theme-transitions-enabled *::before, .theme-transitions-enabled *::after { transition: background-color 0.3s ease, border-color 0.3s ease !important; } /* Exclude elements that shouldn't transition */ .theme-transitions-enabled .pace *, .theme-transitions-enabled .pace *::before, .theme-transitions-enabled .pace *::after { transition: none !important; } /* ================================================================ 1. CORE PAGE SHELL ================================================================ */ [data-theme="dark"] body { background-color: #111827; color: #f3f4f6; } [data-theme="dark"] #page-wrapper, [data-theme="dark"] .bg-fff { background-color: #111827 !important; } [data-theme="dark"] .white-bg { background-color: #1f2937 !important; } [data-theme="dark"] .gray-bg { background-color: #1f2937 !important; } [data-theme="dark"] .wrapper-content { background-color: #111827; } /* ================================================================ 2. TOP NAVIGATION BAR ================================================================ */ [data-theme="dark"] .row.border-bottom.white-bg { background-color: #1f2937 !important; border-bottom-color: #374151 !important; } [data-theme="dark"] .navbar-static-top, [data-theme="dark"] .navbar-fixed-top { background-color: #1f2937 !important; border-color: #374151 !important; } /* Brand (slightly brighter green for dark bg) */ [data-theme="dark"] .top-navigation .navbar-brand { background: #14b8a6; } /* Nav links */ [data-theme="dark"] .top-navigation .nav > li > a { color: #e5e7eb; } [data-theme="dark"] .top-navigation .nav > li > a:hover, [data-theme="dark"] .top-navigation .nav > li > a:focus { background: #374151; color: #94a3b8; } [data-theme="dark"] .top-navigation .nav > li.active { background: #374151; } [data-theme="dark"] .top-navigation .nav > li.active > a { color: #94a3b8; } /* Right navbar links */ [data-theme="dark"] .nav.navbar-top-links a { color: #e5e7eb; } [data-theme="dark"] .nav.navbar-top-links a:hover { color: #94a3b8; } /* Navbar toggle (mobile) */ [data-theme="dark"] .navbar-toggle { background-color: #14b8a6; border-color: #14b8a6; } /* Dropdown menus */ [data-theme="dark"] .dropdown-menu { background-color: #1f2937; border-color: #374151; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .dropdown-menu > li > a { color: #e5e7eb; } [data-theme="dark"] .dropdown-menu > li > a:hover, [data-theme="dark"] .dropdown-menu > li > a:focus { background-color: #374151; color: #f9fafb; } [data-theme="dark"] .dropdown-menu > .active > a, [data-theme="dark"] .dropdown-menu > .active > a:hover, [data-theme="dark"] .dropdown-menu > .active > a:focus { background-color: #94a3b8; color: #111827; } [data-theme="dark"] .dropdown-menu .divider { background-color: #374151; } /* ================================================================ 3. IBOX COMPONENTS (Cards) ================================================================ */ [data-theme="dark"] .ibox-title { background-color: #1f2937; border-color: #14b8a6; color: #f9fafb; } [data-theme="dark"] .ibox-title h5, [data-theme="dark"] .ibox-title h3, [data-theme="dark"] .ibox-title h2 { color: #f9fafb; } [data-theme="dark"] .ibox-title .ibox-tools a { color: #9ca3af; } [data-theme="dark"] .ibox-title .ibox-tools a:hover { color: #e5e7eb; } [data-theme="dark"] .ibox-content { background-color: #1f2937; border-color: #374151; color: #f3f4f6; } [data-theme="dark"] .ibox-footer { background-color: #1f2937; border-top-color: #374151; color: #e5e7eb; } [data-theme="dark"] .ibox-heading { background-color: #374151; border-bottom-color: #4b5563; } [data-theme="dark"] .ibox { border-color: #374151; } /* ================================================================ 4. FOOTER ================================================================ */ [data-theme="dark"] .footer { background: #1f2937; border-top-color: #374151; color: #9ca3af; } /* ================================================================ 5. FORMS & INPUTS ================================================================ */ [data-theme="dark"] .form-control { background-color: #374151; border-color: #4b5563; color: #f9fafb; } [data-theme="dark"] .form-control:focus { border-color: #94a3b8; background-color: #374151; box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.25); } [data-theme="dark"] .form-control[disabled], [data-theme="dark"] .form-control[readonly], [data-theme="dark"] fieldset[disabled] .form-control { background-color: #1f2937; color: #9ca3af; } [data-theme="dark"] .form-control::placeholder { color: #9ca3af; } [data-theme="dark"] .input-group-addon { background-color: #374151; border-color: #4b5563; color: #d1d5db; } [data-theme="dark"] .help-block { color: #9ca3af; } [data-theme="dark"] label { color: #e5e7eb; } [data-theme="dark"] .control-label { color: #e5e7eb; } /* Validation states */ [data-theme="dark"] .has-error .form-control { border-color: #f87171; } [data-theme="dark"] .has-error .control-label, [data-theme="dark"] .has-error .help-block { color: #f87171; } [data-theme="dark"] .has-warning .form-control { border-color: #fbbf24; } [data-theme="dark"] .has-success .form-control { border-color: #4ade80; } /* ================================================================ 6. TABLES ================================================================ */ [data-theme="dark"] .table > thead > tr > th { border-bottom-color: #4b5563; color: #e5e7eb; background-color: #374151; } [data-theme="dark"] .table > thead > tr > th, [data-theme="dark"] .table > tbody > tr > th, [data-theme="dark"] .table > tfoot > tr > th, [data-theme="dark"] .table > thead > tr > td, [data-theme="dark"] .table > tbody > tr > td, [data-theme="dark"] .table > tfoot > tr > td { border-top-color: #374151; color: #f3f4f6; } [data-theme="dark"] .table-bordered { border-color: #374151; } [data-theme="dark"] .table-bordered > thead > tr > th, [data-theme="dark"] .table-bordered > thead > tr > td, [data-theme="dark"] .table-bordered > tbody > tr > th, [data-theme="dark"] .table-bordered > tbody > tr > td, [data-theme="dark"] .table-bordered > tfoot > tr > th, [data-theme="dark"] .table-bordered > tfoot > tr > td { border-color: #374151; } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: #1a2332; } [data-theme="dark"] .table-hover > tbody > tr:hover { background-color: #374151; } /* ================================================================ 7. BUTTONS ================================================================ */ [data-theme="dark"] .btn-default { background-color: #374151; border-color: #4b5563; color: #e5e7eb; } [data-theme="dark"] .btn-default:hover, [data-theme="dark"] .btn-default:focus, [data-theme="dark"] .btn-default:active { background-color: #4b5563; border-color: #6b7280; color: #f9fafb; } [data-theme="dark"] .btn-white { background-color: #1f2937; border-color: #4b5563; color: #e5e7eb; } [data-theme="dark"] .btn-white:hover, [data-theme="dark"] .btn-white:focus, [data-theme="dark"] .btn-white:active { background-color: #374151; border-color: #6b7280; color: #f9fafb; } /* Brighten colored buttons for dark bg */ [data-theme="dark"] .btn-primary { background-color: #94a3b8; border-color: #94a3b8; color: #0f172a; } [data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .btn-primary:focus { background-color: #cbd5e1; border-color: #cbd5e1; color: #0f172a; } [data-theme="dark"] .btn-success { background-color: #14b8a6; border-color: #14b8a6; color: #f9fafb; } [data-theme="dark"] .btn-success:hover, [data-theme="dark"] .btn-success:focus { background-color: #2dd4bf; border-color: #2dd4bf; color: #0f172a; } [data-theme="dark"] .btn-danger { background-color: #dc2626; border-color: #dc2626; color: #f9fafb; } [data-theme="dark"] .btn-danger:hover, [data-theme="dark"] .btn-danger:focus { background-color: #ef4444; border-color: #ef4444; color: #f9fafb; } [data-theme="dark"] .btn-warning { background-color: #d97706; border-color: #d97706; color: #f9fafb; } [data-theme="dark"] .btn-warning:hover, [data-theme="dark"] .btn-warning:focus { background-color: #f59e0b; border-color: #f59e0b; color: #0f172a; } [data-theme="dark"] .btn-info { background-color: #0891b2; border-color: #0891b2; color: #f9fafb; } [data-theme="dark"] .btn-info:hover, [data-theme="dark"] .btn-info:focus { background-color: #06b6d4; border-color: #06b6d4; color: #0f172a; } [data-theme="dark"] .btn-outline { color: #d1d5db; } /* Disabled */ [data-theme="dark"] .btn[disabled], [data-theme="dark"] .btn.disabled { background-color: #374151; border-color: #4b5563; color: #6b7280; } /* ================================================================ 8. TEXT & LINKS ================================================================ */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #f9fafb; } [data-theme="dark"] .text-muted { color: #d1d5db !important; } [data-theme="dark"] .text-dark { color: #f3f4f6 !important; } [data-theme="dark"] .text-navy { color: #94a3b8 !important; } [data-theme="dark"] .text-success { color: #4ade80 !important; } [data-theme="dark"] .text-info { color: #67e8f9 !important; } [data-theme="dark"] .text-warning { color: #fbbf24 !important; } [data-theme="dark"] .text-danger { color: #f87171 !important; } [data-theme="dark"] a { color: #94a3b8; } [data-theme="dark"] a:hover, [data-theme="dark"] a:focus { color: #cbd5e1; } [data-theme="dark"] .breadcrumb { background-color: transparent; } [data-theme="dark"] .breadcrumb > li + li::before { color: #6b7280; } /* ================================================================ 9. TABS ================================================================ */ [data-theme="dark"] .tabs-container .panel-body { background: #1f2937; border-color: #374151; } [data-theme="dark"] .tabs-container .nav-tabs { border-bottom-color: #374151; } [data-theme="dark"] .nav-tabs > li > a { color: #9ca3af; } [data-theme="dark"] .nav-tabs > li > a:hover, [data-theme="dark"] .nav-tabs > li > a:focus { background-color: #374151; border-color: #374151; color: #e5e7eb; } [data-theme="dark"] .tabs-container .nav-tabs > li.active > a, [data-theme="dark"] .tabs-container .nav-tabs > li.active > a:hover, [data-theme="dark"] .tabs-container .nav-tabs > li.active > a:focus { border-color: #374151; border-bottom-color: transparent; background-color: #1f2937; color: #f9fafb; } /* ================================================================ 10. UTILITIES — Panels, Wells, Modals, Pagination, etc. ================================================================ */ /* Panels */ [data-theme="dark"] .panel { background-color: #1f2937; border-color: #374151; } [data-theme="dark"] .panel-default > .panel-heading { background-color: #374151; border-color: #4b5563; color: #e5e7eb; } [data-theme="dark"] .panel-body { background-color: #1f2937; color: #e5e7eb; } /* Wells */ [data-theme="dark"] .well { background-color: #374151; border-color: #4b5563; color: #e5e7eb; } /* Modals */ [data-theme="dark"] .modal-content { background-color: #1f2937; border-color: #374151; color: #e5e7eb; } [data-theme="dark"] .modal-header { border-bottom-color: #374151; } [data-theme="dark"] .modal-header h4, [data-theme="dark"] .modal-header h3, [data-theme="dark"] .modal-title { color: #f9fafb; } [data-theme="dark"] .modal-header .close { color: #9ca3af; text-shadow: none; opacity: 0.8; } [data-theme="dark"] .modal-header .close:hover { color: #e5e7eb; } [data-theme="dark"] .modal-footer { border-top-color: #374151; } /* Pagination */ [data-theme="dark"] .pagination > li > a, [data-theme="dark"] .pagination > li > span { background-color: #1f2937; border-color: #374151; color: #d1d5db; } [data-theme="dark"] .pagination > li > a:hover { background-color: #374151; border-color: #4b5563; color: #f9fafb; } [data-theme="dark"] .pagination > .active > a, [data-theme="dark"] .pagination > .active > a:hover, [data-theme="dark"] .pagination > .active > span { background-color: #94a3b8; border-color: #94a3b8; color: #111827; } [data-theme="dark"] .pagination > .disabled > a, [data-theme="dark"] .pagination > .disabled > span { background-color: #1f2937; border-color: #374151; color: #4b5563; } /* List group */ [data-theme="dark"] .list-group-item { background-color: #1f2937; border-color: #374151; color: #e5e7eb; } [data-theme="dark"] .list-group-item a { color: #e5e7eb; } [data-theme="dark"] .list-group-item a:hover, [data-theme="dark"] .list-group-item a:focus { color: #f9fafb; } /* Active/selected item — very bright green */ [data-theme="dark"] .list-group-item a.text-success { color: #86efac !important; } [data-theme="dark"] a.list-group-item:hover, [data-theme="dark"] a.list-group-item:focus { background-color: #374151; color: #f9fafb; } /* Badges */ [data-theme="dark"] .badge { background-color: #4b5563; color: #e5e7eb; } [data-theme="dark"] .badge-info { background-color: #0e7490; color: #e5e7eb; } [data-theme="dark"] .badge-warning { background-color: #92400e; color: #fbbf24; } [data-theme="dark"] .badge-default { background-color: #4b5563; color: #d1d5db; } [data-theme="dark"] .badge-primary { background-color: #64748b; color: #e5e7eb; } [data-theme="dark"] .badge-success { background-color: #166534; color: #86efac; } [data-theme="dark"] .badge-danger { background-color: #991b1b; color: #fca5a5; } /* Alerts */ [data-theme="dark"] .alert-warning { background-color: #422006; border-color: #92400e; color: #fbbf24; } [data-theme="dark"] .alert-danger { background-color: #450a0a; border-color: #991b1b; color: #f87171; } [data-theme="dark"] .alert-success { background-color: #052e16; border-color: #166534; color: #4ade80; } [data-theme="dark"] .alert-info { background-color: #0c4a6e; border-color: #075985; color: #67e8f9; } /* Borders utility */ [data-theme="dark"] .border-bottom { border-bottom-color: #374151 !important; } /* HR */ [data-theme="dark"] hr { border-top-color: #374151; } /* Vertical timeline */ [data-theme="dark"] .vertical-timeline-content { background: #1f2937; border-color: #94a3b8; } /* Scrollbar */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #1f2937; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #6b7280; } /* ================================================================ 11. PLUGIN: SweetAlert ================================================================ */ [data-theme="dark"] .sweet-alert { background-color: #1f2937; border: 1px solid #374151; } [data-theme="dark"] .sweet-alert h2 { color: #f9fafb; } [data-theme="dark"] .sweet-alert p { color: #d1d5db; } [data-theme="dark"] .sweet-alert button.cancel { background-color: #374151 !important; color: #e5e7eb !important; } /* ================================================================ 12. PLUGIN: DataTables ================================================================ */ [data-theme="dark"] div.dataTables_wrapper div.dataTables_filter input, [data-theme="dark"] div.dataTables_wrapper div.dataTables_length select { background-color: #374151; border-color: #4b5563; color: #e5e7eb; } [data-theme="dark"] div.dataTables_wrapper div.dataTables_info { color: #9ca3af; } [data-theme="dark"] div.dataTables_wrapper div.dataTables_filter label, [data-theme="dark"] div.dataTables_wrapper div.dataTables_length label { color: #d1d5db; } [data-theme="dark"] table.dataTable thead .sorting:after, [data-theme="dark"] table.dataTable thead .sorting_asc:after, [data-theme="dark"] table.dataTable thead .sorting_desc:after { color: #9ca3af; } /* ================================================================ 13. PLUGIN: Datepicker ================================================================ */ [data-theme="dark"] .datepicker { background-color: #1f2937; color: #e5e7eb; } [data-theme="dark"] .datepicker table tr td, [data-theme="dark"] .datepicker table tr th { color: #d1d5db; } [data-theme="dark"] .datepicker table tr td.active, [data-theme="dark"] .datepicker table tr td.active:hover { background-color: #94a3b8 !important; color: #111827 !important; } [data-theme="dark"] .datepicker table tr td.today { background-color: #374151; color: #fbbf24; } [data-theme="dark"] .datepicker table tr td:hover { background-color: #374151; } [data-theme="dark"] .datepicker-dropdown::after { border-bottom-color: #1f2937; } [data-theme="dark"] .datepicker-dropdown::before { border-bottom-color: #374151; } /* ================================================================ 14. PLUGIN: Chosen (bootstrap-chosen) ================================================================ */ [data-theme="dark"] .chosen-container .chosen-drop { background: #1f2937; border-color: #4b5563; } [data-theme="dark"] .chosen-container .chosen-results { color: #e5e7eb; } [data-theme="dark"] .chosen-container .chosen-results li.highlighted { background-color: #94a3b8; color: #111827; } [data-theme="dark"] .chosen-container-single .chosen-single { background-color: #374151; border-color: #4b5563; color: #e5e7eb; box-shadow: none; } [data-theme="dark"] .chosen-container-single .chosen-search input[type="text"] { background-color: #374151; border-color: #4b5563; color: #e5e7eb; } [data-theme="dark"] .chosen-container-multi .chosen-choices { background-color: #374151; border-color: #4b5563; } [data-theme="dark"] .chosen-container-multi .chosen-choices li.search-choice { background-color: #4b5563; border-color: #6b7280; color: #e5e7eb; box-shadow: none; } /* ================================================================ 15. PLUGIN: Dropzone ================================================================ */ [data-theme="dark"] .dropzone { background-color: #1f2937; border-color: #4b5563; color: #d1d5db; } [data-theme="dark"] .dropzone .dz-message { color: #9ca3af; } /* ================================================================ 16. PLUGIN: FooTable ================================================================ */ [data-theme="dark"] .footable > thead > tr > th { background-color: #374151; color: #d1d5db; } [data-theme="dark"] .footable-filtering-search input { background-color: #374151; border-color: #4b5563; color: #e5e7eb; } /* ================================================================ 17. PLUGIN: Wizard Steps ================================================================ */ [data-theme="dark"] .wizard > .content { background: #1f2937; border-color: #374151; } [data-theme="dark"] .wizard > .steps .disabled a, [data-theme="dark"] .wizard > .steps .disabled a:hover { background: #374151; color: #9ca3af; } /* ================================================================ 18. LOGIN / AUTH PAGES ================================================================ */ [data-theme="dark"] .loginscreen, [data-theme="dark"] .middle-box { color: #f3f4f6; } [data-theme="dark"] .gh-logo-name { color: #ffffff !important; } [data-theme="dark"] .middle-box h2, [data-theme="dark"] .middle-box h3, [data-theme="dark"] .middle-box h4 { color: #f9fafb; } [data-theme="dark"] .middle-box .ibox-title { background-color: #1f2937; border-color: #14b8a6; } [data-theme="dark"] .middle-box .ibox-content { background-color: #1f2937; border-color: #374151; } [data-theme="dark"] .alert-sign-in { background-color: #450a0a; border-color: #991b1b; color: #f87171; } /* ================================================================ 19. PRINT — do not apply dark mode ================================================================ */ @media print { [data-theme="dark"] body, [data-theme="dark"] .ibox-content, [data-theme="dark"] .ibox-title, [data-theme="dark"] .table > thead > tr > th, [data-theme="dark"] .table > tbody > tr > td { background-color: #fff !important; color: #333 !important; border-color: #ddd !important; } }