/* ============================================================================== DARK MODE — framework class + per-instance signal handling ============================================================================== Sets `color-scheme` on the host when the consumer signals dark/light via a framework class (signal #4) or a per-instance attribute (signal #5). Every `--ms-*` color in variables.css resolves through `light-dark(, )`, so flipping `color-scheme` on the host picks the correct branch without us touching any `--base-*` value. Why we don't override `--base-*` here: Setting e.g. `--base-input-bg: #1a1a1a` on `:host` shadows the consumer's `:root { --base-input-bg: ... }` for resolution inside the shadow root, so their themed value (e.g. pure-admin's #163768) would be silently replaced by our hardcoded default. Setting `color-scheme` instead leaves the consumer's `--base-*` chain intact — they remain the source of truth, and we only pick the dark branch of our own fallbacks. Why `color-scheme` on `:host` is fine *here* (but not in variables.css): variables.css avoids it because an unconditional declaration would override whatever the consumer's //ancestor set. Here we declare it only when the consumer's own signal matches, so we're amplifying their intent rather than fighting it. Frameworks that already set `color-scheme` alongside their class (Bootstrap 5.3+) get a redundant no-op; frameworks that don't (Tailwind `.dark`, hand-rolled toggles) get filled in. Signals handled: #4 Framework theme class on an ancestor — `:host-context([data-theme="dark"])`, `:host-context([data-bs-theme="dark"])`, `:host-context(.dark)`. #5 Per-instance attribute on the host — `:host([data-theme="dark"])`, `:host([data-theme="light"])`. Highest specificity, wins over any framework class on an ancestor. See [color-scheme.md](BlissFramework guidelines) for the full pattern. */ /* DARK — framework class on ancestor (signal #4) */ :host-context([data-theme="dark"]), :host-context([data-bs-theme="dark"]), :host-context(.dark) { color-scheme: dark; } /* LIGHT — framework class on ancestor (signal #4, safety net for "force one section back to light on a dark page"). */ :host-context([data-theme="light"]), :host-context([data-bs-theme="light"]), :host-context(.light) { color-scheme: light; } /* DARK — per-instance attribute on the host (signal #5). */ :host([data-theme="dark"]) { color-scheme: dark; } /* LIGHT — per-instance attribute on the host (signal #5). */ :host([data-theme="light"]) { color-scheme: light; }