Strange, in my case the sidebar always has a black background. Iâm using fixed colors for the sidebar and items on it. Not sure how to edit the code to use it with light/dark modeâŠ
Ok that one was easy. I just removed the 2 first lines in âstyleâ
--sidebar-background: #000;
--sidebar-text-color: #FFF;
Then the colors are automatically adjusted to light or dark mode. However not the icons 
Ahhh just solved it.
Removing
.sidebarMenu li ha-icon {
color: #FFF!important;
}
Does it
1 Like
Hi all!
So Iâm rebuilding my UI to get something very compact, easy to use on mobile phones.
What I would need is a badge onto chips, so I can have this:
In my list of chips:
Is it possible? Or should I make a PR to have chips to support badges like template cards?
Regards,
Matthieu
You can create a select template for this.
template:
select:
- name: Media Source
availability: '{{ has_value("media_player.media_player") }}'
state: "{{ state_attr('media_player.media_player', 'source') | default('Off', true) }}"
options: "{{ state_attr('media_player.media_player', 'source_list') | default([], true) }}"
select_option:
- service: media_player.select_source
target:
entity_id: media_player.media_player
data:
source: "{{ option }}"
Then you can use this template with a mushroom select card
- type: custom:mushroom-select-card
entity: select.media_source
name: Source
2 Likes
It can sort of be done
Mushroom Cards - Build a beautiful dashboard easily 
- Share your Projects! - Home Assistant Community (home-assistant.io)
1 Like
Has anyone of you designed a nice card using mushroom for automower?
@ParalaX Would you mind posting your room card code?
I try to build the same concept for my room, but i struggle to remove the borderlines.
@ zanixmechanix Perfect, thatâs exactly what I was looking for.
@ Dibbler Sure:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Cuisine
secondary: >
{{ states("sensor.0x0015bc0034001000_temperature") | round(1) }}({{
state_attr("climate.cuisine_valve_jardin", "temperature") }})°C | NaN %
icon: mdi:fridge-bottom
icon_color: red
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
--ha-card-border-width: 0;
height: 66px;
margin-left: -25px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: media_player.cuisine
content_info: none
tap_action:
action: more-info
icon: >
{% if is_state('media_player.cuisine', 'playing') %} mdi:speaker-play
{%else %} mdi:speaker-pause {% endif %}
icon_color: >
{% if is_state('media_player.cuisine', 'playing') %} red {%else %}
grey {% endif %}
- type: template
entity: climate.cuisine_valve_jardin
content_info: none
tap_action:
action: more-info
icon: >
{% if is_state('climate.cuisine_valve_jardin', 'heat') %} mdi:radiator
{% else %} mdi:radiator-off {% endif %}
icon_color: >
{% if is_state("climate.cuisine_valve_jardin", "heat") %} red {% else
%} grey {% endif %}
- type: action
tap_action:
action: call-service
service: script.nettoyage_cuisine_jardin
target: {}
icon: mdi:robot-vacuum
- type: action
tap_action:
action: call-service
service: script.nettoyage_rue
target: {}
icon: mdi:robot-vacuum
alignment: end
card_mod:
style:
.: |
ha-card {
--chip-spacing: 0;
--chip-border-width: 0;
--chip-background: none;
margin-right: 6px;
}
card_mod:
style: |
ha-card {
height: 100px;
background: rgba(229, 20, 0, 0.05);
}
1 Like
First off, hat off to you! Any way to turn the progress bar red when person is away so it matches the badge icon? Also how would I go about changing the home/away color of the badge icon? Like instead of green/red I could have blue/orange? Thanks!
1 Like
Hello,
Can anyone tell me why this chip doesnât work even when the condition is met?
I am trying to display a chip if the state of the group will get lower than certain value.
Group is set via helper, which includes all battery sensors and reporting minimal state of them all.
You can see, condition is met, but chip is not being displayed.
Thank you in advance
Yes, something like this:
type: custom:mushroom-person-card
entity: person.rhys
icon_type: entity-picture
card_mod:
style:
mushroom-shape-avatar$: |
.container:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
--rgb-state-person:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }})
{% else %}
var(--rgb-state-person-zone)
{% endif %};
background: radial-gradient(rgb(var(--rgb-white)) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-state-person)) {{ states('sensor.rhys_phone_battery_level') }}% 0%, transparent 0% 100%);
-webkit-mask-image: radial-gradient(circle calc(var(--icon-size) / 2 - 2px) at 50% 50%, transparent 100%, black 0);
border-radius: var(--icon-border-radius);
}
.: |
:host {
--mush-rgb-state-person-home: var(--rgb-blue);
--mush-rgb-state-person-not-home: var(--rgb-orange);
--mush-rgb-state-person-zone: var(--rgb-purple);
--mush-rgb-state-person-unknown: var(--rgb-grey);
}
1 Like
Here you go:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Lounge
secondary: '{{ states("sensor.lounge_sensor_temperature") | round(0) }} °C'
icon: mdi:sofa
entity: light.lounge_light
tap_action:
action: navigate
navigation_path: lounge
hold_action:
action: toggle
icon_color: '{{ ''red'' if is_state(entity, ''on'') }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
--ha-card-border-width: 0;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.lounge_motion_occupancy
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:motion-sensor
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: media_player.lounge_tv
state_not: 'off'
- entity: media_player.lounge_tv
state_not: idle
- entity: media_player.lounge_tv
state_not: unavailable
chip:
type: template
entity: media_player.lounge_tv
icon_color: disabled
icon: |-
{% set media_type = state_attr(config.entity,
'media_content_type') %}
{% if media_type == 'tvshow' %}
mdi:television-classic
{% elif media_type == 'movie' %}
mdi:movie-roll
{% elif media_type == 'music' %}
mdi:music
{% elif media_type == 'playlist' %}
mdi:music
{% else %}
{% endif %}
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
animation: beat 1.3s ease-out infinite both;
{% else %}
{% endif %}
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { opacity: 1; }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { opacity: 0.6; }
}
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
- type: conditional
conditions:
- entity: climate.air_conditioner
state_not: 'off'
chip:
type: template
entity: climate.air_conditioner
icon_color: disabled
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 %}
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
.content {
{% if is_state(config.entity, 'heat_cool') %}
animation: spin 3s ease-in-out infinite alternate;
{% elif is_state(config.entity, 'heat') %}
animation: heat 2s infinite;
{% elif is_state(config.entity, 'cool') %}
animation: cool 6s ease-in-out 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;
{% else %}
{% endif %}
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
@keyframes cool {
0%, 100% { transform: rotate(25deg); }
25% { transform: rotate(-25deg); }
50% { transform: rotate(50deg); }
75% { transform: rotate(-50deg); }
}
@keyframes heat {
50% { opacity: 0.4; }
}
@keyframes dry {
50% { transform: scale(1.2); }
}
- type: conditional
conditions:
- entity: group.lounge_windows
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:window-open
tap_action:
action: none
hold_action:
action: none
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-border-width: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('light.lounge_light', 'on') %}
--ha-card-background: color-mix(in srgb, var(--red-color) 10%, var(--card-background-color));
{% endif %}
}
1 Like
Sticky header gets messed up with last HA update. Working on a fix.
HA header now has z-index: 4; so make sure you stay below that.
4 Likes
Thanks mate, you the man 
1 Like
@sarruman While rebuilding my ui i had alook on the plant card. Result is the following
It is based on roomcard examples from @rhysb
The card could be used with the auto entities card. Here is the code for it.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: plant.of_chinesischer_geldbaum_sensor_07
primary: '{{state_attr(entity, ''friendly_name'') }} - {{ area_name(entity) }}'
secondary: '{{ state_attr(entity, ''species'') }}'
picture: '{{state_attr(entity, ''entity_picture'') }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
--ha-card-border-width: 0;
height: 66px;
margin-left: -24px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:water
content: '{{ states(entity | replace(''plant'', ''sensor'') + ''_soil_moisture'') }} %'
entity: plant.of_chinesischer_geldbaum_sensor_07
icon_color: |-
{% if state_attr(entity, 'moisture_status') == 'ok' %}
green
{% else %}
red
{% endif %}
- type: template
icon: mdi:spa
content: >-
{{ states(entity | replace('plant', 'sensor') + '_conductivity') }}
”s/cm
entity: plant.of_chinesischer_geldbaum_sensor_07
icon_color: |-
{% if state_attr(entity, 'conductivity_status') == 'ok' %}
green
{% else %}
red
{% endif %}
- type: template
icon: mdi:thermometer
content: >-
{{ states(entity | replace('plant', 'sensor') + '_temperature') |
round(0) }} °C
entity: plant.of_chinesischer_geldbaum_sensor_07
icon_color: |-
{% if state_attr(entity, 'temperature_status') == 'ok' %}
green
{% else %}
red
{% endif %}
- type: template
icon: mdi:weather-sunny
content: >-
{{ states(entity | replace('plant', 'sensor') + '_illuminance') |
round(0) }} lx
entity: plant.of_chinesischer_geldbaum_sensor_07
icon_color: |-
{% if state_attr(entity, 'illuminance_status') == 'ok' %}
green
{% else %}
red
{% endif %}
alignment: end
card_mod:
style:
.: |
ha-card {
--chip-box-shadow: none;
--chip-spacing: 0;
--chip-border-width: 0;
--chip-background: none;
}
card_mod:
style: |
ha-card {
height: 102px;
}
Any ideas to improve it are welcome!!!
12 Likes
Hi all.
I have a 2 questions
I have this card (mushroom-number-card)
-
How can I reduce the distance between number and slider (in red)?
-
How can I reduce the height (general or only of slider)?
Regards,
Marco
hi @rhysb ⊠can you please have a look at this⊠i tried many ways⊠not able to get the desired outputâŠ
Thatâs what Iâm using right now⊠Hope it helps!
type: custom:mod-card
card:
type: custom:flower-card
entity: plant.orchid
show_bars:
- moisture
- temperature
- illuminance
- conductivity
battery_sensor: sensor.orchid_battery
card_mod:
style: |
ha-card > div.header {
padding-top: 0px;
}
ha-card > div.header > img {
width: 40px;
height: 40px;
margin-top: 8px;
}
ha-card {
margin-top: 0px !important;
}
Hi, this is a coincidence, but I have just redone the UI for my Automower. If the mower gets stuck, I have a condition card with the instructions to follow and a map to locate the mower.
And the translated version
If you have any feedback, it will be greatly appreciated.
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Extérieur
- type: conditional
conditions:
- entity: vacuum.maison
state: error
card:
type: vertical-stack
cards:
- type: markdown
content: >
### Pour remettre la tondeuse en fonction il faut :
1. Appuyez sur le bouton STOP pour ouvrir la trappe.
2. Saisissez le code PIN.
3. Attraper la tondeuse par la poignée (à l'arriÚre).
4. Soulever puis déplacer la tondeuse devant la station de charge.
5. Faire rouler la tondeuse la tĂȘte la premiĂšre dans la station de
charge.
6. Appuyer sur le bouton START. (Ă gauche du clavier)
7. SĂ©lectionner le mode "Zone principale", puis OK.
6. Fermez la trappe dans les 10 secondes. Si la tondeuse est
stationnée dans la station de charge, elle ne quittera la station de
charge que lorsque la batterie sera complÚtement chargée.
**â ïžREMARQUE : Appuyez toujours sur le bouton START avant de fermer la trappe. Si vous n'appuyez pas sur le bouton START, vous entendrez un message sonore et la tondeuse ne dĂ©marrera pas.**
## **Si BIP đ = PAS BON** retour Ă l'Ă©tape 6
[lien du manuel au cas
ou](https://manuals.plus/wp-content/plugins/pdfjs-viewer-shortcode/pdfjs/web/viewer.php?file=/wp-content/sideloads/husqvarna-automower-310-315-315x-operator-s-manual-optimized.pdf&attachment_id=&dButton=true&pButton=true&oButton=false&sButton=true#zoom=auto&pagemode=none&_wpnonce=e93e4beac1)
c'est page 34.
title: Remise en fonction de la tondeuse
- type: map
entities:
- entity: person.tondeuse
default_zoom: 19
dark_mode: false
- type: custom:mushroom-light-card
entity: light.eclairage_terrace_on_off
- type: custom:mushroom-title-card
title: ''
subtitle: Tondeuse
- type: custom:mushroom-vacuum-card
entity: vacuum.maison
commands:
- return_home
icon_animation: false
fill_container: false
icon_type: icon
layout: horizontal
- type: custom:mushroom-template-card
icon: mdi:play
tap_action:
confirmation:
text: La tondeuse va partir d'ici 5 minutes
action: call-service
service: number.set_value
data:
value: '180'
target:
entity_id: number.maison_mow_for
primary: Tondre pendant 3h
multiline_secondary: false
entity: vacuum.maison
secondary: Puis reprise du programe
- type: custom:mushroom-template-card
icon: mdi:calendar-alert-outline
tap_action:
action: call-service
service: vacuum.stop
target:
entity_id: vacuum.maison
data: {}
primary: Stationer la tondeuse
multiline_secondary: false
entity: vacuum.maison
secondary: Jusqu'Ă nouvel ordre
badge_icon: ''
badge_color: ''
- type: custom:mushroom-template-card
icon: mdi:calendar-arrow-right
tap_action:
action: call-service
service: vacuum.stop
target:
entity_id: vacuum.maison
data: {}
primary: Reprise du programe
multiline_secondary: false
entity: vacuum.maison
secondary: ''
badge_icon: ''
badge_color: ''