/* ========================================================================== Taplink Dark Mode Activated via [data-theme="dark"] on Toggle lives in the navbar next to the Taplink logo. ========================================================================== */ :root[data-theme="dark"] { --tp-bg: #121212; --tp-bg-elev: #1e1e1e; --tp-bg-elev-2: #2a2a2a; --tp-bg-input: #262626; --tp-border: #3a3a3a; --tp-border-soft: #2a2a2a; --tp-text: #e4e6eb; --tp-text-muted: #a0a0a5; --tp-link: #6ab4ff; --tp-link-hover: #9ccfff; --tp-primary: #2196f3; --tp-shadow: 0 4px 12px rgba(0, 0, 0, 0.55); } /* ---- Smooth transitions between themes ---- */ html[data-theme] body, html[data-theme] .card, html[data-theme] .modal-content, html[data-theme] .dropdown-menu, html[data-theme] .list-group-item, html[data-theme] .form-control, html[data-theme] .form-select, html[data-theme] .table { transition: background-color .2s ease, color .2s ease, border-color .2s ease; } /* ---- Navbar toggle button (visible in both themes) ---- */ .darkmode-toggle { background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; margin-right: 12px; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; } .darkmode-toggle:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.6); transform: rotate(12deg); } .darkmode-toggle:focus { outline: none; box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.35); } .darkmode-toggle .fa-sun { display: none; } [data-theme="dark"] .darkmode-toggle .fa-sun { display: inline-block; } [data-theme="dark"] .darkmode-toggle .fa-moon { display: none; } /* ========================================================================== Global body & typography ========================================================================== */ [data-theme="dark"] body { background-color: var(--tp-bg) !important; color: var(--tp-text); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--tp-text); } [data-theme="dark"] hr { border-color: var(--tp-border); opacity: 0.5; } [data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.navbar-brand) { color: var(--tp-link); } [data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.navbar-brand):hover { color: var(--tp-link-hover); } /* ========================================================================== Utility classes that collide with dark mode ========================================================================== */ [data-theme="dark"] .text-dark { color: var(--tp-text) !important; } [data-theme="dark"] .text-black { color: var(--tp-text) !important; } [data-theme="dark"] .text-black-50 { color: var(--tp-text-muted) !important; } [data-theme="dark"] .text-body { color: var(--tp-text) !important; } [data-theme="dark"] .text-muted { color: var(--tp-text-muted) !important; } [data-theme="dark"] .text-secondary{ color: var(--tp-text-muted) !important; } [data-theme="dark"] .bg-white, [data-theme="dark"] .bg-light { background-color: var(--tp-bg-elev) !important; color: var(--tp-text); } [data-theme="dark"] .bg-body { background-color: var(--tp-bg) !important; } [data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-end, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-start { border-color: var(--tp-border) !important; } [data-theme="dark"] .shadow, [data-theme="dark"] .shadow-sm, [data-theme="dark"] .shadow-lg { box-shadow: var(--tp-shadow) !important; } /* ========================================================================== Cards ========================================================================== */ [data-theme="dark"] .card { background-color: var(--tp-bg-elev); color: var(--tp-text); border-color: var(--tp-border); } [data-theme="dark"] .card-header, [data-theme="dark"] .card-footer { background-color: var(--tp-bg-elev-2); border-color: var(--tp-border); color: var(--tp-text); } /* Preserve intentionally dark cards (home.html uses card bg-dark text-white) */ [data-theme="dark"] .card.bg-dark { background-color: #0a0a0a !important; } [data-theme="dark"] .card.bg-dark .card-header { background-color: #0a0a0a; border-color: var(--tp-border); } /* Cards with bg-light body in light theme — darken body in dark mode */ [data-theme="dark"] .card-body.bg-light { background-color: var(--tp-bg-elev-2) !important; color: var(--tp-text); } /* ========================================================================== Tables ========================================================================== */ [data-theme="dark"] .table { --bs-table-bg: transparent; color: var(--tp-text); border-color: var(--tp-border); } [data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: var(--tp-text); border-color: var(--tp-border); box-shadow: none; } [data-theme="dark"] .table > thead { color: var(--tp-text); background-color: var(--tp-bg-elev-2); } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.035) !important; color: var(--tp-text); } [data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgba(255, 255, 255, 0.07) !important; color: var(--tp-text); } [data-theme="dark"] .table-light, [data-theme="dark"] .table-light > th, [data-theme="dark"] .table-light > td { background-color: var(--tp-bg-elev-2) !important; color: var(--tp-text); border-color: var(--tp-border); } /* ========================================================================== Forms ========================================================================== */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] input.form-control, [data-theme="dark"] textarea.form-control { background-color: var(--tp-bg-input); color: var(--tp-text); border-color: var(--tp-border); } [data-theme="dark"] .form-control::placeholder { color: #888; opacity: 1; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: var(--tp-bg-input); color: var(--tp-text); border-color: var(--tp-primary); box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25); } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-control[readonly] { background-color: #1a1a1a; color: var(--tp-text-muted); border-color: var(--tp-border); } [data-theme="dark"] .form-label { color: var(--tp-text); } [data-theme="dark"] .form-text { color: var(--tp-text-muted); } [data-theme="dark"] .input-group-text { background-color: var(--tp-bg-elev-2); color: var(--tp-text); border-color: var(--tp-border); } /* input-group-text.bg-primary is used on login/signup forms — leave it primary */ [data-theme="dark"] .input-group-text.bg-primary { color: #fff; } [data-theme="dark"] .form-check-input { background-color: var(--tp-bg-input); border-color: var(--tp-border); } [data-theme="dark"] .form-check-input:checked { background-color: var(--tp-primary); border-color: var(--tp-primary); } [data-theme="dark"] .form-check-label { color: var(--tp-text); } /* ========================================================================== Buttons ========================================================================== */ [data-theme="dark"] .btn-light { background-color: var(--tp-bg-elev-2); color: var(--tp-text); border-color: var(--tp-border); } [data-theme="dark"] .btn-light:hover { background-color: #3a3a3a; color: var(--tp-text); border-color: #4a4a4a; } [data-theme="dark"] .btn-outline-light { color: var(--tp-text); border-color: var(--tp-border); } [data-theme="dark"] .btn-outline-light:hover { background-color: var(--tp-bg-elev-2); color: var(--tp-text); } [data-theme="dark"] .btn-outline-secondary { color: var(--tp-text); border-color: var(--tp-border); } [data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--tp-bg-elev-2); color: var(--tp-text); } [data-theme="dark"] .btn-outline-dark { color: var(--tp-text); border-color: var(--tp-border); } [data-theme="dark"] .btn-outline-dark:hover { background-color: var(--tp-bg-elev-2); color: var(--tp-text); } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(2); } /* ========================================================================== Modals — ALWAYS light, even in dark mode. Deliberate product decision: dark modals floating over a dark page felt washed-out and drained the contrast that modals rely on. Keep main pages dark, modals light. Bootstrap 5.3 cascades data-bs-theme="dark" into .modal-content by default, so these rules explicitly reset the surface and the common child controls (inputs, selects, dropdowns, tables, text-muted, form labels) back to light-theme colors. ========================================================================== */ [data-theme="dark"] .modal-content, [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-body, [data-theme="dark"] .modal-footer, [data-theme="dark"] .modal-dialog-custom, [data-theme="dark"] .tapa-modal-dialog, [data-theme="dark"] .tapa-modal-header, [data-theme="dark"] .tapa-modal-body, [data-theme="dark"] .tapa-modal-footer { background-color: #fff !important; color: #212529 !important; border-color: #dee2e6 !important; } [data-theme="dark"] .modal-content .form-control, [data-theme="dark"] .modal-content .form-select, [data-theme="dark"] .modal-dialog-custom .form-control, [data-theme="dark"] .modal-dialog-custom .form-select, [data-theme="dark"] .tapa-modal-body .form-control, [data-theme="dark"] .tapa-modal-body .form-select { background-color: #fff !important; color: #212529 !important; border-color: #ced4da !important; } [data-theme="dark"] .modal-content .form-label, [data-theme="dark"] .modal-content .form-check-label, [data-theme="dark"] .modal-content .text-muted, [data-theme="dark"] .modal-content .text-secondary, [data-theme="dark"] .tapa-modal-body .form-label, [data-theme="dark"] .tapa-modal-body .form-check-label, [data-theme="dark"] .tapa-modal-body .text-muted, [data-theme="dark"] .tapa-modal-body .text-secondary, [data-theme="dark"] .modal-dialog-custom .text-muted, [data-theme="dark"] .modal-dialog-custom .text-secondary { color: #6c757d !important; } /* Tables inside modals — don't pick up the dark .table rule */ [data-theme="dark"] .modal-content .table, [data-theme="dark"] .tapa-modal-body .table { --bs-table-bg: transparent; color: #212529; border-color: #dee2e6; } [data-theme="dark"] .modal-content .table > :not(caption) > * > *, [data-theme="dark"] .tapa-modal-body .table > :not(caption) > * > * { background-color: transparent; color: #212529; border-color: #dee2e6; } /* Dropdowns rendered inside modals (e.g. filter panels on modal forms) should also stay light. */ [data-theme="dark"] .modal-content .dropdown-menu, [data-theme="dark"] .tapa-modal-body .dropdown-menu { background-color: #fff; color: #212529; border-color: #dee2e6; } [data-theme="dark"] .modal-content .dropdown-item, [data-theme="dark"] .tapa-modal-body .dropdown-item { color: #212529; } [data-theme="dark"] .modal-content .dropdown-item:hover, [data-theme="dark"] .tapa-modal-body .dropdown-item:hover { background-color: #f1f3f8; color: #212529; } /* ========================================================================== Dropdowns ========================================================================== */ [data-theme="dark"] .dropdown-menu { background-color: var(--tp-bg-elev); border-color: var(--tp-border); color: var(--tp-text); } [data-theme="dark"] .dropdown-item { color: var(--tp-text); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: var(--tp-bg-elev-2); color: var(--tp-text); } [data-theme="dark"] .dropdown-divider { border-color: var(--tp-border); } [data-theme="dark"] .dropdown-header { color: var(--tp-text-muted); } /* ========================================================================== Alerts (keep semantic color, just darken) ========================================================================== */ [data-theme="dark"] .alert-primary { background-color: #0b2a4a; color: #b4d7ff; border-color: #12416e; } [data-theme="dark"] .alert-secondary { background-color: #23272b; color: #c9ccd0; border-color: #3a3f44; } [data-theme="dark"] .alert-success { background-color: #0f3b21; color: #a6e6bf; border-color: #16522d; } [data-theme="dark"] .alert-info { background-color: #0c3a52; color: #b0dafc; border-color: #134b6a; } [data-theme="dark"] .alert-warning { background-color: #4d3a0f; color: #ffd97d; border-color: #6b5312; } [data-theme="dark"] .alert-danger { background-color: #4a0f15; color: #f8a8af; border-color: #68131c; } /* ========================================================================== List group ========================================================================== */ [data-theme="dark"] .list-group-item { background-color: var(--tp-bg-elev); color: var(--tp-text); border-color: var(--tp-border); } [data-theme="dark"] .list-group-item-action:hover, [data-theme="dark"] .list-group-item-action:focus { background-color: var(--tp-bg-elev-2); color: var(--tp-text); } /* ========================================================================== Pagination ========================================================================== */ [data-theme="dark"] .page-link { background-color: var(--tp-bg-elev); color: var(--tp-text); border-color: var(--tp-border); } [data-theme="dark"] .page-link:hover { background-color: var(--tp-bg-elev-2); color: var(--tp-text); } [data-theme="dark"] .page-item.disabled .page-link { background-color: var(--tp-bg); color: var(--tp-text-muted); border-color: var(--tp-border); } /* ========================================================================== Nav tabs / pills ========================================================================== */ [data-theme="dark"] .nav-tabs { border-bottom-color: var(--tp-border); } [data-theme="dark"] .nav-tabs .nav-link { color: var(--tp-text-muted); border-color: transparent; } [data-theme="dark"] .nav-tabs .nav-link:hover { color: var(--tp-text); border-color: var(--tp-border); } [data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--tp-bg-elev); color: var(--tp-text); border-color: var(--tp-border) var(--tp-border) var(--tp-bg-elev); } [data-theme="dark"] .nav-pills .nav-link { color: var(--tp-text); } /* ========================================================================== Accordion ========================================================================== */ [data-theme="dark"] .accordion-item, [data-theme="dark"] .accordion-button { background-color: var(--tp-bg-elev); color: var(--tp-text); border-color: var(--tp-border); } [data-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--tp-bg-elev-2); color: var(--tp-text); } [data-theme="dark"] .accordion-button::after { filter: invert(1); } /* ========================================================================== Offcanvas ========================================================================== */ [data-theme="dark"] .offcanvas { background-color: var(--tp-bg-elev); color: var(--tp-text); border-color: var(--tp-border); } /* ========================================================================== Breadcrumb ========================================================================== */ [data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--tp-text-muted); } /* ========================================================================== DataTables ========================================================================== */ [data-theme="dark"] .dataTables_wrapper, [data-theme="dark"] .dataTables_info, [data-theme="dark"] .dataTables_length, [data-theme="dark"] .dataTables_filter, [data-theme="dark"] .dataTables_length label, [data-theme="dark"] .dataTables_filter label { color: var(--tp-text); } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--tp-text) !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: var(--tp-text-muted) !important; } [data-theme="dark"] table.dataTable.stripe tbody tr.odd, [data-theme="dark"] table.dataTable.display tbody tr.odd { background-color: rgba(255, 255, 255, 0.035); } [data-theme="dark"] table.dataTable.hover tbody tr:hover, [data-theme="dark"] table.dataTable.display tbody tr:hover { background-color: rgba(255, 255, 255, 0.07); } [data-theme="dark"] table.dataTable thead th, [data-theme="dark"] table.dataTable tbody td { border-color: var(--tp-border); } /* ========================================================================== Account page custom styles (account.html) ========================================================================== */ [data-theme="dark"] .account-wrapper { background: linear-gradient(160deg, #0d1520 0%, #121b26 40%, #161d28 100%) !important; } [data-theme="dark"] .account-body { background: var(--tp-bg-elev) !important; color: var(--tp-text); } [data-theme="dark"] .account-field { border-bottom-color: var(--tp-border) !important; } [data-theme="dark"] .account-label { color: #7fb0e0 !important; } [data-theme="dark"] .account-value { color: var(--tp-text) !important; } [data-theme="dark"] .account-pw-form .form-control { background-color: var(--tp-bg-input) !important; border-color: var(--tp-border) !important; color: var(--tp-text) !important; } [data-theme="dark"] .account-pw-form .form-control:focus { border-color: var(--tp-primary) !important; box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.25) !important; } /* ========================================================================== Direct landing / insurer / broker home panels (direct_home.html, broker_insurer_home.html) ========================================================================== */ [data-theme="dark"] .direct-col-right { background: var(--tp-bg-elev) !important; color: var(--tp-text) !important; } [data-theme="dark"] .direct-col-right h2, [data-theme="dark"] .direct-col-right h3, [data-theme="dark"] .direct-col-right p { color: var(--tp-text) !important; } [data-theme="dark"] .direct-col-right .direct-subtitle { color: #8ab4f8 !important; } /* Left (dark gradient) column already dark — leave it */ /* Status pill – active stays green-tinted but darker */ [data-theme="dark"] .direct-status { background: var(--tp-bg-elev-2) !important; color: var(--tp-text) !important; } [data-theme="dark"] .direct-status.active { background: #0f3b21 !important; color: #a6e6bf !important; } /* Outline CTA button — keep accent colour on dark */ [data-theme="dark"] .btn-tapanda-outline { color: #7fb0e0 !important; border-color: #3a6a9a !important; } [data-theme="dark"] .btn-tapanda-outline:hover { background: #1a3a5c !important; color: #fff !important; border-color: #1e5a8a !important; } /* Permission cards */ [data-theme="dark"] .perm-card { background: var(--tp-bg-elev-2) !important; border-color: var(--tp-border) !important; color: var(--tp-text) !important; } [data-theme="dark"] .perm-card-title { color: var(--tp-text) !important; } [data-theme="dark"] .perm-card-desc { color: var(--tp-text-muted) !important; } [data-theme="dark"] .perm-badge.activated { background: #0f3b21 !important; color: #a6e6bf !important; } [data-theme="dark"] .perm-badge.not-activated { background: var(--tp-bg-elev) !important; color: var(--tp-text-muted) !important; } /* ========================================================================== TAPA React app (tapa.html) Modals intentionally stay light (covered by the "Modals ALWAYS light" block above). Anything here should only affect surfaces OUTSIDE modals — currently there's nothing TAPA-specific that needs dark-mode overrides that isn't already handled by the global rules. ========================================================================== */ /* ========================================================================== Popup messages / flash alerts (default Bootstrap) ========================================================================== */ [data-theme="dark"] .alert-dismissible .btn-close { filter: invert(1) grayscale(100%) brightness(2); } /* ========================================================================== Fix hardcoded-white images or logos inside content (if any look bad) ========================================================================== */ [data-theme="dark"] img.tp-invert-on-dark { filter: invert(1) hue-rotate(180deg); } /* ========================================================================== TAPA filter multi-select (custom React component) Inline styles in FilterSection.js only handle layout — colors come from here so both themes stay readable. Previously the button + panel had hardcoded white backgrounds with body-inherited text, which went light in dark mode and produced white-on-white. ========================================================================== */ .tapa-ms-btn { background: #fff; color: #212529; } .tapa-ms-btn.is-active { background: #e8eaf6; color: #1a237e; } .tapa-ms-panel { background: #fff; color: #212529; } .tapa-ms-clear-row { border-bottom: 1px solid #eee; } .tapa-ms-clear { color: #1a237e; } .tapa-ms-empty { color: #999; } .tapa-ms-option:hover { background: #f1f3f8; } [data-theme="dark"] .tapa-ms-btn { background: var(--tp-bg-elev); color: var(--tp-text); border-color: var(--tp-border) !important; } [data-theme="dark"] .tapa-ms-btn.is-active { background: #1e2b47; color: #cfd8dc; border-color: #3a4e7a !important; } [data-theme="dark"] .tapa-ms-panel { background: var(--tp-bg-elev); color: var(--tp-text); border-color: var(--tp-border) !important; box-shadow: var(--tp-shadow) !important; } [data-theme="dark"] .tapa-ms-clear-row { border-bottom-color: var(--tp-border) !important; } [data-theme="dark"] .tapa-ms-clear { color: #8ab4f8; } [data-theme="dark"] .tapa-ms-empty { color: var(--tp-text-muted); } [data-theme="dark"] .tapa-ms-option { color: var(--tp-text); } [data-theme="dark"] .tapa-ms-option:hover { background: var(--tp-bg-elev-2); } /* ========================================================================== /users page (users.html) custom table surfaces Hardcoded white container + light-grey thead were invisible in dark mode. ========================================================================== */ [data-theme="dark"] .user-table-container { background: var(--tp-bg-elev) !important; color: var(--tp-text); } [data-theme="dark"] .user-table thead th { background-color: var(--tp-bg-elev-2) !important; color: var(--tp-text); border-bottom-color: var(--tp-border) !important; } [data-theme="dark"] .user-table thead th:hover { background-color: #3a3a3a !important; } [data-theme="dark"] .user-table tbody tr:hover { background-color: rgba(255, 255, 255, 0.06) !important; } [data-theme="dark"] .user-table tbody td { border-bottom-color: var(--tp-border) !important; color: var(--tp-text); } /* ========================================================================== Solera Allocation table (soleraAllocation.html) — same hardcoded-white pattern as /users. Darken container, header, hover; keep Bootstrap .dropdown-menu (filter dropdowns) to the global themed rules above. ========================================================================== */ [data-theme="dark"] .solera-allocation-container { background: var(--tp-bg-elev) !important; color: var(--tp-text); } [data-theme="dark"] .solera-allocation-table thead th { background-color: var(--tp-bg-elev-2) !important; color: var(--tp-text); border-bottom-color: var(--tp-border) !important; } [data-theme="dark"] .solera-allocation-table thead th:hover { background-color: #3a3a3a !important; } [data-theme="dark"] .solera-allocation-table tbody tr:hover { background-color: rgba(255, 255, 255, 0.06) !important; } [data-theme="dark"] .solera-allocation-table tbody td { border-bottom-color: var(--tp-border) !important; color: var(--tp-text); } /* .modal-dialog-custom stays light — covered by the "Modals ALWAYS light" block above. No dark-mode override needed (removed deliberately). */ /* ========================================================================== Cards INSIDE modals must stay light too. The global [data-theme="dark"] .card rule (above) would otherwise darken them — visible on the Solera Allocation Job Details modal, where each field group (Assessor, Dates, Job Information, Repairer, …) is a .card. Card header is kept as the inline-styled light grey from the template. ========================================================================== */ [data-theme="dark"] .modal-content .card, [data-theme="dark"] .modal-content .card-body, [data-theme="dark"] .modal-dialog-custom .card, [data-theme="dark"] .modal-dialog-custom .card-body, [data-theme="dark"] .tapa-modal-body .card, [data-theme="dark"] .tapa-modal-body .card-body { background-color: #fff !important; color: #212529 !important; border-color: #dee2e6 !important; } [data-theme="dark"] .modal-content .card-header, [data-theme="dark"] .modal-dialog-custom .card-header, [data-theme="dark"] .tapa-modal-body .card-header { color: #212529 !important; border-bottom-color: #dee2e6 !important; } /* ========================================================================== Solera DB (solera.html) — .solera-table-container wrapper stays white by default; darken in dark mode so light body text is readable. Table surfaces inherit the global .table dark rules. ========================================================================== */ [data-theme="dark"] .solera-table-container { background: var(--tp-bg-elev) !important; color: var(--tp-text); } [data-theme="dark"] .solera-table thead th, [data-theme="dark"] .solera-jobs-table thead th { background-color: var(--tp-bg-elev-2) !important; color: var(--tp-text); border-bottom-color: var(--tp-border) !important; } [data-theme="dark"] .solera-table tbody tr:hover, [data-theme="dark"] .solera-jobs-table tbody tr:hover { background-color: rgba(255, 255, 255, 0.06) !important; } [data-theme="dark"] .solera-table tbody td, [data-theme="dark"] .solera-jobs-table tbody td { border-bottom-color: var(--tp-border) !important; color: var(--tp-text); } /* ========================================================================== Repairer Network (repairerNetwork.html) Same pattern — hardcoded-white container + table header strip. ========================================================================== */ [data-theme="dark"] .repairer-network-container { background: var(--tp-bg-elev) !important; color: var(--tp-text); } [data-theme="dark"] .repairer-network-container .australia-map-container, [data-theme="dark"] .repairer-network-container .state-filters-container { background: var(--tp-bg-elev-2) !important; } /* ========================================================================== Account page (account_modern.html) .profile-body is hardcoded white; darken and make sure form inputs and labels on it stay readable. ========================================================================== */ [data-theme="dark"] .profile-body { background: var(--tp-bg-elev) !important; color: var(--tp-text); } [data-theme="dark"] .profile-body .form-label, [data-theme="dark"] .profile-body .form-group label { color: var(--tp-text); } [data-theme="dark"] .profile-body .nav-pills { background: var(--tp-bg-elev-2) !important; } [data-theme="dark"] .profile-body .nav-pills .nav-link { color: var(--tp-text-muted); } [data-theme="dark"] .profile-body .nav-pills .nav-link:hover { background: #3a3a3a; color: var(--tp-text); }