/** * BART Design System — Dark Mode * * All dark-mode token overrides and component corrections in one file. * Bootstrap 5.3's own dark mode fires simultaneously via data-bs-theme="dark" * on . Load order: * design-tokens.css → components.css → utilities.css → dark-mode.css */ /* ============================================================================= 1. Design Tokens — semantic AND raw gray overrides Overriding the raw --color-gray-* scale ensures every component that references these values (e.g. table header bg, button secondary) darkens automatically without needing individual component rules. ============================================================================= */ [data-bs-theme="dark"] { /* -- Raw gray scale (used directly by components.css) -- */ --color-gray-50: #2b3035; /* table header, hover bg */ --color-gray-100: #343a40; /* subtle bg, striped rows */ --color-gray-200: #3d4349; /* borders, badge bg */ --color-gray-300: #495057; /* input borders */ --color-gray-400: #6c757d; --color-gray-500: #868e96; --color-gray-600: #adb5bd; /* secondary text */ --color-gray-700: #ced4da; /* badge foreground */ --color-gray-800: #dee2e6; /* primary body text */ /* -- Backgrounds -- */ --bg-body: #212529; --bg-surface: #2b3035; --bg-hover: #343a40; --bg-selected: #3d4349; --bg-disabled: #343a40; /* -- Text -- */ --text-primary: #dee2e6; --text-secondary: #adb5bd; --text-muted: #868e96; --text-disabled: #495057; --text-link: #6ea8fe; --text-link-hover: #9ec5fe; /* -- Borders -- */ --border-color: #495057; --border-color-light: #3d4349; --border-color-dark: #5a6169; /* -- Semantic "light" variants (badge / alert backgrounds) -- */ --color-primary-light: #031633; --color-success-light: #051b11; --color-warning-light: #332701; --color-danger-light: #2c0b0e; --color-info-light: #032830; /* -- Vibrant hover colours on dark surfaces -- */ --color-primary-hover: #4d97ff; --color-success-hover: #2dba6e; --color-warning-hover: #e5a400; --color-danger-hover: #e8555f; --color-info-hover: #3dd5f3; /* -- Shadows -- */ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6); } /* ============================================================================= 2. Bootstrap Native Component Overrides Bootstrap 5.3's dark mode handles most .card/.modal etc. via CSS variables, but some utilities (bg-light, bg-white) and form controls still need help. ============================================================================= */ /* -- Bootstrap background utilities that don't adapt automatically -- */ [data-bs-theme="dark"] .bg-light, [data-bs-theme="dark"] .bg-white { background-color: var(--bg-surface) !important; color: var(--text-primary) !important; } /* -- Bootstrap cards: reinforce token values so nothing slips through -- */ [data-bs-theme="dark"] .card { background-color: var(--bg-surface); border-color: var(--border-color); color: var(--text-primary); } [data-bs-theme="dark"] .card-header { background-color: var(--bg-hover); border-bottom-color: var(--border-color); color: var(--text-primary); } [data-bs-theme="dark"] .card-body { background-color: var(--bg-surface); color: var(--text-primary); } [data-bs-theme="dark"] .card-footer { background-color: var(--bg-surface); border-top-color: var(--border-color); color: var(--text-secondary); } /* -- Form controls (search bars, filter inputs) -- */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: var(--bg-surface); border-color: var(--border-color); color: var(--text-primary); } [data-bs-theme="dark"] .form-control::placeholder { color: var(--text-muted); } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: var(--bg-surface); border-color: var(--color-primary); color: var(--text-primary); box-shadow: 0 0 0 0.25rem rgba(78, 152, 255, 0.25); } [data-bs-theme="dark"] .form-select option { background-color: var(--bg-surface); color: var(--text-primary); } [data-bs-theme="dark"] .form-check-input { background-color: var(--bg-surface); border-color: var(--border-color); } [data-bs-theme="dark"] .form-label, [data-bs-theme="dark"] .form-check-label, [data-bs-theme="dark"] .col-form-label { color: var(--text-primary); } [data-bs-theme="dark"] .input-group-text { background-color: var(--bg-hover); border-color: var(--border-color); color: var(--text-secondary); } /* -- Dropdown menus -- */ [data-bs-theme="dark"] .dropdown-menu { background-color: var(--bg-surface); border-color: var(--border-color); color: var(--text-primary); } [data-bs-theme="dark"] .dropdown-item { color: var(--text-primary); } [data-bs-theme="dark"] .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:focus { background-color: var(--bg-hover); color: var(--text-primary); } [data-bs-theme="dark"] .dropdown-header { color: var(--text-muted); } [data-bs-theme="dark"] .dropdown-divider { border-color: var(--border-color); } /* -- Bootstrap badges -- */ [data-bs-theme="dark"] .badge.bg-secondary { background-color: var(--bg-hover) !important; color: var(--text-secondary) !important; } /* bg-warning keeps its full-brightness yellow (#ffc107) in dark mode, so dark text is required for contrast. This must also override Bootstrap's text-dark utility which in dark mode resolves to a light color via --bs-dark, and it must win over the .bg-warning semantic rule below (which is lower specificity). Explicitly setting dark text here is the single source of truth for warning badge text. */ [data-bs-theme="dark"] .badge.bg-warning { color: #212529 !important; } /* -- Bootstrap alerts -- */ [data-bs-theme="dark"] .alert { border-color: var(--border-color); } /* -- Bootstrap pagination -- */ [data-bs-theme="dark"] .page-link { background-color: var(--bg-surface); border-color: var(--border-color); color: var(--text-link); } [data-bs-theme="dark"] .page-link:hover { background-color: var(--bg-hover); border-color: var(--border-color); color: var(--text-link-hover); } [data-bs-theme="dark"] .page-item.disabled .page-link { background-color: var(--bg-surface); border-color: var(--border-color); color: var(--text-disabled); } /* -- Bootstrap list groups (used as sidebar navigation in some views) -- */ [data-bs-theme="dark"] .list-group-item { background-color: var(--bg-surface); border-color: var(--border-color); color: var(--text-primary); } [data-bs-theme="dark"] .list-group-item:hover { background-color: var(--bg-hover); } /* -- Bootstrap modals -- */ [data-bs-theme="dark"] .modal-content { background-color: var(--bg-surface); border-color: var(--border-color); color: var(--text-primary); } [data-bs-theme="dark"] .modal-header, [data-bs-theme="dark"] .modal-footer { border-color: var(--border-color); } /* -- Bootstrap text utilities -- */ [data-bs-theme="dark"] .text-muted, [data-bs-theme="dark"] .text-secondary { color: var(--text-secondary) !important; } [data-bs-theme="dark"] .text-dark { color: var(--text-primary) !important; } [data-bs-theme="dark"] .text-black { color: var(--text-primary) !important; } /* -- Bootstrap borders -- */ [data-bs-theme="dark"] .border { border-color: var(--border-color) !important; } [data-bs-theme="dark"] .border-top, [data-bs-theme="dark"] .border-bottom, [data-bs-theme="dark"] .border-start, [data-bs-theme="dark"] .border-end { border-color: var(--border-color) !important; } /* ============================================================================= Preserve semantic utility colours in dark mode Ensure elements that use bg- keep their intended colour so colour-coded cards and badges remain recognisable in dark mode. These rules intentionally use !important to override the more general card/background resets above. ============================================================================= */ [data-bs-theme="dark"] .bg-primary { background-color: #0d6efd !important; color: #ffffff !important; } [data-bs-theme="dark"] .bg-success { background-color: #198754 !important; color: #ffffff !important; } [data-bs-theme="dark"] .bg-info { background-color: #0dcaf0 !important; color: #072026 !important; } [data-bs-theme="dark"] .bg-danger { background-color: #dc3545 !important; color: #ffffff !important; } [data-bs-theme="dark"] .bg-warning { background-color: #ffc107 !important; color: #212529 !important; } [data-bs-theme="dark"] .text-white-on-dark { color: #ffffff !important; } /* -- Bootstrap table-warning row (used in summary tables) -- */ [data-bs-theme="dark"] .table-warning { --bs-table-bg: rgba(255, 193, 7, 0.15); --bs-table-color: var(--text-primary); } /* -- Bootstrap breadcrumbs -- */ [data-bs-theme="dark"] .breadcrumb { background-color: transparent; } [data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); } /* ============================================================================= 3. BART Component Overrides Rules for .bart-* classes that reference --color-gray-* raw values directly (now overridden by token block above, but explicit rules prevent regressions). ============================================================================= */ /* Table — colour is inherited from .bart-table { color: var(--text-primary) } but we force it on every cell so no Bootstrap override can sneak in */ [data-bs-theme="dark"] .bart-table { color: var(--text-primary); } [data-bs-theme="dark"] .bart-table thead th { background-color: var(--bg-hover); color: var(--text-secondary); border-bottom-color: var(--border-color); } [data-bs-theme="dark"] .bart-table tbody tr { color: var(--text-primary); } [data-bs-theme="dark"] .bart-table tbody td { color: var(--text-primary); border-bottom-color: var(--border-color-light); } [data-bs-theme="dark"] .bart-table th[class*="orderable"]:hover { background-color: var(--bg-selected); } [data-bs-theme="dark"] .bart-table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.035); } /* Card wrapper */ [data-bs-theme="dark"] .bart-table-card { background-color: var(--bg-surface); } /* Badges */ [data-bs-theme="dark"] .bart-badge-warning { background-color: var(--color-warning-light); color: #ffd262; } [data-bs-theme="dark"] .bart-badge-primary { background-color: var(--color-primary-light); color: #6ea8fe; } [data-bs-theme="dark"] .bart-badge-secondary { background-color: var(--bg-hover); color: var(--text-secondary); } /* Buttons — secondary uses raw --color-gray-200 / --color-gray-700 */ [data-bs-theme="dark"] .bart-btn-secondary { background-color: var(--bg-hover); color: var(--text-primary); } [data-bs-theme="dark"] .bart-btn-secondary:hover { background-color: var(--bg-selected); color: var(--text-primary); } /* Skeleton shimmer */ [data-bs-theme="dark"] .bart-skeleton { background: linear-gradient( 90deg, var(--bg-hover) 25%, var(--bg-selected) 50%, var(--bg-hover) 75% ); background-size: 200% 100%; } /* Form inputs */ [data-bs-theme="dark"] .bart-form-input, [data-bs-theme="dark"] .bart-form-select, [data-bs-theme="dark"] .bart-form-textarea { background-color: var(--bg-surface); border-color: var(--border-color); color: var(--text-primary); } /* ============================================================================= 4. Base Template Inline-Style Overrides ============================================================================= */ [data-bs-theme="dark"] .copyable-text:hover { background-color: var(--bg-hover); } [data-bs-theme="dark"] .copyable-text:active { background-color: var(--bg-selected); } /* ============================================================================= 5. Theme Toggle Button Sits inside the navbar-dark .bg-primary navbar. The icon is swapped by theme.js between fa-sun (in dark mode) and fa-moon (in light mode). ============================================================================= */ #bart-theme-toggle { background: none; border: 1px solid transparent; color: rgba(255, 255, 255, 0.75); padding: 0.375rem 0.5rem; cursor: pointer; border-radius: var(--radius-md, 0.375rem); transition: color 150ms ease-in-out, background-color 150ms ease-in-out, border-color 150ms ease-in-out; font-size: 1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; outline: none; margin-right: 0.25rem; } #bart-theme-toggle:hover { color: #fff; background-color: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); } #bart-theme-toggle:focus-visible { color: #fff; outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; } #bart-theme-toggle:active { background-color: rgba(255, 255, 255, 0.2); }