/* Dark mode. One switch: `data-bs-theme="light"|"dark"` on , set before the first paint by the inline script in wsgi.py's index_string and flipped by the toggle in nav.py. Bootstrap 5.3 reads that attribute natively, so dbc.Button / dbc.Popover / dbc.Alert re-theme themselves and `color-scheme` re-themes native form controls and scrollbars. Everything this app styles itself is an inline `style={...}` dict in Python, which no stylesheet can override. So those dicts reference the tokens below as var(--token) instead of hardcoding colours -- see theme.py. The light values are exactly what the pages used before dark mode existed, so light mode is unchanged. Ordering note: dash_core_components.js injects react-select's stylesheet into at runtime, i.e. after this file. Scoping every dark rule under [data-bs-theme="dark"] raises specificity above it, so those overrides win regardless of source order. */ :root { /* Bootstrap only declares color-scheme in its dark block; light-dark() below keys off it, so state it explicitly rather than lean on the `normal` initial value. */ color-scheme: light; /* Own the body colours outright rather than inherit Bootstrap's dark block. Only Bootstrap >= 5.3 ships [data-bs-theme] at all, and dbc pins the Bootstrap it serves per release -- dbc 1.4 emits 5.2.3, which has no dark support. Leaning on it meant the background flipped (our override) while the text colour did not (Bootstrap's), i.e. near-black text on a dark ground. These light values equal Bootstrap's own, so light mode is unchanged. */ --bs-body-bg: #ffffff; --bs-body-color: #212529; --link: #0d6efd; --surface-raised: #ffffff; --border-subtle: #dee2e6; --brand: #1376e0; --on-brand: #ffffff; --fg-strong: #222; --fg-muted: #444; --fg-soft: #555; --fg-faint: #777; --fg-dim: #888; --fg-fainter: #999; --surface-2: #f0f0f0; --rule: rgba(0, 0, 0, .18); --warn-fg: #8a6d3b; --danger-fg: #a00; --logo-filter: none; } [data-bs-theme="dark"] { color-scheme: dark; /* A soft dark, a little below Bootstrap 5.3's own #212529. */ --bs-body-bg: #1a1d21; --bs-body-color: #dee2e6; --link: #6ea8fe; --surface-raised: #262b31; --border-subtle: #495057; --brand: #4a9eff; --on-brand: #0d1117; --fg-strong: #f2f4f6; --fg-muted: #ccd2d8; --fg-soft: #bfc5cb; --fg-faint: #9aa0a7; --fg-dim: #929aa1; --fg-fainter: #8a9199; --surface-2: #2b3035; --rule: rgba(255, 255, 255, .16); --warn-fg: #e0b872; --danger-fg: #ff7b72; --logo-filter: brightness(.85); } /* Paint the page from our own tokens. Bootstrap's `body` rule reads the same two variables, but only 5.3+ redefines them per theme -- doing it here means the theme holds whatever Bootstrap dbc happens to serve. assets/ is linked after external_stylesheets, so this wins on source order. */ body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } /* Below: what Bootstrap 5.3 would have re-themed for us, done explicitly so the page is also correct on the 5.2.x that older dash-bootstrap-components releases serve. All of it is scoped to the dark attribute, so light mode is untouched either way. */ [data-bs-theme="dark"] a { color: var(--link); } [data-bs-theme="dark"] .popover { --bs-popover-bg: var(--surface-raised); --bs-popover-header-bg: var(--surface-raised); --bs-popover-body-color: var(--bs-body-color); --bs-popover-header-color: var(--bs-body-color); --bs-popover-border-color: var(--border-subtle); background-color: var(--surface-raised); border-color: var(--border-subtle); color: var(--bs-body-color); } [data-bs-theme="dark"] .popover .popover-body, [data-bs-theme="dark"] .popover .popover-header { background-color: var(--surface-raised); color: var(--bs-body-color); } /* The arrow is drawn with borders, so it needs the surface colour too. */ [data-bs-theme="dark"] .popover .popover-arrow::after { border-top-color: var(--surface-raised); border-bottom-color: var(--surface-raised); border-left-color: var(--surface-raised); border-right-color: var(--surface-raised); } [data-bs-theme="dark"] hr { border-top-color: var(--rule); color: inherit; } /* ---- the toggle ------------------------------------------------------------------- */ .theme-toggle { background: none; border: 1px solid var(--rule); border-radius: 999px; color: var(--bs-body-color); cursor: pointer; font-size: 17px; line-height: 1; margin: 10px; padding: 5px 11px; vertical-align: middle; } .theme-toggle:hover { border-color: var(--brand); } /* The icon follows the attribute, so flipping the theme needs no callback round-trip. */ .theme-toggle .theme-icon-dark, [data-bs-theme="dark"] .theme-toggle .theme-icon-light { display: none; } [data-bs-theme="dark"] .theme-toggle .theme-icon-dark { display: inline; } /* ---- odds and ends ---------------------------------------------------------------- */ .site-logo { filter: var(--logo-filter); } /* hebrew.py separates results with these; they were an inert style={'class': 'dotted'}. */ hr.result-rule { border: 0; border-top: 1px dotted var(--rule); opacity: 1; } /* ---- dcc.Dropdown (react-select, not Bootstrap) ----------------------------------- */ [data-bs-theme="dark"] .Select-control, [data-bs-theme="dark"] .is-open > .Select-control { background: #23282e; border-color: #3a4148; color: var(--bs-body-color); } [data-bs-theme="dark"] .Select-menu-outer { background-color: #23282e; border-color: #3a4148; border-top-color: #2f363d; } [data-bs-theme="dark"] .Select-option { background-color: #23282e; color: var(--fg-muted); } [data-bs-theme="dark"] .Select-option.is-focused { background-color: #30373f; color: var(--bs-body-color); } [data-bs-theme="dark"] .Select-option.is-selected { background-color: #2a3138; color: var(--bs-body-color); } [data-bs-theme="dark"] .Select-noresults { background-color: #23282e; color: var(--fg-faint); } /* Beats .has-value.Select--single>.Select-control .Select-value .Select-value-label */ [data-bs-theme="dark"] .has-value.Select--single > .Select-control .Select-value .Select-value-label, [data-bs-theme="dark"] .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label { color: var(--bs-body-color); } [data-bs-theme="dark"] .Select-placeholder, [data-bs-theme="dark"] .Select-input > input { color: var(--fg-faint); } [data-bs-theme="dark"] .Select-arrow { border-top-color: var(--fg-faint); } [data-bs-theme="dark"] .Select-arrow-zone:hover > .Select-arrow, [data-bs-theme="dark"] .is-open .Select-arrow { border-top-color: var(--bs-body-color); } [data-bs-theme="dark"] .is-open > .Select-control .Select-arrow { border-bottom-color: var(--bs-body-color); } [data-bs-theme="dark"] .is-focused:not(.is-open) > .Select-control { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(74, 158, 255, .15); }