/* ============================================================ Theme: Light / Dark Applied via [data-bs-theme="light|dark"] on . Bootstrap 5.1 does not ship data-bs-theme natively, so we define CSS custom properties and override Bootstrap tokens for both modes here. ============================================================ */ /* ------ Light theme (default) ------ */ :root, [data-bs-theme="light"] { --bs-body-bg: #ffffff; --bs-body-color: #212529; --bs-border-color: #dee2e6; --bs-card-bg: #ffffff; --bs-card-border-color: rgba(0,0,0,.125); --bs-navbar-bg: #ffffff; --bs-input-bg: #ffffff; --bs-input-color: #212529; --bs-input-border-color: #ced4da; --bs-table-bg: transparent; --bs-table-striped-bg: rgba(0,0,0,.05); --bs-table-hover-bg: rgba(0,0,0,.075); --bs-dropdown-bg: #ffffff; --bs-dropdown-color: #212529; --bs-dropdown-border-color: rgba(0,0,0,.15); --bs-dropdown-hover-bg: #f8f9fa; --bs-modal-bg: #ffffff; --bs-code-color: #d63384; --bs-link-color: #0d6efd; --bs-link-hover-color: #0a58ca; --bs-secondary-text: #6c757d; --bs-muted-bg: #f8f9fa; --theme-icon-color: #495057; } /* ------ Dark theme ------ */ [data-bs-theme="dark"] { --bs-body-bg: #1a1d20; --bs-body-color: #dee2e6; --bs-border-color: #3d4146; --bs-card-bg: #2b2f33; --bs-card-border-color: #3d4146; --bs-navbar-bg: #212529; --bs-input-bg: #2b2f33; --bs-input-color: #dee2e6; --bs-input-border-color: #495057; --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255,255,255,.04); --bs-table-hover-bg: rgba(255,255,255,.08); --bs-dropdown-bg: #2b2f33; --bs-dropdown-color: #dee2e6; --bs-dropdown-border-color: #3d4146; --bs-dropdown-hover-bg: #383d42; --bs-modal-bg: #2b2f33; --bs-code-color: #e685b5; --bs-link-color: #6ea8fe; --bs-link-hover-color: #9ec5fe; --bs-secondary-text: #adb5bd; --bs-muted-bg: #2b2f33; --theme-icon-color: #f8f9fa; } /* ---- Apply variables to Bootstrap elements ---- */ body { background-color: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; } a { color: var(--bs-link-color); } a:hover { color: var(--bs-link-hover-color); } /* Navbar */ .navbar { background-color: var(--bs-navbar-bg) !important; border-bottom-color: var(--bs-border-color) !important; } .navbar-light .navbar-nav .nav-link, .navbar .navbar-nav .nav-link { color: var(--bs-body-color) !important; } .navbar-brand, .navbar-toggler { color: var(--bs-body-color) !important; } /* Cards */ .card { background-color: var(--bs-card-bg) !important; border-color: var(--bs-card-border-color) !important; color: var(--bs-body-color) !important; } .card-header, .card-footer { background-color: var(--bs-muted-bg) !important; border-color: var(--bs-border-color) !important; } /* Tables */ .table { color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--bs-table-striped-bg) !important; color: var(--bs-body-color) !important; } .table-hover > tbody > tr:hover > * { background-color: var(--bs-table-hover-bg) !important; } .table thead th { background-color: var(--bs-muted-bg) !important; color: var(--bs-body-color) !important; } /* Forms */ .form-control, .form-select, .form-check-input { background-color: var(--bs-input-bg) !important; color: var(--bs-input-color) !important; border-color: var(--bs-input-border-color) !important; } .form-control:focus, .form-select:focus { background-color: var(--bs-input-bg) !important; color: var(--bs-input-color) !important; border-color: #86b7fe !important; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25) !important; } .form-control:disabled, .form-control[readonly] { background-color: var(--bs-muted-bg) !important; opacity: .7; } .form-label, .col-form-label { color: var(--bs-body-color) !important; } .form-text { color: var(--bs-secondary-text) !important; } /* Input groups */ .input-group-text { background-color: var(--bs-muted-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-input-border-color) !important; } /* Dropdowns */ .dropdown-menu { background-color: var(--bs-dropdown-bg) !important; border-color: var(--bs-dropdown-border-color) !important; color: var(--bs-dropdown-color) !important; } .dropdown-item { color: var(--bs-dropdown-color) !important; } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--bs-dropdown-hover-bg) !important; color: var(--bs-dropdown-color) !important; } .dropdown-header { color: var(--bs-secondary-text) !important; } .dropdown-divider { border-top-color: var(--bs-border-color) !important; } /* Modals */ .modal-content { background-color: var(--bs-modal-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } .modal-header, .modal-footer { border-color: var(--bs-border-color) !important; } /* List groups */ .list-group-item { background-color: var(--bs-card-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } /* Alerts */ [data-bs-theme="dark"] .alert-info { background-color: #0d3a4f; border-color: #0d6efd40; color: #6ea8fe; } [data-bs-theme="dark"] .alert-success { background-color: #0d3a1f; border-color: #19875440; color: #75b798; } [data-bs-theme="dark"] .alert-warning { background-color: #3d2d00; border-color: #ffc10740; color: #ffda6a; } [data-bs-theme="dark"] .alert-danger { background-color: #3d0d14; border-color: #dc354540; color: #ea868f; } /* Badges */ [data-bs-theme="dark"] .bg-light { background-color: #373b3e !important; color: #dee2e6 !important; } /* Pagination */ .page-link { background-color: var(--bs-card-bg) !important; border-color: var(--bs-border-color) !important; color: var(--bs-link-color) !important; } .page-item.disabled .page-link { background-color: var(--bs-muted-bg) !important; color: var(--bs-secondary-text) !important; } /* Footer */ .footer { border-top-color: var(--bs-border-color) !important; background-color: var(--bs-body-bg) !important; color: var(--bs-secondary-text) !important; } /* Code / pre */ code { color: var(--bs-code-color) !important; } pre { background-color: var(--bs-muted-bg) !important; color: var(--bs-body-color) !important; border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: 1rem; } /* Theme toggle button icon colour */ #theme-toggle { color: var(--theme-icon-color) !important; } /* Pricing table sticky header fix for dark mode */ [data-bs-theme="dark"] #resultsTable th { background-color: #2b2f33 !important; color: var(--bs-body-color) !important; } [data-bs-theme="dark"] #resultsTable th:hover { background-color: #383d42 !important; } /* Smooth transition when switching themes */ body, .navbar, .card, .table, .form-control, .form-select, .dropdown-menu, .modal-content { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }