Well, you’re right, I set it as null unless the card defines it, so I’ll need to check if it’s null or “is defined” as you suggest…
Can I do:
{% if config.variables['xxx'] is defined && config.variables['xxx'] is not null %}
Try smth like
{% if config.variables['xxx'] is defined and config.variables['xxx'] != 'null' %}
See, most of these things you may test yourself in Dev tools → Template
{% set config = {
'variables': {'a': 1, 'b': 2, 'c': 'null'},
'd': 3
} %}
{{config.variables['a']}}
{{config.variables['c'] is defined}}
{{config.variables['d'] is defined}}
{{config.variables['c'] != 'null' }}
{{config.variables['c'] == 'null' }}
Ildar I just found this:
{%- elif config.variables['var_select_option_value'] is defined and config.variables['var_select_option_value'] is not null -%}
But it doesn’t work?
I also tried
{%- elif config.variables['var_select_option_value'] != null -%}
It doesn’t work either?
I do not think that “null” is a correct word in jinja…
Check my example from Dev tools, try comparing with a STRING “null”.
I am a “C/C++” person, for me these python/jinja things are smth weird.
I just realized the quotes ‘null’, but it doesn’t work…
How to you initialise unused variables with “null”?
Not even this is workig…:
{%- elif config.variables['var_select_option_value'] is defined -%}
{%- if states(config.entity) == config.variables['var_select_option_value'] -%}
color: rgb(0,100,255) !important;
{%- else -%}
color: Silver !important;
This works:
type: custom:button-card
entity: sun.sun
variables:
COLOR: null
card_mod:
style: |
div#img-cell > ha-state-icon {
{% if config.entity.startswith('sun.') -%}
{%- if config.variables['COLOR'] is defined -%}
color: {{config.variables['COLOR']}} !important;
{%- endif -%}
{%- endif %}
}
I think you can make a template only for switch entities and apply it to the specific entity you want.
- type: horizontal-stack
cards:
- type: custom:button-card # with switch template - custom colors
entity: switch.decorative_lights
name: Switch with template
show_icon: true
show_state: true
template:
- switch_icon_color
- type: custom:button-card # without template - using default state colors
entity: switch.decorative_lights
name: Switch without template
show_icon: true
show_state: true
switch_icon_color:
styles:
icon:
- color: >
[[[
if (entity.state === 'on')
return 'rgb(0,100,255)';
else if (entity.state === variables.var_select_option_value)
return 'rgb(255,0,0)';
else
return 'silver';
]]]
1 Like
The point is not to have an “else” case to use the default colors of other entities which are not switches…
Ildar, somehow I made it work… I think I might have forgotten the “endif” case…
This is the working code:
card_mod:
style: |
div#img-cell > ha-state-icon {
{% if config.entity.startswith('switch.') -%}
{%- if states(config.entity) == 'on' -%}
color: rgb(0,100,255) !important;
{%- else -%}
color: Silver !important;
{%- endif -%}
{%- elif config.variables['var_select_option_value'] is defined and config.variables['var_select_option_value'] != null -%}
{%- if states(config.entity) == config.variables['var_select_option_value'] -%}
color: rgb(0,100,255) !important;
{%- else -%}
color: Silver !important;
{%- endif -%}
{%- endif %}
}
And you can put null with or without quotes…
The problem now is that this is incompatible with other entities defining the color in the custom button card. So basically for the icon color either you use “card_mod” or “styles”, but not both! I thought the color defined in the main card (custom button) will overide whatever is in thje template (using card_mod), but not…
Imho using card-mod & native styles to style same element is not a good idea))).
Well, may be you should consider this whole “quest” as a useful lesson (as I do for myself) and start looking for ANOTHER simpler way? The simpler = the better.
As for using “null” in jinja: I avoid doing it since this does not have same meaning as in C/Java. Prefer to use “none” in some case, “undefined” in other cases (i.e. some user-defined word).
Ildar, exactly. Unfortunately the solution might be not to use the icon color in a template and set the color individually for each entity… Some redundancies and a longer code, but at least the entities which use the same template will show their original color based on state if you don’t change it… 
Many many thanks!
Also, if this is about using ONE common template for diff. entities: consider using inherited templates for particular cases with overwritten parts.
As for “null”, in the template I set it to null:
variables:
var_select_option_value: "[[[ return null ]]]"
So each card will set the specific value, if needed, and if no value is set it returns null. So how would you recommend checking if the value is not null?
Try using
variables:
XXX: >-
[[[ return 'undefined' ]]]
...
somewhere: >-
[[[ if (variables.XXX === 'undefined') ... ]]]
...
card_mod:
style: |
zzz {
{% if config.variables['XXX'] == 'undefined' -%}
...
{%- endif %}
}
1 Like
Solved with using filter opacity instead:
card_mod:
style: |
@media (hover: hover) {
ha-card:hover {
{% if is_state(config.entity, 'on') %}
filter: opacity(70%) !important;
{% else %}
background-color: rgb(25,25,25) !important;
{% endif %};
}
}
2 Likes
so use default variables for domain state icon color… for other domain, except switch …
switch_icon_color:
styles:
icon:
- color: >
[[[
let domain = entity.entity_id.split('.')[0];
let state = entity.state;
let isActive = ['on', 'playing', 'unlocked'].includes(state);
let isInactive = ['off', 'paused', 'locked'].includes(state);
let isSwitch = domain === 'switch';
if (isSwitch && isActive) return 'green';
if (isSwitch && isInactive) return 'red';
let color = isActive
? `var(--state-${domain}-${state}-color,var(--state-${domain}-active-color, var(--state-active-color)))`
: `var(--state-${domain}-${state}-color, var(--state-${domain}-inactive-color, var(--state-inactive-color)))`;
return color;
]]]
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.decorative_lights
name: Switch domain
show_icon: true
show_state: true
template:
- switch_icon_color
- type: custom:button-card
entity: light.christmas_tree_lights
name: Light domain
show_icon: true
show_state: true
template:
- switch_icon_color
- type: custom:button-card
entity: binary_sensor.charging
name: Binary sensor
show_icon: true
show_state: true
template:
- switch_icon_color
But which result will you get in case of a simple sensor?