fix(ui): make module cards follow the HA theme in light and dark mode - #6
Open
Optic00 wants to merge 1 commit into
Open
fix(ui): make module cards follow the HA theme in light and dark mode#6Optic00 wants to merge 1 commit into
Optic00 wants to merge 1 commit into
Conversation
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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:--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.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.color-mixon the themed card background (with the oldrgba(255,255,255,.65)as a plain-CSS fallback for engines withoutcolor-mix).The green/blue fill gradients and the header (which already follows its own fixed battery look in both themes) are unchanged.
Testing
npm run buildregenerated the committed bundle (CI up-to-date check passes);node --checkpasses 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.maxhistory 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.