From e227182fe2e75023f94d2cbc6b7e85631f33a548 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20G=C3=B6pel?= Date: Sat, 18 Jul 2026 00:39:56 +0800 Subject: [PATCH 1/2] fix: dark-mode hover on Radzen listbox items is unreadable MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The listbox-item hover rule lost a specificity contest to Radzen's material-base, whose selector doubles the pseudo-class and adds a :not() (`.rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover`). Our plain `.rz-listbox-item:hover` is less specific, so in dark mode the light base-theme hover colour won — dark text on a near-white row, effectively invisible. Visible anywhere a RadzenListBox is used (e.g. the user/role assignment dialogs). Match Radzen's selector exactly; since this layer loads after material-base, equal specificity resolves in our favour on source order. --- src/AndreGoepel.Design.Blazor/wwwroot/css/design.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/AndreGoepel.Design.Blazor/wwwroot/css/design.css b/src/AndreGoepel.Design.Blazor/wwwroot/css/design.css index 49cfbc6..8615354 100644 --- a/src/AndreGoepel.Design.Blazor/wwwroot/css/design.css +++ b/src/AndreGoepel.Design.Blazor/wwwroot/css/design.css @@ -261,7 +261,13 @@ h4:focus-visible, h5:focus-visible, h6:focus-visible { color: var(--ag-text2); } -.rz-listbox .rz-listbox-item:hover { +/* Radzen's material-base hover rule is + `.rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover` — the doubled + `:hover` and the `:not()` are a deliberate specificity bump. A plain + `.rz-listbox-item:hover` loses to it, leaving the light base-theme hover colour in + dark mode (unreadable dark text on a light row). Match the selector exactly so this + layer — loaded after material-base — wins on source order. */ +.rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover { background: var(--ag-hover); color: var(--ag-text); } From fd937c81a83cdc75da9bffd866d6052f0d84fef2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20G=C3=B6pel?= Date: Sat, 18 Jul 2026 00:43:56 +0800 Subject: [PATCH 2/2] fix: remap the base and grid-stripe tokens leaking light theme into dark mode MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit design.css remaps most Radzen tokens but missed a few, so the components using them kept Radzen's light-theme defaults on the dark shell: - --rz-base / --rz-on-base back ButtonStyle.Base — used by DialogService.Confirm's Cancel button — so every confirm dialog showed one white button. - --rz-base-200 backs BadgeStyle.Light; unmapped it paired a light background with the remapped near-white text (~1.2:1 contrast, unreadable). - --rz-grid-stripe-* left every second data-grid row white. Map them through the same --ag-* tokens as the rest of the block, so light mode stays correct automatically. Closes #4. --- src/AndreGoepel.Design.Blazor/wwwroot/css/design.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/AndreGoepel.Design.Blazor/wwwroot/css/design.css b/src/AndreGoepel.Design.Blazor/wwwroot/css/design.css index 8615354..590a4b6 100644 --- a/src/AndreGoepel.Design.Blazor/wwwroot/css/design.css +++ b/src/AndreGoepel.Design.Blazor/wwwroot/css/design.css @@ -102,14 +102,24 @@ /* borders */ --rz-border-color: var(--ag-border); --rz-base-300: var(--ag-border); + /* Neutral base ramp — Radzen's light defaults otherwise leak into the dark shell: + --rz-base / --rz-on-base back ButtonStyle.Base (which DialogService.Confirm uses for + its Cancel button) and --rz-base-200 backs BadgeStyle.Light (measured 1.2:1 contrast + unmapped). Keep 200 a step below the already-mapped 300 (#4). */ + --rz-base-200: var(--ag-hover); + --rz-base: var(--ag-hover); + --rz-on-base: var(--ag-text); --rz-input-border-color: var(--ag-border2); --rz-input-disabled-background: var(--ag-hover); --rz-border-radius: 6px; --rz-card-border-radius: 10px; - /* data grid surfaces (Radzen defaults are white — break dark mode row hover) */ + /* data grid surfaces (Radzen defaults are white — break dark mode row hover and the + striped-row background, which otherwise alternates to Radzen's light default) (#4) */ --rz-grid-background-color: var(--ag-surface); --rz-grid-hover-background-color: var(--ag-hover); + --rz-grid-stripe-background-color: var(--ag-hover); + --rz-grid-stripe-odd-background-color: var(--ag-surface); /* status colours */ --rz-success: var(--ag-accent);