Text color

[nashaden]

Hi. First of all I must say that this card of yours is the reason why I finally started redesigning my mobile dashboard. Up till now I've been using mushroom cards. Anyway, is it possible to change the color of the texts displayed on the card, like the values of the sensors and the area name? I know the texts change from white to black when using either dark or light mode, but I am not a big fan of dark mode and unfortunately in light mode the text is black which does not look good on most pictures used as card's background.

[LesTR]

Hi @nashaden, sorry for the late reply, for some reason, I was not notified.

Yes, there was an issue with the light mode. It should be fixed, but it uses the general template variables. Example:

I agree, it can look bad when there is some picture, for example:

There was some discussion in issue-216, and I added some new options in the linked PRs. That means you can now use, for example, style.color: white, here is the output:

You can set it on the card level:

type: custom:better-minimalistic-area-card
title: Bathroom
area: bathroom
image: /local/images/bart.jpg
hide_unavailable: false
show_area_icon: true
shadow: true
force_dialog: false
style:
  color: white

or globally via CSS template variable --ha-better-minimalistic-area-card-color.

It can be specified more granularly via:

• --ha-better-minimalistic-area-card-color - configure color for text, sensors, buttons and state values
• --ha-better-minimalistic-area-card-sensors-color - configure color for sensors and state values in the sensor area
• --ha-better-minimalistic-area-card-buttons-color - configure color for buttons and state values in the button area
• --ha-better-minimalistic-area-card-shadow-color - configure color of shadow (when enabled)

Or on the card level via:

style:
    color: red # Override the color for text and icons (optional)
    sensors_color: blue #Override the color for sensors (optional)
    buttons_color: blue #Override the color for buttons (optional)
    background_color: yellow # a color name, rgb hex or rgba function when an image is not provided (optional)
    shadow_color: grey # a color name, rgb hex or rgba function for shadow when enabled

Feel free to let me know if you have any questions or suggestions for improvement.