/* ================================================================ vendor-theme.css — bridge Bootstrap into the BridgeX theme ---------------------------------------------------------------- MUST load AFTER bootstrap.min.css. Pair it with data-bs-theme on (set in _Layout.cshtml / _ThemeHead.cshtml / bridgexTheme.js). THE BUG THIS FIXES ------------------ Bootstrap 5.3 has its own dark mode, switched by data-bs-theme. We were only setting data-mode, which Bootstrap knows nothing about, so every Bootstrap component stayed in LIGHT mode on a dark page. The user dropdown was the visible symptom: near-black link text on a dark panel, with only .text-danger (Logout) readable. Setting data-bs-theme="dark" alone would fix the contrast but paint Bootstrap's own generic grey-blue palette. So we also re-point Bootstrap's tokens at ours — one palette, not two. ================================================================ */ /* Tells the browser itself which mode we are in, so NATIVE UI follows: scrollbars, date/colour pickers, autofill backgrounds and default form control chrome. Without it those stay light on a dark page. */ :root { color-scheme: light; } :root[data-mode="dark"] { color-scheme: dark; } :root { /* ── Core surfaces & text ──────────────────────────────────── */ --bs-body-bg: var(--bx-canvas); --bs-body-bg-rgb: var(--bx-shadow-rgb); --bs-body-color: var(--bx-text); --bs-secondary-color: var(--bx-text-muted); --bs-tertiary-color: var(--bx-text-subtle); --bs-secondary-bg: var(--bx-surface-2); --bs-tertiary-bg: var(--bx-surface-3); --bs-emphasis-color: var(--bx-text); --bs-border-color: var(--bx-border); --bs-border-color-translucent: var(--bx-border); --bs-border-radius: var(--bx-radius-md); --bs-border-radius-sm: var(--bx-radius-sm); --bs-border-radius-lg: var(--bx-radius-lg); /* ── Accent ────────────────────────────────────────────────── */ --bs-primary: var(--bx-accent); --bs-primary-rgb: var(--bx-accent-rgb); --bs-link-color: var(--bx-accent-text); --bs-link-hover-color: var(--bx-accent-active); --bs-link-color-rgb: var(--bx-accent-rgb); /* ── Status ────────────────────────────────────────────────── */ --bs-success: var(--bx-success); --bs-success-rgb: var(--bx-success-rgb); --bs-warning: var(--bx-warning); --bs-warning-rgb: var(--bx-warning-rgb); --bs-danger: var(--bx-danger); --bs-danger-rgb: var(--bx-danger-rgb); --bs-info: var(--bx-info); --bs-info-rgb: var(--bx-info-rgb); /* ── Dropdown — the component that exposed the bug ─────────── */ --bs-dropdown-bg: var(--bx-surface); --bs-dropdown-color: var(--bx-text); --bs-dropdown-border-color: var(--bx-border); --bs-dropdown-link-color: var(--bx-text); --bs-dropdown-link-hover-color: var(--bx-accent-text); --bs-dropdown-link-hover-bg: var(--bx-accent-soft); --bs-dropdown-link-active-color: var(--bx-on-fill); --bs-dropdown-link-active-bg: var(--bx-accent); --bs-dropdown-link-disabled-color: var(--bx-text-subtle); --bs-dropdown-header-color: var(--bx-text-muted); --bs-dropdown-divider-bg: var(--bx-border); /* ── Modal / offcanvas ─────────────────────────────────────── */ --bs-modal-bg: var(--bx-surface); --bs-modal-color: var(--bx-text); --bs-modal-border-color: var(--bx-border); --bs-modal-header-border-color: var(--bx-border); --bs-modal-footer-border-color: var(--bx-border); --bs-offcanvas-bg: var(--bx-surface); --bs-offcanvas-color: var(--bx-text); --bs-offcanvas-border-color: var(--bx-border); /* ── Cards, tables, list groups ────────────────────────────── */ --bs-card-bg: var(--bx-surface); --bs-card-color: var(--bx-text); --bs-card-border-color: var(--bx-border); --bs-table-bg: var(--bx-surface); --bs-table-color: var(--bx-text); --bs-table-border-color: var(--bx-border); --bs-table-striped-bg: var(--bx-surface-2); --bs-table-hover-bg: var(--bx-accent-soft); --bs-list-group-bg: var(--bx-surface); --bs-list-group-color: var(--bx-text); --bs-list-group-border-color: var(--bx-border); /* ── Tooltip / popover ─────────────────────────────────────── */ --bs-tooltip-bg: var(--bx-ink); --bs-tooltip-color: var(--bx-on-fill); --bs-popover-bg: var(--bx-surface); --bs-popover-body-color: var(--bx-text); --bs-popover-border-color: var(--bx-border); --bs-popover-header-bg: var(--bx-surface-2); } /* ── FORM CONTROLS ──────────────────────────────────────────────── Bootstrap sets these on the element, not through a token, so they need real rules. Without this, inputs stay white-on-white in dark. */ .form-control, .form-select, .input-group-text { background-color: var(--bx-surface); border-color: var(--bx-border); color: var(--bx-text); } .form-control:focus, .form-select:focus { background-color: var(--bx-surface); border-color: var(--bx-accent); color: var(--bx-text); box-shadow: 0 0 0 3px rgba(var(--bx-accent-rgb),.15); } .form-control::placeholder { color: var(--bx-text-subtle); } .form-check-input { background-color: var(--bx-surface); border-color: var(--bx-border-strong); } .form-check-input:checked { background-color: var(--bx-accent); border-color: var(--bx-accent); } /* The close button is a background-image SVG with a baked-in dark fill, so on a dark panel it becomes an invisible smudge. Invert it. */ :root[data-mode="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ── DROPDOWN SAFETY NET ────────────────────────────────────────── The user menu carries .ef-user-dropdown, whose own rules are more specific than Bootstrap's tokens. Keep them aligned so the panel and its items can never drift apart again. */ .dropdown-menu { background-color: var(--bx-surface); border-color: var(--bx-border); color: var(--bx-text); box-shadow: var(--bx-shadow-card-hover); } .dropdown-item { color: var(--bx-text); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--bx-accent-soft); color: var(--bx-accent-text); } .dropdown-divider { border-top-color: var(--bx-border); } /* ── TOASTR ─────────────────────────────────────────────────────── toastr ships fixed hex backgrounds; only the text needs rescuing so its status colours stay recognisable. */ #toast-container > div { box-shadow: var(--bx-shadow-card-hover); }