Icon color change beta 2.5.0-beta.6

[Claeysjens]

Describe the bug
Icon color change

Screenshots

• Bubble Card version: [2.5.0-Beta 6]

Hey, the new beta has changed some of the icon colors on my dashboard.
If I roll back to Beta 5, the icon colors will return to normal.

Thank you!

[Clooos]

Hi, do you have some custom styles applied to these cards?

[Claeysjens]

Hi, do you have some custom styles applied to these cards?

Hello,

See below the custom style for the kitchen as an example.

styles: >-

.bubble-sub-button-1 > ha-icon {
color: ${hass.states['media_player.luidspreker_keuken'].state === 'playing' ? 'dodgerblue' : 'grey'} !important;
}

.bubble-sub-button-2 > ha-icon {
color: deepskyblue !important;
}

.bubble-sub-button-3 {
animation: ${parseFloat(hass.states['sensor.keuken_airflow_ventilation_rate'].state) > 10.0 ? 'slow-rotate 2s linear infinite' : 'none'};
}

.bubble-sub-button-3 > ha-icon {
color: mediumseagreen !important;
}

@Keyframes slow-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

${card.querySelector('.bubble-state').innerText =
parseFloat(hass.states['sensor.temperatuur_beneden'].state).toFixed(1) +
"°C"};

.bubble-icon-container::after {
border-radius: 100%;
}

.bubble-icon-container {
overflow: visible !important;
}

.bubble-entity-picture {
border-radius: var(--bubble-icon-border-radius, var(--bubble-border-radius, 50%));
}

// Edited, content from Patreon.

[Clooos]

Well, I don't see anything that modify the main icon, but this lines were misplaced, adding these in the middle of your styles was probably blocking the code below it, in v2.4.0 only. In v2.5.0 these templates can be placed anywhere, so this is the normal behavior of your custom styles. Remove everything and start fresh to see where the issue is.

${card.querySelector('.bubble-state').innerText =
parseFloat(hass.states['sensor.temperatuur_beneden'].state).toFixed(1) +
"°C"};

[Claeysjens]

Well, I don't see anything that modify the main icon, but this lines were misplaced, adding these in the middle of your styles was probably blocking the code below it, in v2.4.0 only. In v2.5.0 these templates can be placed anywhere, so this is the normal behavior of your custom styles. Remove everything and start fresh to see where the issue is.

${card.querySelector('.bubble-state').innerText =
parseFloat(hass.states['sensor.temperatuur_beneden'].state).toFixed(1) +
"°C"};

Thank you for your response. I cleared the entire custom styles, but the icon still looks different than expected. However, I now see that when the lighting is on, the icons I thought were correct are actually the wrong ones. They appear to be dimmed.
In the meantime, I see that there is already a Beta 7, but the problem persists.

[Claeysjens]

Well, I don't see anything that modify the main icon, but this lines were misplaced, adding these in the middle of your styles was probably blocking the code below it, in v2.4.0 only. In v2.5.0 these templates can be placed anywhere, so this is the normal behavior of your custom styles. Remove everything and start fresh to see where the issue is.
${card.querySelector('.bubble-state').innerText =
parseFloat(hass.states['sensor.temperatuur_beneden'].state).toFixed(1) +
"°C"};

Thank you for your response. I cleared the entire custom styles, but the icon still looks different than expected. However, I now see that when the lighting is on, the icons I thought were correct are actually the wrong ones. They appear to be dimmed. In the meantime, I see that there is already a Beta 7, but the problem persists.

Hello, I started completely over with one of the icons that was dimmed, and when adding a third sub-button, the icon jumps to a dimmed state. I tried this on a different card where I only had one sub-button, and with certain entities, the icon switches to a dimmed state.

It's working fine with this entity.

But not with this one.

Maybe this information can help you further?

[Clooos]

I will check that, thank you for the details!

[CZonin]

@Clooos Seeing the same issue on my end with beta.6 + beta.7.

Notice the icons for "Main Lights" and "Living Room". Previously all of the icons were grey when disabled like the "Main Lights" icon still is. After the update a lot of icons became brighter like "Living Room".

[Paoloc66]

I also have a similar problem of darkened icon.
I noticed that based on the type of entity inserted in the last sub button the main icon darkens or not.
Or even if the last entity is a light and it turns on then the main icon becomes less dark

[EnderSurge]

Can confirm I have the same issue on v2.5.0-beta.7

The only solution I’ve found is to add another sub button of an entity that is always enabled (in my case a climate entity), then add a visibility condition that is never true, so the sub button is always hidden. I use a blank entity state condition.

This could indicate that the main icon’s brightness is affected by a sub button entity’s state.

[Paoloc66]

in reality it is much simpler.
Just add another sub button but without associating any entity to it, and then obviously do not display the icon

[EnderSurge]

I’m not sure how to add a sub button without associating any entity, as it defaults to the card entity. Also, if I just hide the sub button icon and background, it is still there and can be tapped/clicked, just not visible.

In another case, I have a state bubble card pointing at the weather forecast which has a dimmed icon without adding any sub buttons. The only way to brighten the icon again is by adding an entity that is “on” e.g. climate entity

[Clooos]

This will be fixed in the next release, don't worry 🙂