Did you find a solution yet? I have the same feeling 
Top is Mushroom, bottom is Tile
Any idea what the standard Tile font / icon settings are?
You can do it with card mod.
With shape background:
Code
card_mod:
style: |
ha-card {
width: fit-content;
}
Without shape background:
Code
card_mod:
style: |
ha-card {
width: fit-content;
}
mushroom-shape-icon {
--shape-color: none !important;
}
No card background:
Code
card_mod:
style: |
ha-card {
width: fit-content;
background: none;
border: none !important;
box-shadow: none !important;
}
No card background or shape background:
Code
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
width: fit-content;
background: none;
border: none !important;
box-shadow: none !important;
}
And last one, no card background, shape background, or badge background:
Code
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
width: fit-content;
background: none;
border: none !important;
box-shadow: none !important;
}
mushroom-badge-icon {
--main-color: none !important;
}
7 Likes
Not a different font. Different font weight and color.
You can change the font weight and color of the tile card like this (to match mushroom default):
Tile to Match Mushroom
card_mod:
style:
ha-tile-info$: |
.primary {
font-weight: bold !important;
color: rgba(var(--rgb-primary-text-color), 1) !important;
}
.secondary {
font-weight: bold !important;
color: rgba(var(--rgb-secondary-text-color), 1) !important;
}
And to do the opposite:
Mushroom Match Tile
card_mod:
style:
mushroom-state-info$: |
.primary {
font-weight: 400 !important;
color: rgba(var(--rgb-primary-text-color), 1) !important;
}
.secondary {
font-weight: 400 !important;
color: rgba(var(--rgb-primary-text-color), 1) !important;
}
For the icons the only real difference tends to be the icon size and color as well. Both can be changed like this (note that i have chosen blue as an example, can be any color, also please note any 0.2 or 1 in the rgba color, it shows the transparency of the color so it is important!):
Tile Match Mushroom
card_mod:
style:
ha-tile-icon$: |
:host {
--mdc-icon-size: 20px !important;
}
ha-icon {
color: rgba(20, 160, 255, 1) !important;
}
.shape::before {
background-color: rgba(20, 160, 255, 1) !important;
}
And the opposite:
Mushroom Match Tile
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: rgba(var(--rgb-blue), 0.2) !important;
}
.: |
ha-state-icon {
color: rgba(var(--rgb-blue), 1);
--icon-symbol-size: 25px;
}
EDIT: just to add if the modification for the icon doesnt work for the tile card try and replace ha-icon with ha-svg-icon unfortunately the tiles use a mix depending on whether the icon is one that changes based on the state or not (so open or closed blinds etc.)
8 Likes
I donāt have this typo in my yaml file. So still have the issue.
Iām using the Chips card to show my frigate snapshots. I would like to know when one of the cameras has a person in view using a binary sensor for person occupancy. My problem is I canāt seem to figure out card_mod with the Chips card at this point. Iāve looked all over, and hereās what I have so far. Can someone take a look and let me know where I went wrong? TIA!
type: custom:mushroom-chips-card
chips:
- type: entity
entity: camera.driveway_camera_person
content_info: none
use_entity_picture: true
- type: entity
entity: camera.north_camera_person
content_info: none
use_entity_picture: true
- type: entity
entity: camera.front_door_camera_person
content_info: none
use_entity_picture: true
- type: entity
entity: camera.backyard_camera_person
content_info: none
use_entity_picture: true
- type: entity
entity: camera.front_doorbell_person
content_info: none
use_entity_picture: true
- type: entity
entity: camera.foyer_camera_person
content_info: none
use_entity_picture: true
- type: entity
entity: camera.garage_camera_person
content_info: none
use_entity_picture: true
- type: entity
entity: camera.kitchen_camera_person
content_info: none
use_entity_picture: true
- type: entity
entity: camera.family_room_camera_person
content_info: none
use_entity_picture: true
alignment: center
card_mod:
style:
div:
mushroom-template-chip:nth-child(6):
$:
mushroom-chip: |
ha-icon {
{% if is_state('binary_sensor.foyer_camera_person_occupancy', 'on') %}
animation: rotation 1s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
2 Likes
Take a look at my guide and then the chip section.
Essentially any changes to the chip itself, background, size, border, shadow, etc. Can be applied to the chip directly. But anything that needs to target something inside of the chip needs to be targeted from the main chip card and then drilled down to the appropriate chip.
Edit: also if you know what the path is to your camera snapshots you can use a template chip instead and then you could just have it change the icon when its detected motion or something, like this maybe?
type: custom:mushroom-chips-card
chips:
- type: template
entity: camera.demo_camera
picture: |-
{% if states('binary_sensor.front_door_motion') == 'on' %}
some image that will show that motion is detected.
{% else %}
local/frontdoorcamera/tmp/camera.png
{% endif %}
You are a hero. Many thanks 
Any idea what to putt instead of the --rgb-blue to just use the standard mushroom colors? I used --state-icon-color, but that doesnāt work.
Dont think it is possible. The state icon color mushroom uses is parsed at card level i believe so it wont be exposed to the tile card.
I would just change it manually with some colors that look nice to you.
card_mod:
style:
ha-tile-icon$: |
:host {
--mdc-icon-size: 20px !important;
}
ha-icon {
color: rgba(20, 160, 255, 1) !important;
}
.shape::before {
background-color: rgba(20, 160, 255, 1) !important;
}
Hi, has the recent Home Assistant update broken the cards for anyone else?
All my cards showing as āCustom Element Doesnāt Existā.
Wow, those guides are great. I have been searching through different incomplete examples and I figured it out in 5 minutes after looking at this. Thanks!
1 Like
Estou comeƧando a elaborar algumas coisas sobre o Natal aqui no meu Dashboard, porĆ©m esatou com dificuldades para fazer um āChipā que aparece quando liga minha Ćrvore de Natal com os dizeres āFeliz Natal!ā
I tried several things, but I can only leave it this way;
Can anybody help me?
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:pine-tree
icon_color: green
- type: template
icon: mdi:star-four-points
icon_color: yellow
- type: template
icon: mdi:grain
icon_color: red
- type: template
icon: mdi:gift
icon_color: red
card_mod:
style:
mushroom-template-chip:nth-child(2)$: |
.shape {
--shape-color: none;
}
ha-card {
width: 66px;
top: 0px;
}
ha-state-icon {
animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
mushroom-template-chip:nth-child(3)$: |
.shape {
--shape-color: none;
}
ha-card {
width: 66px;
top: -132px;
}
ha-state-icon {
animation: flash 2s steps(1) infinite, lights 2s infinite;
clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
}
@keyframes flash {
50% { transform: rotateY(180deg); }
}
@keyframes lights {
0%, 100% {color: rgb(var(--rgb-red)); }
6.25% { color: rgb(var(--rgb-deep-orange)); }
12.5% { color: rgb(var(--rgb-orange)); }
18.75% { color: rgb(var(--rgb-amber)); }
25% { color: rgb(var(--rgb-yellow)); }
31.25% { color: rgb(var(--rgb-lime)); }
37.5% { color: rgb(var(--rgb-light-green)); }
43.75% { color: rgb(var(--rgb-green)); }
50% { color: rgb(var(--rgb-teal)); }
56.25% { color: rgb(var(--rgb-cyan)); }
62.5% { color: rgb(var(--rgb-light-blue)); }
68.75% { color: rgb(var(--rgb-blue)); }
75% { color: rgb(var(--rgb-indigo)); }
81.25% { color: rgb(var(--rgb-deep-purple)); }
87.5% { color: rgb(var(--rgb-purple)); }
93.75% { color: rgb(var(--rgb-pink)); }
}
mushroom-template-chip:nth-child(4)$: |
.shape {
--shape-color: none;
--icon-size: 18px;
top: 18px;
left: 18px;
}
ha-card {
width: 66px;
top: -198px;
}
ha-state-icon {
animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
1 Like
Firstly please only use english on this forum. Makes it very hard for people to search for solutions if they would have to search in many different languages.
To move the chip itself you need to target the chip rather then the chip container drilled down.
Try like this:
Code
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:pine-tree
icon_color: green
- type: template
icon: mdi:star-four-points
icon_color: yellow
card_mod:
style: |
ha-card {
position: absolute;
left: 0px;
top: 1px;
background: none !important;
box-shadow: none !important;
border: none !important;
}
- type: template
icon: mdi:grain
icon_color: red
card_mod:
style: |
ha-card {
position: absolute;
left: 0px;
top: 0px;
background: none !important;
box-shadow: none !important;
border: none !important;
}
- type: template
icon: mdi:gift
icon_color: red
card_mod:
style: |
ha-card {
position: absolute;
left: 0px;
top: 4px;
background: none !important;
box-shadow: none !important;
border: none !important;
}
card_mod:
style:
mushroom-template-chip:nth-child(2)$: |
ha-state-icon {
animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
mushroom-template-chip:nth-child(3)$: |
ha-state-icon {
animation: flash 2s steps(1) infinite, lights 2s infinite;
clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
}
@keyframes flash {
50% { transform: rotateY(180deg); }
}
@keyframes lights {
0%, 100% {color: rgb(var(--rgb-red)); }
6.25% { color: rgb(var(--rgb-deep-orange)); }
12.5% { color: rgb(var(--rgb-orange)); }
18.75% { color: rgb(var(--rgb-amber)); }
25% { color: rgb(var(--rgb-yellow)); }
31.25% { color: rgb(var(--rgb-lime)); }
37.5% { color: rgb(var(--rgb-light-green)); }
43.75% { color: rgb(var(--rgb-green)); }
50% { color: rgb(var(--rgb-teal)); }
56.25% { color: rgb(var(--rgb-cyan)); }
62.5% { color: rgb(var(--rgb-light-blue)); }
68.75% { color: rgb(var(--rgb-blue)); }
75% { color: rgb(var(--rgb-indigo)); }
81.25% { color: rgb(var(--rgb-deep-purple)); }
87.5% { color: rgb(var(--rgb-purple)); }
93.75% { color: rgb(var(--rgb-pink)); }
}
mushroom-template-chip:nth-child(4)$: |
ha-state-icon {
--chip-icon-size: 10px;
animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
If this doesnt work perfectly for you fiddle with the top: number
2 Likes
Is there a way to avoid the shadow and border of sub-cards from being visible when the page loads?
Card configuration:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
style: |
ha-card {
--ha-card-box-shadow: none;
border: none;
background: none;
}
icon: |-
{% set state = states(entity) %}
{% if state == "clear-night" %}
mdi:weather-night
{% elif state == "cloudy" %}
mdi:weather-cloudy
{% elif state == "fog" %}
mdi:weather-fog
{% elif state == "hail" %}
mdi:weather-hail
{% elif state == "lightning" %}
mdi:weather-lightning
{% elif state == "lightning-rainy" %}
mdi:weather-lightning-rainy
{% elif state == "partlycloudy" %}
mdi:weather-partly-cloudy
{% elif state == "pouring" %}
mdi:weather-pouring
{% elif state == "rainy" %}
mdi:weather-rainy
{% elif state == "snowy" %}
mdi:weather-snowy
{% elif state == "snowy-rainy" %}
mdi:weather-snowy-rainy
{% elif state == "sunny" %}
mdi:weather-sunny
{% elif state == "windy" %}
mdi:weather-windy
{% elif state == "windy-variant" %}
mdi:weather-windy-variant
{% else %}
mdi:weather-cloudy-alert
{% endif %}
icon_color: |-
{% set state = states(entity) %}
{% if state == "clear-night" %}
orange
{% elif state == "cloudy" %}
grey
{% elif state == "fog" %}
grey
{% elif state == "lightning" %}
yellow
{% elif state == "lightning-rainy" %}
blue
{% elif state == "partlycloudy" %}
amber
{% elif state == "sunny" %}
amber
{% elif state == "pouring" %}
blue
{% elif state == "rainy" %}
blue
{% elif state == "snowy" %}
black
{% elif state == "snowy-rainy" %}
black
{% elif state == "windy" %}
green
{% elif state == "windy-variant" %}
green
{% else %}
default
{% endif %}
primary: Pogoda
secondary: |-
{% set condition_map = {
"clear-night": "pogodna noc",
"cloudy": "pochmurno",
"exceptional": "warunki nadzwyczajne",
"fog": "mgÅa",
"hail": "grad",
"lightning": "wyÅadowania atmosferyczne",
"lightning-rainy": "burza",
"partlycloudy": "czÄÅciowe zachmurzenie",
"pouring": "ulewa",
"rainy": "deszczowo",
"snowy": "opady Åniegu",
"snowy-rainy": "deszcz ze Åniegiem",
"sunny": "sÅonecznie",
"windy": "wietrznie",
"windy-variant": "wietrznie"
}
%}
{{ condition_map.get(states(entity)) }}
tap_action:
action: navigate
navigation_path: /lovelace/climate
entity: weather.home
- type: custom:stack-in-card
style: |
ha-card {
--ha-card-box-shadow: none;
border: none;
background: none;
}
cards:
- type: custom:mushroom-chips-card
alignment: end
style: |
div.chip-container {
margin-bottom: -14px;
--chip-border-width: 0px;
--chip-background: none;
}
chips:
- type: entity
entity: sensor.temperature_outdoor
icon_color: amber
- type: entity
entity: sensor.humidity_outdoor
icon_color: blue
- type: custom:mushroom-chips-card
alignment: end
style: |
div.chip-container {
margin-bottom: -14px;
--chip-border-width: 0px;
--chip-background: none;
}
chips:
- type: entity
entity: sensor.pressure_outdoor
icon_color: green
- type: entity
entity: sensor.home_forecast_precipitation_probability
icon_color: purple
No. Its just how css is loaded when modifications are made like stack in cards and card mod. You are modifying the page after it loads. Only way to make it less obvious is a faster connection to your ha instance so the modifications load faster.
I thought so 
The network connection between the client and the HA server is gigabit ethernet, so there is not much room for improvement.
Mine is not gigabit and between client and instance on my pc which is wired i dont get this but on my phone i do because of the higher latency.
Maybe try and ping your ha instance from the client and look at your latency instead of the bandwidth.
Otherwise it is just have many modifications you have unfortunately.
Is it possible in the title card to create line break to organize the text?
Hello I canāt make the motion sensor chip card animate, managed to do it for a AC chip card but this one no:
Like in this example
I think I am close but Iām missing somethingā¦
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:knife
icon_color: |-
{% if is_state('light.kitchen_main_light', 'on') %}
orange
{% endif %}
primary: Kitchen
secondary: >-
{{ states('sensor.kitchen_multi_sensor_temperature') | round(1) }}Ā°C - {{
states('sensor.kitchen_multi_sensor_humidity')| round}}%
tap_action:
action: navigate
navigation_path: kitchen
hold_action:
action: toggle
entity: light.kitchen_lights
multiline_secondary: false
fill_container: false
card_mod:
style: |
ha-card {
background :rgba(var(--rgb-primary-text-color), 0.025);
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.kitchen_motion_sensor_occupancy
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
primary
{% else %}
grey
{% endif %}
tap_action:
action: more-info
- type: template
entity: sensor.kitchen_cooktop_current_comsumption
icon: mdi:stove
icon_color: |-
{% set consumptiontion_level = states(entity) | float(0) %}
{% if consumptiontion_level > 0 %}
primary
{% else %}
grey
{% endif %}
- type: template
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:window-open-variant
{% else %}
mdi:window-closed-variant
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
primary
{% else %}
grey
{% endif %}
entity: binary_sensor.window_sensor_kitchen_contact
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: -0.5em;
--chip-icon-size: 0.5em
}
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: clip 2s linear infinite;
}
@keyframes clip {
50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
}
card_mod:
style: |
ha-card {
height: 102px;
}
Hereās my full room cards for now for anyone interested :
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:knife
icon_color: |-
{% if is_state('light.kitchen_main_light', 'on') %}
orange
{% endif %}
primary: Kitchen
secondary: >-
{{ states('sensor.kitchen_multi_sensor_temperature') | round(1) }}Ā°C
- {{ states('sensor.kitchen_multi_sensor_humidity')| round}}%
tap_action:
action: navigate
navigation_path: kitchen
hold_action:
action: toggle
entity: light.kitchen_lights
multiline_secondary: false
fill_container: false
card_mod:
style: |
ha-card {
background :rgba(var(--rgb-primary-text-color), 0.025);
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.kitchen_motion_sensor_occupancy
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
primary
{% else %}
grey
{% endif %}
tap_action:
action: more-info
- type: template
entity: sensor.kitchen_cooktop_current_comsumption
icon: mdi:stove
icon_color: |-
{% set consumptiontion_level = states(entity) | float(0) %}
{% if consumptiontion_level > 0 %}
primary
{% else %}
grey
{% endif %}
- type: template
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:window-open-variant
{% else %}
mdi:window-closed-variant
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
primary
{% else %}
grey
{% endif %}
entity: binary_sensor.window_sensor_kitchen_contact
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: -0.5em;
--chip-icon-size: 0.5em}
}
card_mod:
style: |
ha-card {
height: 102px;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
secondary: >-
{{ states('sensor.aqara_multi_sensor_2_living_room_temperature') |
round(1) }} Ā°C - {{
states('sensor.aqara_multi_sensor_2_living_room_humidity') |
round(0)}}%
icon: mdi:sofa
entity: light.living_room_lights
icon_color: |-
{% if is_state('light.living_room_lights', 'on') %}
orange
{% endif %}
primary: Living Room
hold_action:
action: call-service
service: light.toggle
service_data:
transition: 1
brightness_pct: 75
target:
area_id: living_room
tap_action:
action: navigate
navigation_path: livingroom
multiline_secondary: false
fill_container: true
card_mod:
style: |
ha-card {
background :rgba(var(--rgb-primary-text-color), 0.025);
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: |-
{% if is_state(config.entity, 'on') %}
primary
{% else %}
grey
{% endif %}
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:radiator
{% else %}
mdi:radiator-off
{% endif %}
entity: switch.living_room_heater_garden_left_switch_0
- type: template
entity: input_boolean.ryzen_5700x_pc
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:desktop-tower-monitor
{% else %}
mdi:desktop-tower-monitor
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
primary
{% else %}
grey
{% endif %}
tap_action:
action: more-info
- type: conditional
conditions: []
chip:
type: template
icon_color: |-
{% if is_state(config.entity, 'off') %}
grey
{% else %}
primary
{% endif %}
entity: climate.daikin_living_room
icon: |-
{% if is_state(entity, 'heat_cool') %}
mdi:sync
{% elif is_state(entity, 'heat') %}
mdi:fire
{% elif is_state(entity, 'cool') %}
mdi:snowflake
{% elif is_state(entity, 'dry') %}
mdi:water-percent
{% elif is_state(entity, 'fan_only') %}
mdi:fan
{% else %}
mdi:air-conditioner
{% endif %}
card_mod:
style: |
ha-card {
animation: spin linear infinite;
{% if is_state(config.entity, 'heat_cool') %}
animation: spin 3s ease-in-out infinite alternate;
{% elif is_state(config.entity, 'cool') %}
animation: cool 6s ease-in-out infinite;
{% elif is_state(config.entity, 'heat') %}
animation: heat 2s infinite;
{% elif is_state(config.entity, 'dry') %}
animation: dry 1.5s linear infinite;
{% elif is_state(config.entity, 'fan_only') %}
animation: spin 1s linear infinite;
{% endif %}
}
@keyframes cool {
0%, 100% { transform: rotate(25deg); }
25% { transform: rotate(-25deg); }
50% { transform: rotate(50deg); }
75% { transform: rotate(-50deg); }
}
@keyframes heat {
0%, 100% { --icon-color: rgba(var(--rgb-red), 1); }
10%, 90% { --icon-color: rgba(var(--rgb-red), 0.8); }
20%, 80% { --icon-color: rgba(var(--rgb-red), 0.6); }
30%, 70% { --icon-color: rgba(var(--rgb-red), 0.4); }
40%, 60% { --icon-color: rgba(var(--rgb-red), 0.2); }
50% { --icon-color: rgba(var(--rgb-red), 0); }
}
@keyframes dry {
0%, 100% { --icon-symbol-size: 21px; }
10%, 90% { --icon-symbol-size: 22px; }
20%, 80% { --icon-symbol-size: 23px; }
30%, 70% { --icon-symbol-size: 24px; }
40%, 60% { --icon-symbol-size: 25px; }
50% { --icon-symbol-size: 26px; }
}
- type: template
entity: binary_sensor.livingroom_window_contact_contact
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:window-open-variant
{% else %}
mdi:window-closed-variant
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
primary
{% else %}
grey
{% endif %}
tap_action:
action: more-info
- type: template
entity: binary_sensor.livingroom_door_contact_contact
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:door-open
{% else %}
mdi:door-closed
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
primary
{% else %}
grey
{% endif %}
tap_action:
action: more-info
- type: template
entity: media_player.living_room_speaker
icon: |-
{% if is_state(config.entity, 'playing') %}
mdi:speaker-play
{% else %}
mdi:speaker-off
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'playing') %}
primary
{% else %}
grey
{% endif %}
tap_action:
action: more-info
- type: template
entity: vacuum.vaccubot
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:robot-vacuum
{% else %}
mdi:robot-vacuum-off
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
primary
{% else %}
grey
{% endif %}
- type: template
icon_color: |-
{% if is_state(config.entity, 'on') %}
primary
{% else %}
grey
{% endif %}
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:air-humidifier
{% else %}
mdi:air-humidifier-off
{% endif %}
entity: humidifier.humidifier
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: -0.5em;
--chip-icon-size: 0.5em}
}
card_mod:
style: |
ha-card {
height: 102px;
}
And some WIP work on graph with dynamic color, directly integrated in the room cards thanks
PskNorzNoRz for the ideas !
6 Likes
Ok I managed to have it working :
But now that bit of code isnāt working:
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: -0.5em;
--chip-icon-size: 0.5em
}
I think it has to be the placement of this key : ā|ā
From what I understand it act like the opening of an {}
When I put it like this:
" style: | ", ha-card {ā¦} work but not ha-state-icon {ā¦}
type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.kitchen_motion_sensor_occupancy
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
primary
{% else %}
grey
{% endif %}
tap_action:
action: more-info
- type: template
entity: sensor.kitchen_cooktop_current_comsumption
icon: mdi:stove
icon_color: |-
{% set consumptiontion_level = states(entity) | float(0) %}
{% if consumptiontion_level > 0 %}
primary
{% else %}
grey
{% endif %}
- type: template
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:window-open-variant
{% else %}
mdi:window-closed-variant
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
primary
{% else %}
grey
{% endif %}
entity: binary_sensor.window_sensor_kitchen_contact
alignment: end
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: clip 2s linear infinite;
}
@keyframes clip {
50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
}
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: -0.5em;
--chip-icon-size: 0.5em
}
}