i can change the color in devtoolsā¦
but dont know how to use it in my code
Hi there!
I have a bunch of temperature sensors that show āHotā, āColdā or āOKā based on the room temperature.
I want to diplay these in a history graph with the bar color being red for āHotā, blue for āColdā and green for āOKā. How would I go about doing this?
Thank you kindly!
type: history-graph
entities:
- sun.sun
card_mod:
style: |
ha-card {
--state-sun-above_horizon-color: red;
--state-sun-below_horizon-color: violet;
}
Update: unfortunately, theme vars are not supported for āsensorā domain:
So, this method will not work.
2 Likes
Most probably not solvable (without following problems) via card-mod, but does anyone knows, how to set the variable
ācontrol-select-background
from the thermostat card?
Ofc I can set it in card_mod and I can try to unset the transitions, ā¦ but because of loading order, card-mod ingestion, ā¦ I do not get it to work without transition.
So I thought to set it in the theme, but it does not work. Because it is set to inactive color in the card, I think hard-coded.
So, long story short, any chance to get --control-select-background in another color (without the transition problem), that is the background color of the hvac box.
Or to modify or better copy and change the inbuild thermostat card, ā¦? E.g. Same way as for inbuild integrations? Or ā¦
May be I am missing smth - but see no transitions neither on loading a view nor on switching modes:
type: thermostat
entity: climate.ecobee
features:
- type: climate-hvac-modes
card_mod:
style:
hui-card-features $ hui-climate-hvac-modes-card-feature $: |
ha-control-select {
--control-select-background: red;
}
1 Like
Havenāt looked at your request in detail.
type: thermostat
entity: climate.living_room
card_mod:
style:
ha-state-control-climate-temperature:
$: |
.icon-button {padding: 10px;}
.label ha-svg-icon { color: red !important; }
.target-button { color: red !important; }
.label:nth-of-type(1) { color: yellow !important; }
.label:nth-of-type(2) { color: cyan !important; }
.target-button:nth-of-type(1) { color: lime !important; }
.target-button:nth-of-type(2) { color: blue !important; }
.buttons ha-outlined-icon-button:nth-of-type(1) {
--md-sys-color-outline:purple !important;}
.buttons ha-outlined-icon-button:nth-of-type(2)
{--md-sys-color-outline:lime !important; }
ha-state-control-climate-temperature$:
ha-control-circular-slider$: |
.high {stroke: red !important; opacity: 1 !important;
}
.low { stroke: blue !important;
opacity: 1 !important;
}
.arc { stroke-width: 10px !important;}
.background {
stroke: pink !important;
opacity: 1 !important;
stroke-width: 10px !important;}
.target-button { color: red !important; }
.: |
.title {
font-size: 14px !important;
color: cyan !important;
text-align: left !important;
background: #262626 !important;
}
ha-card {
background: black !important;
}
Unfortunately your is already better then mine, via host variable or direct background e.g.
type: thermostat
entity: climate.klimaanlage_schlafzimmer
features:
- type: climate-hvac-modes
hvac_modes:
- cool
- heat
- 'off'
card_mod:
style:
hui-card-features:
$:
hui-climate-hvac-modes-card-feature:
$:
ha-control-select:
$: >
:host {
--control-select-background: red !important;
}
.container::before {
background: blue !important;
}
div::before {
transition: background 5s !important;
}
where you can see (extended transition here to 5s) that there is a transition.
Most probably less or esp. more visible depending on number of card-mods on the page, complexity of the page, browser speed, ā¦ but there is and currently I cannot unset the transition completely here, because card mod has to be loaded and applied and then the transition starts.
But yes, yours is already better than mine. Thx.And perhaps you are right and what I expect to see as still transition in your way is only the load order flickering. Iāll see.
To set the variable of the framework somewhere in theme or code modification is not possible, is it?
yes, using the same on the preset-modes card:
type: tile
card_mod:
style:
hui-card-features $ hui-climate-preset-modes-card-feature $: |
ha-control-select {
--control-select-background: skyblue;
}
.: |
ha-card {
--primary-text-color: var(--primary-color);
}
can also add the --control-select-color: red; there to get:
which is ugly ofc, and only for illustrating purposes
btw, we can also use
background: skyblue;
color: yellow; #color the non selected icons on the buttons
that background is the full color, not the filtered --control-select-background, might be useful.
the control number buttons:
card_mod:
style:
hui-card-features $ hui-target-temperature-card-feature $: |
ha-control-number-buttons {
color: green;
--control-number-buttons-background-color: skyblue;
}
there are more variables to play with, at least this show a direct path to touch them:
But it is not reducing the load order flickering or perhaps transition here as well.
For me the āproblemā is, that I cannot set this variable on top of the page or in theme, because it is hard-coded to
ācontrol-select-background: var(ādisabled-color)
in the card. So I am searching a way to set this variable āsomewhereā, where it is applied directly everywhere. But I think it is not possible because of the line above.
I see, yes, sorry to hear you have a bad UX on that. Not seeing real trouble in my dashboard, though I admit, the mod is not applied directly upon reload, it needs a very short time to kick in.
not on revisiting though, I believe it then is immediate No it is notā¦ especially not after changing dashboards in the left side menu and returning to the view with the slider/buttons, I can see a very clear transition from the theme colors to the modded color.
wonder if a card-mod-theme setting like:
card-mod-glance: |
:host {
transition: none !important;
}
could help somehow, ofc adapted for these specific cards? Not sure I see any difference tbh, setting that to a card-mod-tile ā¦
Strange, pasted my code on a test view with plenty of card-modded cards - still no transition.
Do not think this is possible due to that assignment to ādisabledā color you mentioned.
As said, can be that it is only load-order-later-apply-flickering and no transition with your way.
But try to open it in a browser-mod pupup. There it is more obvious, because not cached and loaded on top of the dom every time again.
Or see it better with
hui-card-features $ hui-climate-hvac-modes-card-feature $: |
ha-control-select {
--control-select-background: none;
--state-climate-off-color: #414141;
--state-climate-cool-color: #414141;
}
So with off and cool color as well. Even later applied and with transition.
Or my other question: Do you have an idea to have these other colors working without transition as well, because the switching off of the transition is too late as well because of loading time and order ā¦
Hi there,
I have few cards with many chips on them. Iād like to change the icon within the chip based on a state of the respective entity. I found out I can change the icon like this:
card_mod: style: hui-buttons-base $: | ha-assist-chip { state-badge { --card-mod-icon: mdi:lightbulb-outline; }
I do now know how to insert a general condition thatāll apply for all chips by referencing the respective entity. I am talking about something like this:
{{ if is_state(āconfig.entityā, āonā),āmdi:lightbulbā,āmdi:lightbulb-outlineā);
If someone could give me a short hint in the proper direction that would be awesome. thx
Best regards
To customize an icon of a particular chip:
type: entities
entities:
- type: buttons
entities:
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
card_mod:
style:
hui-buttons-base $: |
ha-assist-chip:nth-child(3) {
--card-mod-icon: mdi:car;
}
But in general customizing an icon for an entity should be done on a āserver sideā, not in UI.
Assume this is a binary sensor - then itās icon depends on itās device_class.
Another example - a template sensor/binary_sensor: icon may be defined in the template.
For a āstatic customizationā - ācustomizeā can be used.
Ofc in many cases an icon cannot be customized dynamically on the āserver sideā; then yes, use card-mod or similar frontend-based waysā¦
Hi there. Maybe someone can tell me how card_mod can completely hide the action button that I named with āonā. There should be nothing there and no action should be performed when I click there.
type: custom:auto-entities
card:
type: entities
show_header_toggle: false
filter:
include:
- entity_id: scene.*
state: 'on'
options:
action_name: 'on'
secondary_info: last-changed
sort:
method: friendly_name
reverse: false
show_empty: false
Hello @Ildar_Gabdullin,
I know that in general customisation of icons should be done as you describe and this is also how I do it.
I want to change the icon based on state though, which I know how to do for a particular chip. I was wandering if there is an easier way than defining an if-then for each entity. Is there?
Assume you have 100500 cards with chip buttons.
Do you mean that some if these card have a chip button for sensor.xyz - and you need to specify a style for this chip button in ONE place - and then see it applied everywhere?
Hello @Ildar_Gabdullin,
Yes, that was the idea. There are around 40 chips, each for one switch and Iād like to define in one place that if a particular switch is on the icon of the corresponding chip is changed. Is this possit?
Thx,
Zavjah
A switch entityās icon has some default colors for on & off.
Do you wish to change them?
Only for chip buttons, not for other places?
For all cards? Or for some particular card?
Read this also.