/* SmartAdmin Dark Theme Override * Drop this after the core SmartAdmin/Bootstrap CSS. * Toggle by setting or body[data-theme="dark"]. * Works as a non-destructive override: no edits to vendor files required. */ /* 1) Color System via CSS variables */ :root { --sa-bg: #0f1115; --sa-bg-elev-1: #131720; --sa-bg-elev-2: #161b26; --sa-surface: #1a2030; --sa-border: #2a3242; --sa-text: #e6e9ef; --sa-text-muted: #adb5bd; --sa-link: #7aa2f7; --sa-link-hover: #9ab4ff; --sa-primary: #3b82f6; /* blue-500 */ --sa-success: #22c55e; /* green-500 */ --sa-info: #06b6d4; /* cyan-500 */ --sa-warning: #f59e0b; /* amber-500 */ --sa-danger: #ef4444; /* red-500 */ --sa-shadow: rgba(0,0,0,.45); --sa-input-bg: #0f141c; --sa-input-border: #2a3444; --sa-input-placeholder: #7b8694; --sa-table-stripe: rgba(255,255,255,.03); } /* Activate only when data-theme="dark" is set */ :root[data-theme="dark"], body[data-theme="dark"] { color-scheme: dark; } /* 2) Base */ :root[data-theme="dark"], body[data-theme="dark"] body { background-color: var(--sa-bg); color: var(--sa-text); } body[data-theme="dark"] a { color: var(--sa-link); } body[data-theme="dark"] a:hover { color: var(--sa-link-hover); } /* 3) Layout wrappers (common SmartAdmin/Bootstrap containers) */ body[data-theme="dark"] .page-content, body[data-theme="dark"] .page-wrapper, body[data-theme="dark"] .container, body[data-theme="dark"] .container-fluid { background: transparent; color: var(--sa-text); } /* Header / Navbar */ body[data-theme="dark"] .navbar, body[data-theme="dark"] .header, body[data-theme="dark"] .page-header { background-color: var(--sa-bg-elev-2); border-bottom: 1px solid var(--sa-border); color: var(--sa-text); } body[data-theme="dark"] .navbar .navbar-brand, body[data-theme="dark"] .navbar .nav-link { color: var(--sa-text); } body[data-theme="dark"] .navbar .nav-link:hover { color: var(--sa-link-hover); } /* Sidebar */ body[data-theme="dark"] .sidebar, body[data-theme="dark"] .nav-left, body[data-theme="dark"] .page-sidebar { background-color: var(--sa-bg-elev-1); border-right: 1px solid var(--sa-border); } body[data-theme="dark"] .sidebar .nav-link, body[data-theme="dark"] .page-sidebar .nav > li > a { color: var(--sa-text-muted); } body[data-theme="dark"] .sidebar .nav-link.active, body[data-theme="dark"] .page-sidebar .nav > li.active > a { color: var(--sa-text); background-color: var(--sa-bg-elev-2); } body[data-theme="dark"] .sidebar .nav-link:hover { color: var(--sa-text); background-color: var(--sa-bg-elev-2); } /* Cards / Panels / Widgets */ body[data-theme="dark"] .card, body[data-theme="dark"] .panel, body[data-theme="dark"] .jarviswidget, body[data-theme="dark"] .well { background-color: var(--sa-surface); border: 1px solid var(--sa-border); color: var(--sa-text); box-shadow: 0 4px 20px var(--sa-shadow); } body[data-theme="dark"] .card .card-header, body[data-theme="dark"] .panel-heading, body[data-theme="dark"] .jarviswidget > header { background-color: var(--sa-bg-elev-2); border-bottom: 1px solid var(--sa-border); color: var(--sa-text); } /* Breadcrumbs */ body[data-theme="dark"] .breadcrumb { background-color: var(--sa-bg-elev-1); border: 1px solid var(--sa-border); } body[data-theme="dark"] .breadcrumb .breadcrumb-item, body[data-theme="dark"] .breadcrumb a { color: var(--sa-text-muted); } body[data-theme="dark"] .breadcrumb .active { color: var(--sa-text); } /* Tabs / Pills */ body[data-theme="dark"] .nav-tabs { border-bottom: 1px solid var(--sa-border); } body[data-theme="dark"] .nav-tabs .nav-link { color: var(--sa-text-muted); border: 1px solid transparent; } body[data-theme="dark"] .nav-tabs .nav-link.active { color: var(--sa-text); background-color: var(--sa-bg-elev-2); border-color: var(--sa-border) var(--sa-border) var(--sa-bg-elev-2); } body[data-theme="dark"] .nav-pills .nav-link { color: var(--sa-text-muted); } body[data-theme="dark"] .nav-pills .nav-link.active { background-color: var(--sa-primary); color: #fff; } /* Tables */ body[data-theme="dark"] table, body[data-theme="dark"] .table { color: var(--sa-text); } body[data-theme="dark"] .table thead th { background-color: var(--sa-bg-elev-2); border-color: var(--sa-border); color: var(--sa-text); } body[data-theme="dark"] .table tbody td, body[data-theme="dark"] .table tbody th { background-color: var(--sa-surface); border-color: var(--sa-border); } body[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: var(--sa-table-stripe); } body[data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255,255,255,.04); } /* Forms */ body[data-theme="dark"] .form-control, body[data-theme="dark"] input, body[data-theme="dark"] select, body[data-theme="dark"] textarea { background-color: var(--sa-input-bg); border: 1px solid var(--sa-input-border); color: var(--sa-text); } body[data-theme="dark"] .form-control::placeholder { color: var(--sa-input-placeholder); } body[data-theme="dark"] .input-group-text { background-color: var(--sa-bg-elev-2); border-color: var(--sa-input-border); color: var(--sa-text-muted); } body[data-theme="dark"] .form-check-input { border-color: var(--sa-input-border); background-color: var(--sa-input-bg); } /* Buttons (Bootstrap-like) */ body[data-theme="dark"] .btn { border-color: transparent; } body[data-theme="dark"] .btn-primary { background-color: var(--sa-primary); } body[data-theme="dark"] .btn-success { background-color: var(--sa-success); } body[data-theme="dark"] .btn-info { background-color: var(--sa-info); } body[data-theme="dark"] .btn-warning { background-color: var(--sa-warning); color: #111827; } body[data-theme="dark"] .btn-danger { background-color: var(--sa-danger); } body[data-theme="dark"] .btn-outline-primary { color: var(--sa-primary); border-color: var(--sa-primary); background: transparent; } body[data-theme="dark"] .btn-outline-primary:hover { background: var(--sa-primary); color: #fff; } /* Dropdowns */ body[data-theme="dark"] .dropdown-menu { background-color: var(--sa-surface); border: 1px solid var(--sa-border); color: var(--sa-text); box-shadow: 0 10px 30px var(--sa-shadow); } body[data-theme="dark"] .dropdown-item { color: var(--sa-text); } body[data-theme="dark"] .dropdown-item:hover { background-color: var(--sa-bg-elev-2); } /* Modals */ body[data-theme="dark"] .modal-content { background-color: var(--sa-surface); color: var(--sa-text); border: 1px solid var(--sa-border); box-shadow: 0 20px 60px var(--sa-shadow); } body[data-theme="dark"] .modal-header { border-bottom: 1px solid var(--sa-border); } body[data-theme="dark"] .modal-footer { border-top: 1px solid var(--sa-border); } /* Alerts */ body[data-theme="dark"] .alert-primary { background-color: rgba(59,130,246,.1); border-color: rgba(59,130,246,.35); color: #cfe1ff; } body[data-theme="dark"] .alert-success { background-color: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); color: #b9f6ce; } body[data-theme="dark"] .alert-info { background-color: rgba(6,182,212,.12); border-color: rgba(6,182,212,.35); color: #b9f1fb; } body[data-theme="dark"] .alert-warning { background-color: rgba(245,158,11,.14); border-color: rgba(245,158,11,.35); color: #ffe3b3; } body[data-theme="dark"] .alert-danger { background-color: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); color: #ffc9c9; } /* Badges / Labels */ body[data-theme="dark"] .badge { background-color: var(--sa-bg-elev-2); color: var(--sa-text); } body[data-theme="dark"] .badge-primary { background-color: var(--sa-primary); } body[data-theme="dark"] .badge-success { background-color: var(--sa-success); } body[data-theme="dark"] .badge-info { background-color: var(--sa-info); } body[data-theme="dark"] .badge-warning { background-color: var(--sa-warning); color: #111827; } body[data-theme="dark"] .badge-danger { background-color: var(--sa-danger); } /* Pagination */ body[data-theme="dark"] .pagination .page-link { background-color: var(--sa-bg-elev-1); border: 1px solid var(--sa-border); color: var(--sa-text); } body[data-theme="dark"] .pagination .page-item.active .page-link { background-color: var(--sa-primary); border-color: var(--sa-primary); } /* Tooltips & Popovers */ body[data-theme="dark"] .tooltip-inner { background-color: var(--sa-bg-elev-2); color: var(--sa-text); } body[data-theme="dark"] .popover { background-color: var(--sa-surface); border: 1px solid var(--sa-border); color: var(--sa-text); } /* Progress bars */ body[data-theme="dark"] .progress { background-color: var(--sa-bg-elev-1); } body[data-theme="dark"] .progress-bar { background-color: var(--sa-primary); } /* Code / Pre */ body[data-theme="dark"] code, body[data-theme="dark"] pre { background-color: var(--sa-bg-elev-1); color: #c8e1ff; border: 1px solid var(--sa-border); } /* Tables: data grids (if any) */ body[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--sa-text) !important; } body[data-theme="dark"] .dataTables_wrapper .dataTables_filter input { background: var(--sa-input-bg); color: var(--sa-text); border-color: var(--sa-input-border); } /* 4) Utility helpers */ body[data-theme="dark"] .bg-light, body[data-theme="dark"] .bg-white { background-color: var(--sa-surface) !important; } body[data-theme="dark"] .text-muted { color: var(--sa-text-muted) !important; } body[data-theme="dark"] .border, body[data-theme="dark"] .border-top, body[data-theme="dark"] .border-bottom, body[data-theme="dark"] .border-left, body[data-theme="dark"] .border-right { border-color: var(--sa-border) !important; } /* 5) Scrollbars */ @supports selector(::-webkit-scrollbar) { body[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; } body[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--sa-bg-elev-1); } body[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2c3546; border: 2px solid var(--sa-bg-elev-1); border-radius: 10px; } body[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #364058; } } /* 6) High-contrast focus rings for accessibility */ body[data-theme="dark"] :focus { outline: 2px solid rgba(122,162,247,.7); outline-offset: 2px; } /* 7) Optional: animations keep original timings from SmartAdmin; colors already dark-safe */ /* No changes required for keyframes; rely on existing library. */