/* Dark mode overrides for the SB Admin 2 based theme. Activated when , toggled by js/theme-toggle.js. */ :root[data-theme="dark"] { --dm-bg: #12151c; --dm-surface: #1b1f28; --dm-surface-alt: #232732; --dm-border: #333a48; --dm-text: #dfe3ea; --dm-text-muted: #9aa1ac; --dm-link: #7c9cf0; } [data-theme="dark"] body { background-color: var(--dm-bg); color: var(--dm-text); } [data-theme="dark"] #wrapper #content-wrapper { background-color: var(--dm-bg); } /* ---------- Topbar ---------- */ [data-theme="dark"] .topbar.navbar-light { background-color: var(--dm-surface) !important; border-bottom: 1px solid var(--dm-border); } [data-theme="dark"] .topbar .navbar-search .form-control { background-color: var(--dm-surface-alt) !important; color: var(--dm-text); border-color: var(--dm-border) !important; } [data-theme="dark"] .topbar-divider { border-left: 1px solid var(--dm-border) !important; } /* ---------- Sidebar (already dark by default; just fix the light collapse panels) ---------- */ [data-theme="dark"] .sidebar .collapse-inner, [data-theme="dark"] .sidebar .collapse-inner.bg-white, [data-theme="dark"] .sidebar .bg-white { background-color: var(--dm-surface-alt) !important; } /* SB Admin 2's own rules for these are chained through 5 classes (.sidebar .nav-item .collapse(ing) .collapse-inner .collapse-item/-header) -- matching that exact chain here (instead of a shorter selector) is what makes these overrides actually win instead of losing on specificity. */ [data-theme="dark"] .sidebar .nav-item .collapse .collapse-inner .collapse-header, [data-theme="dark"] .sidebar .nav-item .collapsing .collapse-inner .collapse-header { color: var(--dm-text-muted); } [data-theme="dark"] .sidebar .nav-item .collapse .collapse-inner .collapse-item, [data-theme="dark"] .sidebar .nav-item .collapsing .collapse-inner .collapse-item { color: var(--dm-text); } [data-theme="dark"] .sidebar .nav-item .collapse .collapse-inner .collapse-item:hover, [data-theme="dark"] .sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover { background-color: rgba(255,255,255,0.08); color: #fff; } [data-theme="dark"] .sidebar .nav-item .collapse .collapse-inner .collapse-item:active, [data-theme="dark"] .sidebar .nav-item .collapsing .collapse-inner .collapse-item:active { background-color: rgba(255,255,255,0.12); color: #fff; } [data-theme="dark"] .sidebar .nav-item .collapse .collapse-inner .collapse-item.active, [data-theme="dark"] .sidebar .nav-item .collapsing .collapse-inner .collapse-item.active { color: #90b0ff; } /* ---------- Cards ---------- */ [data-theme="dark"] .card { background-color: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text); } [data-theme="dark"] .card-header, [data-theme="dark"] .card-footer { background-color: var(--dm-surface-alt); border-color: var(--dm-border); color: var(--dm-text); } [data-theme="dark"] .bg-light { background-color: var(--dm-surface-alt) !important; } [data-theme="dark"] .bg-light, [data-theme="dark"] .bg-light * { color: var(--dm-text); } [data-theme="dark"] .shadow, [data-theme="dark"] .shadow-sm { box-shadow: 0 0.15rem 1.75rem 0 rgba(0,0,0,0.35) !important; } /* ---------- Text / heading utility classes SB Admin 2 uses everywhere ---------- */ [data-theme="dark"] .text-gray-800, [data-theme="dark"] .text-dark { color: var(--dm-text) !important; } [data-theme="dark"] .text-gray-600, [data-theme="dark"] .text-gray-400, [data-theme="dark"] .text-muted { color: var(--dm-text-muted) !important; } [data-theme="dark"] a { color: var(--dm-link); } [data-theme="dark"] hr, [data-theme="dark"] .sidebar-divider { border-color: var(--dm-border); } /* ---------- Tables ---------- */ [data-theme="dark"] .table { color: var(--dm-text); } [data-theme="dark"] .table th, [data-theme="dark"] .table td { border-color: var(--dm-border); } [data-theme="dark"] .table thead th { background-color: var(--dm-surface-alt); color: var(--dm-text); border-color: var(--dm-border); } [data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,0.03); } [data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255,255,255,0.06); color: var(--dm-text); } [data-theme="dark"] .table-bordered { border-color: var(--dm-border); } /* ---------- Forms ---------- */ [data-theme="dark"] .form-control, [data-theme="dark"] select.form-control, [data-theme="dark"] textarea { background-color: var(--dm-surface-alt); border-color: var(--dm-border); color: var(--dm-text); } [data-theme="dark"] .form-control:focus { background-color: var(--dm-surface-alt); color: var(--dm-text); } [data-theme="dark"] .form-control::placeholder { color: var(--dm-text-muted); } [data-theme="dark"] .form-control[readonly], [data-theme="dark"] .form-control:disabled { background-color: var(--dm-surface); color: var(--dm-text-muted); } [data-theme="dark"] .input-group-append .btn, [data-theme="dark"] .input-group-text { background-color: var(--dm-surface-alt); border-color: var(--dm-border); color: var(--dm-text); } [data-theme="dark"] .custom-control-label { color: var(--dm-text); } [data-theme="dark"] .custom-control-label::before { background-color: var(--dm-surface-alt); border-color: var(--dm-border); } /* SB Admin 2 hardcodes #858796 (calibrated for a white background) for a disabled checkbox/radio's label -- needs its own dark-mode value, and needs to match the [disabled]/:disabled sibling-combinator specificity to actually win instead of losing to it. */ [data-theme="dark"] .custom-control-input[disabled] ~ .custom-control-label, [data-theme="dark"] .custom-control-input:disabled ~ .custom-control-label { color: var(--dm-text-muted); } /* ---------- Buttons ---------- */ [data-theme="dark"] .btn-outline-secondary { color: var(--dm-text); border-color: var(--dm-border); } [data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--dm-surface-alt); color: #fff; } [data-theme="dark"] .btn-light { background-color: var(--dm-surface-alt); border-color: var(--dm-border); color: var(--dm-text); } /* ---------- Dropdowns / modals / popovers ---------- */ [data-theme="dark"] .dropdown-menu { background-color: var(--dm-surface); border-color: var(--dm-border); } [data-theme="dark"] .dropdown-item { color: var(--dm-text); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: var(--dm-surface-alt); color: #fff; } [data-theme="dark"] .dropdown-divider { border-color: var(--dm-border); } [data-theme="dark"] .modal-content { background-color: var(--dm-surface); color: var(--dm-text); border-color: var(--dm-border); } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--dm-border); } [data-theme="dark"] .close { color: var(--dm-text); text-shadow: none; } /* ---------- Alerts (keep semantic tints, just soften for dark background) ---------- */ [data-theme="dark"] .alert-info { background-color: #16333f; border-color: #1f4a5c; color: #b7e3f2; } [data-theme="dark"] .alert-success { background-color: #16321f; border-color: #205a34; color: #b6e8c4; } [data-theme="dark"] .alert-warning { background-color: #3a2f12; border-color: #5c4a1a; color: #f2dca0; } [data-theme="dark"] .alert-danger { background-color: #3a1418; border-color: #5c2027; color: #f2b4bb; } /* ---------- Pagination ---------- */ [data-theme="dark"] .page-link { background-color: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text); } [data-theme="dark"] .page-item.disabled .page-link { background-color: var(--dm-surface-alt); color: var(--dm-text-muted); } [data-theme="dark"] .page-item.active .page-link { background-color: #4e73df; border-color: #4e73df; color: #fff; } /* ---------- Tabs (Rota Tools etc.) ---------- */ [data-theme="dark"] .nav-tabs { border-color: var(--dm-border); } [data-theme="dark"] .nav-tabs .nav-link { color: var(--dm-text-muted); } [data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--dm-surface); border-color: var(--dm-border) var(--dm-border) var(--dm-surface); color: var(--dm-text); } [data-theme="dark"] .tab-content.border { border-color: var(--dm-border) !important; } /* ---------- Footer / scroll-to-top ---------- */ [data-theme="dark"] .sticky-footer.bg-white { background-color: var(--dm-surface) !important; border-top: 1px solid var(--dm-border); color: var(--dm-text-muted); } [data-theme="dark"] .scroll-to-top { background-color: var(--dm-surface-alt); } /* ---------- Login / auth page ---------- */ [data-theme="dark"] body.bg-gradient-primary { background-color: var(--dm-bg); background-image: none; } body.bg-gradient-primary .theme-toggle-btn { color: #fff; } /* ---------- Theme toggle switch itself ---------- */ .theme-toggle-btn { background: transparent; border: none; color: inherit; font-size: 1rem; line-height: 1; padding: 0.4rem 0.6rem; cursor: pointer; } [data-theme="dark"] .theme-toggle-btn { color: var(--dm-text); }