/* Dark mode for SB Admin 2. * * SB Admin ships light only, with colours baked into its stylesheet rather * than exposed as variables — so this is an override layer that redefines * the surfaces it paints, scoped under [data-theme="dark"] on . * * Three states, not two. An explicit choice stamps data-theme; the default * "system" setting stamps nothing, so the media query below has to carry * it, guarded with :not([data-theme="light"]) so an explicit light choice * still beats a dark OS. Every colour is defined in the bare :root block * first — a value that only exists inside a media query never applies to * someone who has picked a theme explicitly. */ :root { --d-bg: #f8f9fc; --d-surface: #ffffff; --d-sunk: #eaecf4; --d-border: #e3e6f0; --d-text: #5a5c69; --d-heading: #3a3b45; --d-muted: #858796; --d-sidebar-a: #4e73df; --d-sidebar-b: #224abe; --d-input-bg: #ffffff; --d-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --d-bg: #171923; --d-surface: #1f2231; --d-sunk: #262a3b; --d-border: #2f3448; --d-text: #c3c7d4; --d-heading: #e8eaf2; --d-muted: #8b90a4; --d-sidebar-a: #232742; --d-sidebar-b: #171a2e; --d-input-bg: #262a3b; --d-shadow: 0 .15rem 1.75rem 0 rgba(0,0,0,.45); } } :root[data-theme="dark"] { --d-bg: #171923; --d-surface: #1f2231; --d-sunk: #262a3b; --d-border: #2f3448; --d-text: #c3c7d4; --d-heading: #e8eaf2; --d-muted: #8b90a4; --d-sidebar-a: #232742; --d-sidebar-b: #171a2e; --d-input-bg: #262a3b; --d-shadow: 0 .15rem 1.75rem 0 rgba(0,0,0,.45); } /* --- surfaces --------------------------------------------------------- */ body, #wrapper, #content-wrapper { background-color: var(--d-bg) !important; color: var(--d-text); } .card, .bg-white, .sticky-footer, .topbar.bg-white, .dropdown-menu, .modal-content { background-color: var(--d-surface) !important; border-color: var(--d-border) !important; color: var(--d-text); } .card { box-shadow: var(--d-shadow) !important; } .card-header { background-color: var(--d-sunk) !important; border-bottom-color: var(--d-border) !important; } .bg-light, .bg-gray-100, .bg-gray-200 { background-color: var(--d-sunk) !important; } .border, .border-bottom, .border-top, .border-left, .border-right, hr { border-color: var(--d-border) !important; } /* The sidebar gradient is set inline by SB Admin's own class, so it needs overriding rather than inheriting a token. */ .sidebar-dark, .bg-gradient-primary { background-color: var(--d-sidebar-a) !important; background-image: linear-gradient(180deg, var(--d-sidebar-a) 10%, var(--d-sidebar-b) 100%) !important; } /* --- text ------------------------------------------------------------- */ .text-gray-800, .text-gray-900, h1, h2, h3, h4, h5, h6 { color: var(--d-heading) !important; } .text-gray-600, .text-gray-700, .text-dark, .small, small { color: var(--d-text) !important; } .text-gray-500, .text-muted, .text-gray-400 { color: var(--d-muted) !important; } /* --- tables ----------------------------------------------------------- */ .table { color: var(--d-text); } .table thead th, .table td, .table th { border-color: var(--d-border) !important; } .table-hover tbody tr:hover { background-color: var(--d-sunk); color: var(--d-heading); } /* --- forms ------------------------------------------------------------ */ .form-control, .custom-select { background-color: var(--d-input-bg) !important; border-color: var(--d-border) !important; color: var(--d-heading) !important; } .form-control:focus { background-color: var(--d-input-bg) !important; color: var(--d-heading) !important; } .form-control::placeholder { color: var(--d-muted) !important; } .input-group-text { background-color: var(--d-sunk) !important; border-color: var(--d-border) !important; color: var(--d-muted) !important; } .btn-outline-secondary { color: var(--d-text); border-color: var(--d-border); } .btn-outline-secondary:hover { background-color: var(--d-sunk); color: var(--d-heading); } /* --- this app's own bits --------------------------------------------- */ .svc-row { border-bottom-color: var(--d-border) !important; } .pill-up { background: #17392e; color: #6fd3ac; } .pill-down { background: #3d1d19; color: #f08a7c; } .pill-unknown { background: var(--d-sunk); color: var(--d-muted); } .field-set { color: #6fd3ac !important; } .field-unset { color: #666c80 !important; } .login-shell { background: var(--d-bg) !important; } /* Left-border accent cards keep their hue but need a dark body. */ .border-left-primary, .border-left-success, .border-left-danger, .border-left-secondary, .border-left-warning, .border-left-info { background-color: var(--d-surface) !important; } .alert-success { background:#17392e; color:#8fdcbb; border-color:#1f5544; } .alert-danger { background:#3d1d19; color:#f3a79b; border-color:#5c2b24; } .alert-warning { background:#3b2f16; color:#e5c07b; border-color:#584821; } /* Toggle button in the topbar */ .theme-toggle { background: none; border: 1px solid var(--d-border); color: var(--d-muted); border-radius: .35rem; padding: .25rem .55rem; font-size: .95rem; line-height: 1; min-height: 34px; cursor: pointer; } .theme-toggle:hover { color: var(--d-heading); border-color: var(--d-muted); }