/** * Admin panel dark-mode overrides, active when . * * Native Bootstrap 5.3 components (.card, .dropdown-menu, .modal, .table, * .form-control, .badge, .btn-outline-*, .pagination, ...) already re-theme * themselves via Bootstrap's own [data-bs-theme=dark] CSS variables and need * no help here. This file only overrides the admin theme's OWN classes that * hardcode light-mode hex colors instead of using those variables: the page * chrome (style.css / semi-dark.css) and the generic ajax-table component * (ajax-table.css). * * Loaded last (after style.css/rtl_style.css and ajax-table.css) so equal- * specificity selectors here win on source order. * * Scope note: this is the Phase B foundation pass (core chrome + the * ajax-table component). select2, nicEdit, the page-builder screens, the * RTL variant, and Chart.js dashboard colors get a dedicated dark pass in * Phase C - they are not covered here. */ /* Core chrome ---------------------------------------------------------- */ html[data-bs-theme="dark"] body, html[data-bs-theme="dark"] .wrapper, html[data-bs-theme="dark"] .page-content { background-color: #15181f; } html[data-bs-theme="dark"] .breadcrumb-title, html[data-bs-theme="dark"] .page-breadcrumb .breadcrumb-item { color: #e5e7eb; } html[data-bs-theme="dark"] .page-breadcrumb .breadcrumb-item.active, html[data-bs-theme="dark"] .page-breadcrumb .breadcrumb-item+.breadcrumb-item::before { color: #9199a8; } /* Topnav - semi-dark.css hardcodes this to white, override back for dark */ html[data-bs-theme="dark"].semi-dark .top-header .navbar { background-color: #1a2232; box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 25%); } html[data-bs-theme="dark"].semi-dark .top-header .navbar .searchbar .form-control { background-color: #232c3d; color: #e5e7eb; border-color: #2c3648; } html[data-bs-theme="dark"].semi-dark .top-header .navbar .searchbar .form-control:focus { background-color: #232c3d; } html[data-bs-theme="dark"].semi-dark .top-header .navbar .search-icon, html[data-bs-theme="dark"].semi-dark .top-header .navbar .search-close-icon, html[data-bs-theme="dark"].semi-dark .mobile-toggle-icon { color: #9199a8; } html[data-bs-theme="dark"] .top-navbar-right .nav-link { color: #cfd3dc; } /* Scrollbar (simplebar sidebar thumb already handled by semi-dark.css) -- */ html[data-bs-theme="dark"] .page-content ::-webkit-scrollbar-thumb { background-color: #3a4152; } /* Card headers: bootstrap-extended.css hard-codes a white background, which left light text on white in dark mode on every plain .card-header. */ html[data-bs-theme="dark"] .card-header { background-color: transparent; border-color: #2a2f3a; } /* Generic AJAX table component ----------------------------------------- */ html[data-bs-theme="dark"] .ajax-table { box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35); } html[data-bs-theme="dark"] .ajax-table .card-header, html[data-bs-theme="dark"] .ajax-table .card-footer { background: #1c2029; border-color: #2a2f3a; } html[data-bs-theme="dark"] .ajax-table-toolbar-label { color: #9199a8; } html[data-bs-theme="dark"] .ajax-table-search .input-group-text { background: #232833; border-color: #2a2f3a; color: #9199a8; } html[data-bs-theme="dark"] .ajax-table-search-input { background: #232833; border-color: #2a2f3a; color: #e5e7eb; } html[data-bs-theme="dark"] .ajax-table-search-input:focus { border-color: #4f5df0; } html[data-bs-theme="dark"] .ajax-table table thead th { background: #1c2029; color: #9199a8; border-bottom-color: #2a2f3a; } html[data-bs-theme="dark"] .ajax-table table tbody td { border-bottom-color: #262b35; color: #d4d7de; } html[data-bs-theme="dark"] .ajax-table table tbody tr:hover { background: #1f2430; } html[data-bs-theme="dark"] .ajax-table-chip { border-color: #333947; color: #cfd3dc; background: #1c2029; } html[data-bs-theme="dark"] .ajax-table-avatar-initial { background: #2b2f5c; color: #a5b0ff; } html[data-bs-theme="dark"] .ajax-table-pagination .page-link { background: #1c2029; color: #cfd3dc; } html[data-bs-theme="dark"] .ajax-table-pagination .page-item.active .page-link { background: #4f5df0; color: #fff; } html[data-bs-theme="dark"] .ajax-table-pagination .page-item.disabled .page-link { color: #565d6b; background: transparent; } html[data-bs-theme="dark"] .ajax-table .badge.bg-success { background-color: rgba(31, 146, 84, 0.22) !important; color: #4fd88a; } html[data-bs-theme="dark"] .ajax-table .badge.bg-warning { background-color: rgba(184, 121, 10, 0.22) !important; color: #ecab4c; }