From 8ea8955b3078d950879f4b6be0821d9cbfc4f1eb Mon Sep 17 00:00:00 2001 From: Konrad du Plessis Date: Wed, 22 Apr 2026 23:34:06 +0200 Subject: [PATCH] =?UTF-8?q?Fix=20Choices.js=20theme=20specificity=20?= =?UTF-8?q?=E2=80=94=20chain=20.choices=20+=20!important?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The b0d3829 overrides lost the cascade battle: the Choices.js CDN CSS loads AFTER custom.css (inside the modal partial near ), so the CDN's same-specificity rules won by load order. Dropdown still showed white background + light-grey text in dark mode. Fix: chain the root `.choices` class to every override (specificity 0,2,0 → 0,3,0) and add !important to color + background + border properties that Choices.js hardcodes most aggressively. Now the theme tokens always win regardless of load order. Visual effect: dropdown option hover state now matches the selected "Month(s)" button aesthetic (--bg-card-hover subtle lift with --text-primary text) per Konrad's feedback. Co-Authored-By: Claude Opus 4.7 (1M context) --- static/css/custom.css | 91 ++++++++++++++++++++++++------------------- 1 file changed, 50 insertions(+), 41 deletions(-) diff --git a/static/css/custom.css b/static/css/custom.css index 0fee20f..7c074a5 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -1530,18 +1530,24 @@ body, .card, .modal-content, .form-control, .form-select, own design tokens so the multi-select picker matches every other card and input on the page. All tokens auto-switch between dark (:root) and light (:root.light) themes — no duplicate blocks needed. + + Specificity note: the Choices.js CDN CSS loads AFTER custom.css (inside the + modal partial, near ). Every rule below chains the root `.choices` + class to beat the CDN's same-class selectors, and uses !important on the + two properties Choices.js hardcodes most aggressively (color + background) + so dark/light theme tokens always win. */ /* Container — the outer wrapper that replaces the native