This seems to have some effect.
chip:
type: template
tap_action:
action: toggle
entity: input_boolean.kiosk_mode_toggle
icon: mdi:menu
card_mod:
style: |
ha-card {
border: 2px solid rgb(220,220,220,0.8) !important;
{% if is_state('climate.air_conditioning', 'heat_cool') %}
--chip-background: rgba(180, 165, 0, 0.2);
{% elif is_state('climate.air_conditioning', 'heat') %}
--chip-background: rgba(255, 123, 0, 0.2);
{% elif is_state('climate.air_conditioning', 'cool') %}
--chip-background: rgba(255, 165, 0, 0.2);
{% elif is_state('climate.air_conditioning', 'fan_only') %}
--chip-background: rgba(255, 250, 0, 0.2);
{% elif is_state('climate.air_conditioning', 'dry') %}
--chip-background: rgba(0, 165, 0, 0.2);
{% else %}
--chip-background: rgba(255, 255, 255, 0.2); /* Default color */
{% endif %}
}
}
When I make these types of templates for colours I create a template sensor.
Reference in Card, lovelace dashboard
card_mod:
style: |
ha-card {
{{states('sensor.swc_dewpoint_colour_outside')}}
Sensor, goes in configuration.yaml file
The output of the template in the sensor must be below 250 characters for this to work. Sensor State character limit.
sensor:
# TEMPLATE SENSORS -----------------------------------------------------------
- platform: template
sensors:
# Template Simple Weather Card - Dewpoint Colour - Outside
swc_dewpoint_colour_outside:
unique_id: 8883f463-f1fe-4e46-97ef-ab827670f130
friendly_name: "SWC Dewpoint Colour Outside"
value_template: >-
{% if is_state('sensor.text_dewpoint_comfort_outside','Very Dry') %}
--ha-card-background: radial-gradient(circle, deepskyblue, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)) !important;
{% elif is_state('sensor.text_dewpoint_comfort_outside','Dry') %}
--ha-card-background: radial-gradient(circle, mediumaquamarine, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)) !important;
{% elif is_state('sensor.text_dewpoint_comfort_outside','Pleasant') %}
--ha-card-background: radial-gradient(circle, limegreen, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)) !important;
{% elif is_state('sensor.text_dewpoint_comfort_outside','Comfortable') %}
--ha-card-background: radial-gradient(circle, yellowgreen, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)) !important;
{% elif is_state('sensor.text_dewpoint_comfort_outside','Sticky Humid') %}
--ha-card-background: radial-gradient(circle, yellow, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)) !important;
{% elif is_state('sensor.text_dewpoint_comfort_outside','Muggy') %}
--ha-card-background: radial-gradient(circle, gold, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)) !important;
{% elif is_state('sensor.text_dewpoint_comfort_outside','Sweltering') %}
--ha-card-background: radial-gradient(circle, orange, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)) !important;
{% elif is_state('sensor.text_dewpoint_comfort_outside','Stifling') %}
--ha-card-background: radial-gradient(circle, crimson, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)) !important;
{% endif %}