Light/dark mode not consistent across cockpit pages and components #8

New issue

Open

opened 2026-05-25 16:23:25 +00:00 by mik-tf · 0 comments

mik-tf commented

2026-05-25 16:23:25 +00:00

Owner

Live repro at s158-shipped admin VM cockpit:

URL: https://hcockpit.gent01.qa.grid.tf/hero_cockpit/web/services
Visible at 2026-05-25: services dashboard is in dark mode but several inline elements (action icons in the Actions column, the Refresh chip, the green running pills) don’t pick up the dark-mode contrast that the rest of the page uses.

Likely root cause: not all cockpit components honor the data-bs-theme attribute or the equivalent dark-mode signal at the top of the document. Bootstrap-aware components should switch on data-bs-theme=\"dark\" per hero_ui_theme skill conventions; legacy or hand-rolled components may have hard-coded light-mode colors.

Fix candidates:

Audit every cockpit sub-component for data-bs-theme propagation (or the Bootstrap CSS-variables equivalent).
Replace hard-coded color literals with Bootstrap --bs-* tokens so any theme flip cascades.
Add a regression test that mounts each cockpit surface in both themes and visually diffs (or asserts the rendered chrome color matches the theme).

Severity: medium for s158 demo — cockpit IS usable in dark mode, but the polish gap is visible to any tester and erodes the "polished v1 demo" framing. Should land before home#235 closure if possible; if not, queued for the post-arc cockpit-roadmap sweep.

Surfaced during s158 admin-on-TFGrid live verify (operator observation from public-URL browser session).

The cockpit theme (light/dark) does not apply consistently across all surfaces. Some pages, sub-components, chips, and per-service action icons render with mismatched palettes — light-mode elements bleed into a dark-mode page (and vice versa), or remain stuck on the system default. Live repro at s158-shipped admin VM cockpit: - URL: https://hcockpit.gent01.qa.grid.tf/hero_cockpit/web/services - Visible at 2026-05-25: services dashboard is in dark mode but several inline elements (action icons in the Actions column, the Refresh chip, the green running pills) don’t pick up the dark-mode contrast that the rest of the page uses. Likely root cause: not all cockpit components honor the `data-bs-theme` attribute or the equivalent dark-mode signal at the top of the document. Bootstrap-aware components should switch on `data-bs-theme=\"dark\"` per `hero_ui_theme` skill conventions; legacy or hand-rolled components may have hard-coded light-mode colors. Fix candidates: - Audit every cockpit sub-component for `data-bs-theme` propagation (or the Bootstrap CSS-variables equivalent). - Replace hard-coded color literals with Bootstrap `--bs-*` tokens so any theme flip cascades. - Add a regression test that mounts each cockpit surface in both themes and visually diffs (or asserts the rendered chrome color matches the theme). Severity: medium for s158 demo — cockpit IS usable in dark mode, but the polish gap is visible to any tester and erodes the \"polished v1 demo\" framing. Should land before home#235 closure if possible; if not, queued for the post-arc cockpit-roadmap sweep. Surfaced during s158 admin-on-TFGrid live verify (operator observation from public-URL browser session).