Skip to content

fix(ui): make module cards follow the HA theme in light and dark mode - #6

Open
Optic00 wants to merge 1 commit into
TimWeyand:mainfrom
Optic00:fix/dark-mode-theme-vars
Open

fix(ui): make module cards follow the HA theme in light and dark mode#6
Optic00 wants to merge 1 commit into
TimWeyand:mainfrom
Optic00:fix/dark-mode-theme-vars

Conversation

@Optic00

@Optic00 Optic00 commented Jul 18, 2026

Copy link
Copy Markdown

Summary

The BMS module cards were hardcoded to a light look (/* White modules with dark text */: background:#fff, dark text, light borders). On dark dashboards they rendered as white boxes while the header and the page follow the active theme. This PR makes the module cards follow the Home Assistant theme in both light and dark mode:

  • Card background, text, borders and grid lines now use HA theme variables (--ha-card-background/--card-background-color, --primary-text-color, --divider-color), each with the previous hardcoded value as fallback. Theme variables inherit into the shadow roots, so no JS changes are needed.
  • Empty bar tracks (minimal view) and cell columns (detailed view) use a fixed mid-tone (rgba(127,127,127,.4)) that is visible on both light and dark cards. Previously they were pure white, which made them invisible on the white cards in light mode and glaring in dark mode.
  • The bar value label ("3362 mV") is now always white with a dark halo text-shadow, so it stays readable over the green/blue fill and over the mid-tone track in either theme. This also unifies the detailed and minimal variants, which previously had contradictory label colors.
  • The module name badge keeps its translucent scrim via color-mix on the themed card background (with the old rgba(255,255,255,.65) as a plain-CSS fallback for engines without color-mix).

The green/blue fill gradients and the header (which already follows its own fixed battery look in both themes) are unchanged.

Testing

  • Rendered the card standalone with mock data (5 modules, minimal + detailed view) under simulated HA light and dark theme variables via headless Chrome; verified cards blend with the page, all labels and values stay readable, and tracks are visible in both themes.
  • Deployed the built bundle to a live HA instance with a real BYD Battery Box (HVS, 5 modules) and verified the dashboard in dark mode.
  • npm run build regenerated the committed bundle (CI up-to-date check passes); node --check passes on the bundle.

Note: the light-mode appearance changes slightly on purpose - empty bar tracks are now a visible mid-gray instead of invisible white. The subtle hseg.max/bar.max history overlays (rgba(0,0,0,.08)) are left untouched; they were already near-invisible before and making them theme-aware is out of scope here.

The BMS module cards used hardcoded light colors (background:#fff,
dark text, light borders), so they rendered as white boxes on dark
dashboards while the header and page follow the active theme.

- card background, text, borders and grid lines now use the HA theme
  variables (--ha-card-background/--card-background-color,
  --primary-text-color, --divider-color) with the previous values as
  fallbacks
- empty bar tracks and cell columns use a fixed mid-tone
  (rgba(127,127,127,.4)) that is visible on both light and dark cards;
  previously they were pure white and invisible on white cards
- bar value text is now always white with a dark text shadow so it
  stays readable over the green/blue fill and the mid-tone track
- module name badge keeps a translucent scrim via color-mix on the
  themed card background
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant