search

Clooos / Bubble-Card

Bubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch.
MIT License
2k stars 58 forks source link

v2.3.0-beta.7 Temperature selector text not colored (maybe a bug?) #941

Closed flz closed 2 days ago

flz commented 3 days ago

Describe the bug

Thermostat target temperatures are only colored when heat_cool mode is selected. When mode is set to heat or cool, the text remains white.

Expected behavior

Expecting target low temperature to be orange and target high temperature to be blue regardless of mode.

Screenshots

Screenshot 2024-11-18 at 7 15 50 PM

Informations (please complete the following information):

flz commented 3 days ago

Thanks for your support! Apologies for adding yet another issue to your release backlog :-)

Clooos commented 2 days ago

Hi! This is the expected behavior but I hesitate for that, since there is only one value displayed, it makes more sense when there are two values.

What do you think?

flz commented 2 days ago

I figured it might be by design. It looks odd and might be harder to reason with in this case since the low target temp of Downstairs aligns with the high target temp from Upstairs.

Your call ultimately. An option could be nice?

Clooos commented 2 days ago

I still don't know, the issue is that in some entities I can't be sure of what type of device it is (AC or heater), so I can't define a color by default. But it is easy to modify it with just a single line in the custom styles section.

flz commented 2 days ago

I've tried to change it using styles but haven't figured it out yet. If you can suggest how to do it, that would be great :-)

Clooos commented 2 days ago

You can just add this for heater:

.bubble-temperature-display {
  color: var(--state-climate-heat-color);
}

And this for AC:

.bubble-temperature-display {
  color: var(--state-climate-cool-color);
}

I will close this, but don't hesitate to ask if you have more questions 🙂

flz commented 1 day ago

Thanks, I'll just comment here what I ended up with since your snippet assumed different entities for heater and AC while I wanted the text color to change based on current mode:

.bubble-temperature-display {
  color: ${state === "heat" ? "var(--state-climate-heat-color)" : "var(--state-climate-cool-color)" }
}

Thanks for your help!

Clooos commented 1 day ago

Even better, thanks for sharing this! 👌