/* ========================================================================== Shafiean — Dark mode Activated when `dark-mode` class is on or . Default (no class) = light mode = original SB-Admin-2 look. ========================================================================== */ :root { --dm-bg-base: #1a1d21; --dm-bg-surface: #25282d; --dm-bg-elevated: #2e3238; --dm-bg-hover: #34383f; --dm-text-primary: #e4e6eb; --dm-text-secondary: #b0b3b8; --dm-text-muted: #8a8d91; --dm-border: #3a3d42; --dm-border-strong: #4a4d52; --dm-link: #6ea8fe; --dm-shadow: 0 .15rem 1.75rem 0 rgba(0, 0, 0, .45); } /* -------------------------------------------------------------------------- Floating toggle button (always visible) -------------------------------------------------------------------------- */ #darkModeToggle { position: fixed; bottom: 1.25rem; left: 1.25rem; z-index: 1080; width: 3rem; height: 3rem; border-radius: 50%; border: 0; background: #fff; color: #1a1d21; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .15s ease; } #darkModeToggle:hover { transform: scale(1.06); } #darkModeToggle:focus { outline: 2px solid #4e73df; outline-offset: 2px; } .dark-mode #darkModeToggle { background: var(--dm-bg-elevated); color: #ffd86b; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .55); } /* -------------------------------------------------------------------------- Page surfaces -------------------------------------------------------------------------- */ html.dark-mode, body.dark-mode { background-color: var(--dm-bg-base) !important; color: var(--dm-text-primary); } .dark-mode #content-wrapper, .dark-mode #content { background-color: var(--dm-bg-base) !important; } .dark-mode .bg-white { background-color: var(--dm-bg-surface) !important; } .dark-mode .bg-light { background-color: var(--dm-bg-elevated) !important; } /* Login page wrapper */ .dark-mode .sections-bg { background-color: var(--dm-bg-base) !important; } /* -------------------------------------------------------------------------- Text colors -------------------------------------------------------------------------- */ .dark-mode, .dark-mode p, .dark-mode span, .dark-mode div, .dark-mode label, .dark-mode li, .dark-mode td, .dark-mode th, .dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6 { color: var(--dm-text-primary); } .dark-mode .text-gray-900 { color: var(--dm-text-primary) !important; } .dark-mode .text-gray-800 { color: var(--dm-text-primary) !important; } .dark-mode .text-gray-700 { color: var(--dm-text-secondary) !important; } .dark-mode .text-gray-600 { color: var(--dm-text-secondary) !important; } .dark-mode .text-gray-500 { color: var(--dm-text-muted) !important; } .dark-mode .text-gray-400 { color: var(--dm-text-muted) !important; } .dark-mode .text-gray-300 { color: var(--dm-border-strong) !important; } .dark-mode .text-dark { color: var(--dm-text-primary) !important; } .dark-mode .text-muted { color: var(--dm-text-muted) !important; } .dark-mode .text-black-50 { color: var(--dm-text-secondary) !important; } .dark-mode a { color: var(--dm-link); } .dark-mode a:hover { color: #9ec5fe; } /* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ .dark-mode .card { background-color: var(--dm-bg-surface) !important; border-color: var(--dm-border); box-shadow: var(--dm-shadow); } .dark-mode .card-header { background-color: var(--dm-bg-elevated) !important; border-bottom-color: var(--dm-border); color: var(--dm-text-primary); } .dark-mode .card-footer { background-color: var(--dm-bg-elevated) !important; border-top-color: var(--dm-border); } .dark-mode .card-body { color: var(--dm-text-primary); } /* Border-left utility cards (SB-Admin-2 stat cards) — keep accent color */ .dark-mode .border-left-primary, .dark-mode .border-left-success, .dark-mode .border-left-info, .dark-mode .border-left-warning, .dark-mode .border-left-danger { background-color: var(--dm-bg-surface) !important; } /* -------------------------------------------------------------------------- Topbar (post-login) -------------------------------------------------------------------------- */ .dark-mode .topbar { background-color: var(--dm-bg-surface) !important; border-bottom: 1px solid var(--dm-border); } .dark-mode .topbar.navbar-light .navbar-nav .nav-link, .dark-mode .topbar .nav-link { color: var(--dm-text-secondary); } .dark-mode .topbar .nav-link:hover { color: var(--dm-text-primary); } .dark-mode .topbar-divider { border-right: 1px solid var(--dm-border); } .dark-mode .topbar #sidebarToggleTop:hover { background-color: var(--dm-bg-hover); } /* -------------------------------------------------------------------------- Sidebar — flatten colored gradients to a dark surface in dark mode -------------------------------------------------------------------------- */ .dark-mode .sidebar, .dark-mode .sidebar.bg-gradient-info, .dark-mode .sidebar.bg-gradient-primary, .dark-mode .sidebar.bg-gradient-success, .dark-mode .sidebar.bg-gradient-warning, .dark-mode .sidebar.bg-gradient-danger, .dark-mode .sidebar.bg-gradient-dark { background-image: none !important; background-color: var(--dm-bg-surface) !important; border-right: 1px solid var(--dm-border); } .dark-mode .sidebar .sidebar-brand { background-color: rgba(0, 0, 0, .2); color: var(--dm-text-primary); } .dark-mode .sidebar .sidebar-brand-text { color: var(--dm-text-primary); } .dark-mode .sidebar .nav-item .nav-link { color: var(--dm-text-secondary); } .dark-mode .sidebar .nav-item .nav-link i { color: var(--dm-text-secondary); } .dark-mode .sidebar .nav-item .nav-link:hover { color: var(--dm-text-primary); background-color: var(--dm-bg-hover); } .dark-mode .sidebar .nav-item .nav-link:hover i { color: var(--dm-text-primary); } .dark-mode .sidebar .nav-item.active .nav-link, .dark-mode .sidebar .nav-item.active .nav-link i { color: #fff; } .dark-mode .sidebar .nav-item.active { background-color: var(--dm-bg-hover); } .dark-mode .sidebar-divider { border-top-color: var(--dm-border) !important; margin: 0 1rem; } .dark-mode .sidebar .sidebar-card { background-color: var(--dm-bg-elevated); color: var(--dm-text-primary); } .dark-mode .sidebar .sidebar-card p { color: var(--dm-text-secondary); } .dark-mode #sidebarToggle { background-color: var(--dm-bg-elevated) !important; } .dark-mode #sidebarToggle:hover { background-color: var(--dm-bg-hover) !important; } /* -------------------------------------------------------------------------- Tables -------------------------------------------------------------------------- */ .dark-mode .table { color: var(--dm-text-primary); background-color: var(--dm-bg-surface); border-color: var(--dm-border); } .dark-mode .table thead th { color: var(--dm-text-primary); background-color: var(--dm-bg-elevated); border-color: var(--dm-border); } .dark-mode .table tbody td, .dark-mode .table tbody th { border-color: var(--dm-border); color: var(--dm-text-primary); } .dark-mode .table-bordered, .dark-mode .table-bordered td, .dark-mode .table-bordered th { border-color: var(--dm-border); } .dark-mode .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .03); } .dark-mode .table-hover tbody tr:hover { background-color: var(--dm-bg-hover); color: var(--dm-text-primary); } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ .dark-mode .form-control, .dark-mode .form-control-user, .dark-mode .custom-select { background-color: var(--dm-bg-elevated); border-color: var(--dm-border); color: var(--dm-text-primary); } .dark-mode .form-control:focus, .dark-mode .form-control-user:focus { background-color: var(--dm-bg-elevated); border-color: #4e73df; color: var(--dm-text-primary); box-shadow: 0 0 0 .2rem rgba(78, 115, 223, .25); } .dark-mode .form-control::placeholder { color: var(--dm-text-muted); } .dark-mode .form-control:disabled, .dark-mode .form-control[readonly] { background-color: var(--dm-bg-base); color: var(--dm-text-muted); } .dark-mode .input-group-text { background-color: var(--dm-bg-elevated); border-color: var(--dm-border); color: var(--dm-text-secondary); } .dark-mode .form-check-input { background-color: var(--dm-bg-elevated); border-color: var(--dm-border-strong); } /* -------------------------------------------------------------------------- Buttons (keep brand colors; soften secondary/light) -------------------------------------------------------------------------- */ .dark-mode .btn-light { background-color: var(--dm-bg-elevated); border-color: var(--dm-border); color: var(--dm-text-primary); } .dark-mode .btn-light:hover { background-color: var(--dm-bg-hover); color: var(--dm-text-primary); } .dark-mode .btn-secondary { border-color: var(--dm-border-strong); } .dark-mode .btn-outline-secondary { color: var(--dm-text-secondary); border-color: var(--dm-border-strong); } .dark-mode .btn-outline-secondary:hover { background-color: var(--dm-bg-hover); color: var(--dm-text-primary); } .dark-mode .close { color: var(--dm-text-primary); text-shadow: none; } .dark-mode .close:hover { color: #fff; } /* -------------------------------------------------------------------------- Dropdowns -------------------------------------------------------------------------- */ .dark-mode .dropdown-menu { background-color: var(--dm-bg-surface); border-color: var(--dm-border); box-shadow: var(--dm-shadow); } .dark-mode .dropdown-item { color: var(--dm-text-primary); } .dark-mode .dropdown-item:hover, .dark-mode .dropdown-item:focus { background-color: var(--dm-bg-hover); color: var(--dm-text-primary); } .dark-mode .dropdown-divider { border-top-color: var(--dm-border); } /* -------------------------------------------------------------------------- Modals -------------------------------------------------------------------------- */ .dark-mode .modal-content { background-color: var(--dm-bg-surface); border-color: var(--dm-border); color: var(--dm-text-primary); } .dark-mode .modal-header, .dark-mode .modal-footer { border-color: var(--dm-border); } .dark-mode .modal-backdrop.show { opacity: .7; } /* -------------------------------------------------------------------------- Alerts — keep accent on the border, darken background, lighten text -------------------------------------------------------------------------- */ .dark-mode .alert { background-color: var(--dm-bg-elevated); color: var(--dm-text-primary); border-color: var(--dm-border-strong); } .dark-mode .alert, .dark-mode .alert *, .dark-mode .alert strong, .dark-mode .alert span, .dark-mode .alert p { color: var(--dm-text-primary); } .dark-mode .alert .close { color: var(--dm-text-primary); opacity: .8; } .dark-mode .alert .close:hover { color: #fff; opacity: 1; } .dark-mode .alert hr { border-top-color: var(--dm-border-strong); } .dark-mode .alert a, .dark-mode .alert .alert-link { color: var(--dm-link); } .dark-mode .alert-primary { border-left: 4px solid #4e73df; } .dark-mode .alert-success { border-left: 4px solid #1cc88a; } .dark-mode .alert-info { border-left: 4px solid #36b9cc; } .dark-mode .alert-warning { border-left: 4px solid #f6c23e; } .dark-mode .alert-danger { border-left: 4px solid #e74a3b; } .dark-mode .alert-light, .dark-mode .alert-secondary { border-left: 4px solid var(--dm-border-strong); } /* -------------------------------------------------------------------------- Pagination & list groups -------------------------------------------------------------------------- */ .dark-mode .page-link { background-color: var(--dm-bg-surface); border-color: var(--dm-border); color: var(--dm-text-primary); } .dark-mode .page-link:hover { background-color: var(--dm-bg-hover); border-color: var(--dm-border-strong); color: var(--dm-text-primary); } .dark-mode .page-item.disabled .page-link { background-color: var(--dm-bg-base); color: var(--dm-text-muted); border-color: var(--dm-border); } .dark-mode .list-group-item { background-color: var(--dm-bg-surface); border-color: var(--dm-border); color: var(--dm-text-primary); } /* -------------------------------------------------------------------------- Borders -------------------------------------------------------------------------- */ .dark-mode .border, .dark-mode .border-top, .dark-mode .border-bottom, .dark-mode .border-left, .dark-mode .border-right { border-color: var(--dm-border) !important; } .dark-mode hr { border-top-color: var(--dm-border); } /* -------------------------------------------------------------------------- Select2 (uses custom select2-bootstrap.css) -------------------------------------------------------------------------- */ .dark-mode .select2-container--default .select2-selection--single, .dark-mode .select2-container--default .select2-selection--multiple { background-color: var(--dm-bg-elevated); border-color: var(--dm-border); color: var(--dm-text-primary); } .dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--dm-text-primary); } .dark-mode .select2-dropdown { background-color: var(--dm-bg-surface); border-color: var(--dm-border); } .dark-mode .select2-results__option { color: var(--dm-text-primary); background-color: var(--dm-bg-surface); } .dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--dm-bg-hover); color: var(--dm-text-primary); } .dark-mode .select2-search__field { background-color: var(--dm-bg-elevated); color: var(--dm-text-primary); border-color: var(--dm-border); } .dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--dm-bg-hover); border-color: var(--dm-border-strong); color: var(--dm-text-primary); } /* -------------------------------------------------------------------------- Login page card -------------------------------------------------------------------------- */ .dark-mode .card.o-hidden { background-color: var(--dm-bg-surface) !important; } .dark-mode .toggle-password { color: var(--dm-text-secondary); } /* -------------------------------------------------------------------------- Public marketing header (rendered above the login form by t_login.php) Only the pieces that show on the login page need to look coherent. -------------------------------------------------------------------------- */ .dark-mode #topbar.topbar { background-color: var(--dm-bg-surface) !important; color: var(--dm-text-secondary); border-bottom: 1px solid var(--dm-border); } .dark-mode #topbar a { color: var(--dm-text-secondary); } .dark-mode #topbar a:hover { color: var(--dm-text-primary); } .dark-mode #header.header { background-color: var(--dm-bg-surface) !important; border-bottom: 1px solid var(--dm-border); } .dark-mode #header .logo h1, .dark-mode #header .logo h1 span { color: var(--dm-text-primary); } .dark-mode #navbar.navbar ul a { color: var(--dm-text-secondary); } .dark-mode #navbar.navbar ul a:hover, .dark-mode #navbar.navbar ul a.active { color: var(--dm-text-primary); } /* -------------------------------------------------------------------------- Misc — code blocks, blockquotes, spinners -------------------------------------------------------------------------- */ .dark-mode code { background-color: var(--dm-bg-elevated); color: #f48fb1; } .dark-mode pre { background-color: var(--dm-bg-elevated); color: var(--dm-text-primary); } .dark-mode blockquote { color: var(--dm-text-secondary); border-left-color: var(--dm-border-strong); } /* Scrollbar polish (WebKit only) */ .dark-mode ::-webkit-scrollbar { width: 10px; height: 10px; } .dark-mode ::-webkit-scrollbar-track { background: var(--dm-bg-base); } .dark-mode ::-webkit-scrollbar-thumb { background: var(--dm-border-strong); border-radius: 5px; } .dark-mode ::-webkit-scrollbar-thumb:hover { background: #5a5d62; }