Creating your own theme is overkill IMO.
Yeah, I definitely wouldn’t do that but I think there is a way to change the one code (maybe css?) for the icon color. Still not really the route I would like to go.
1 Like
Not correct for lights.
Assume we have lights in Entities:
type: entities
entities:
- light.hall_ceiling
- light.koridor_ceiling
- entity: light.kitchen_ceiling
card_mod:
style:
hui-generic-entity-row $:
state-badge $: |
ha-state-icon {
{% if is_state(config.entity,'off') %}
color: red !important;
{% endif %}
}
Repeat, this is an example for Entities.
As for minimalistic card particularly - this is up to Weston to find out…
Use Code Inspector to determine a path to your element.
P.s. Do not suggest to use this notation:
color:
{% if .... %}
black
{% else %}
red
{% endif %};
Use this:
{% if .... %}
color: black;
{% else %}
color: red;
{% endif %}
did you test:
style: |
:host {
--paper-item-icon-color:
{% set state = states(config.entity) %}
{% if state == 'off' %} black
{% else %} var(--primary-text-color)
{% endif %};
}
and adapt to your liking?
short version:
style: |
:host {
--paper-item-icon-color:
{% set state = states(config.entity) %}
{{'black' if state == 'off' else 'var(--primary-text-color)'}};
}
Is there a chance this is not supported by the minimalistic card?
My bad habbit of lazy computer scientist, the less I’m writing, the best 
Open Minim.card.
If you see ON lights of different colors → lights following their state (on/of) and their temperature/color/… - like in other HA places.
I see. I’m sorry, this is the first time I’ve ever done this.
…the harder people (incl. you after some time) will understand the code))
Try-fail-repeat-succeed)
100% agree
Below is what I have.
type: vertical-stack
cards:
- states:
- arm_home
- arm_away
- arm_night
type: alarm-panel
entity: alarm_control_panel.alarmo
name: Alarm
- type: grid
square: true
columns: 3
cards:
- type: custom:minimalistic-area-card
title: Back Patio
area: back_patio
shadow: true
hide_unavailable: true
state_color: true
darken: true
tap_action:
action: navigate
navigation_path: /dashboard-automatic/back-patio
entities:
- entity: light.all_back_patio_lights
- entity: switch.back_patio_fountain
- entity: switch.back_patio_speaker_power
- type: custom:minimalistic-area-card
title: Back Porch
area: back_porch
shadow: true
hide_unavailable: true
state_color: true
darken_image: true
tap_action:
action: navigate
navigation_path: /dashboard-automatic/back-porch
entities:
- entity: light.all_back_porch_lights
- entity: switch.back_porch_fountain
- entity: switch.back_porch_speaker_power
The light icons do seem to follow their actual colors in the physical world.
Means - you may use same method. But you need to find out a path to this element.
Use Code inspector, right mouse click on any bulb - an see what element is selected on the right panel. You need to define a property on a MINIMAL “depth level” - i.e. right there it is needed.
What is this? Trying to google it. I assume some sort of css or html reviewer? Is there a product you recommend?
Code Inspector - it is a name of this feature in Chrome.
In other browsers called differently.
In Chrome is opened by F12.
Oh, ok. I installed a cssviewer google chrome extension. I will use what you speak of.
This is the line that is highlighted when I right click on the icon we are speaking of:
<action-handler-minimalistic-area-card style="position: absolute; width: 50px; height: 50px; transform: translate(-50%, -50%); pointer-events: none; z-index: 999; left: 573px; top: 580px; display: none;"><mwc-ripple></mwc-ripple></action-handler-minimalistic-area-card>
EDIT:
But it looks like any icon I right click on, on the card highlights that same information.
Now point a mouse on a bulb and make right click.
Select Show in code inspector.
Which element is selected in a tree on the right panel?
Keep trying and do not open these hidden “details”:
do not open
card_mod:
style:
.buttons ha-icon-button:not(.state-on):
state-badge $: |
ha-state-icon {
color: red or whatever !important;
}