Just to add to this problem ā¦
Is there an easy way to call more-info on a different entity ?
Like:
<% if X %>more-info entity A <% else %> more-info entity B <% endif %>
I know if can be done with conditional cards, but I would copy-paste 50 lines of the same card for only this. Also with mushroom cards, I got a small space before the second card.
Does anyone know how to define a theme for mushroom that only has dark mode?
I have the default Mushroom rounded theme, and would like to toggle between light and dark mode using an automation so need to make a copy of the theme which only has ādarkā colours enabled - however checking inside the theme hardly anything is defined, as itās only handling the rounded corners.
Is there any way to tell it to map all the ādarkā colours into the ālightā section of the theme? - I canāt actually seem to find the default theme file where they are setā¦
This is what is inside the Mushroom theme
Mushroom:
# Home Assistant override
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
ha-card-border-radius: 12px
modes:
light:
[] <----- Somehow I need to get all the 'dark' colours in here
dark:
[]
If this is your actual problem, Iām pretty sure there are better ways to do this, like changing your system between light and dark mode automatically and using the auto mode.
That was indeed my first thoughtā¦ however this āAutoā mode apparently follows the OS/Browser dark mode, rather than any night/day or time based switching.
Did you try
How is that achieved? - Iām wanting to have this switch on all devices (Android & Win 11) at night so that it goes to ādarkā mode without changing the OS settings
I could go and say thatās pointless if the rest of your OS doesnāt switch as well but ehā¦
Anyway, would you say you want a way to change this option remotely?
Yeah, it probably is pointless for some 
But useful for these certain scenarios where I have wall tablets etc. that I would like to switch based on sunrise/sunset and lighting conditions (basically control it via an automation).
Thanks for the browser mod tip - wasnāt aware of that option, however unless iām missing something the dark option doesnāt seem to work (it doesnāt even appear in the āexample dataā populated from the dev tools in HA)
I called;
service: browser_mod.set_theme
data:
theme: "Mushroom"
dark: false
And the theme set to Mushroom but the Auto/Light/Dark radio buttons did nothing - Iāve tried quoting āfalseā as those docs suggest is can be true,false or auto - so I wonder if it was a string rather than boolean but still no joy.
Odd. You could look at the relevant code https://github.com/thomasloven/hass-browser_mod/blob/5c7f68c8b513007170561672c1dc701c924885ba/js/main.js#L97, and/or raise an issue at browser_mod.
Hello, I try to get the moon phases picture on my HA. But I only get a black circle.
I try this code:
type: custom:mushroom-chips-card
chips:
- type: template
style: |
ha-card {
--chip-background: url( {% set state = states('sensor.moon') %} /local/moon_phases/{{state}}.png ) no-repeat center center;
}
and this code:
type: custom:mushroom-chips-card
chips:
- type: template
card_mod:
style: |
ha-card {
{% set phase = states('sensor.moon') %}
--chip-background: url( '/local/moon_phases/{{ phase }}.png' ) no-repeat center center;
}
But with both codes are only the black circle.
My pictures are 36 x 36 px and I save it under:
www/moon_phases/
If I enter the following adress in the browser:
https://homeassistant.local:8123/local/moon_phases/waxing_crescent.png
I see the picture. What make I wrong?
What do you see if you enter the code into the templating section of Developer Tools?
Would really love a compact version of the fan card (single line) or something that shows up as an entity which includes the name.
See screenshot, Iām using entity sliders for my individual fans instead of mushroom as itās more compact
www/moons_phases/ is incorrect. Put them in www/moon_phases/
May I ask one last question.
How can I fill the background code of below code. It seems to be transparent with a background wallpaper like this.
I donāt want it to be transparent over a wallpaper.
It must look like this.
The code is:
square: false
columns: 1
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Salon
picture: /local/png/sofa.png
secondary: '{{ states(''sensor.hue_motion_temp_salon'') | round(0) }} Ā°C'
icon: mdi:sofa
entity: group.salon
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: salon
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
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;
}
mushroom-card {
background-size: 55px 40px;
{% if is_state('group.salon', 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.bathroom_leak_water_leak
state: 'on'
chip:
type: template
icon_color: light-blue
icon: mdi:water-alert
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.hue_motion_sensor_3_motion_2
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:motion-sensor
- type: conditional
conditions:
- entity: media_player.fire_tv_192_168_1_86
state: playing
chip:
type: template
icon_color: disabled
icon: mdi:movie
card_mod:
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
animation: rotation linear infinite;
animation-duration: 2s;
}
- type: conditional
conditions:
- entity: group.bathroom_windows
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:window-open
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('group.salon', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Salon
picture: /local/png/pizza3.png
secondary: '{{ states(''sensor.hue_motion_temp_mutfak'') | round(0) }} Ā°C'
icon: mdi:sofa
entity: group.mutfak
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: mutfak
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
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: 73px;
height: 66px;
margin-left: -16px !important;
}
mushroom-card {
background-size: 55px 40px;
{% if is_state('group.mutfak', 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.bathroom_leak_water_leak
state: 'on'
chip:
type: template
icon_color: light-blue
icon: mdi:water-alert
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.hue_motion_sensor_2_motion
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:motion-sensor
- type: conditional
conditions:
- entity: media_player.fire_tv_192_168_1_86
state: playing
chip:
type: template
icon_color: disabled
icon: mdi:movie
card_mod:
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
animation: rotation linear infinite;
animation-duration: 2s;
}
- type: conditional
conditions:
- entity: group.bathroom_windows
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:window-open
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('group.mutfak', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Ofis
picture: /local/png/pc1.png
secondary: '{{ states(''sensor.hue_motion_temp_ofis'') | round(0) }} Ā°C'
icon: mdi:sofa
entity: group.office
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: ofis
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
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: 73px;
height: 66px;
margin-left: -16px !important;
}
mushroom-card {
background-size: 55px 40px;
{% if is_state('group.office', 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.bathroom_leak_water_leak
state: 'on'
chip:
type: template
icon_color: light-blue
icon: mdi:water-alert
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.hue_motion_sensor_3_motion_3
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:motion-sensor
- type: conditional
conditions:
- entity: media_player.fire_tv_192_168_1_86
state: playing
chip:
type: template
icon_color: disabled
icon: mdi:movie
card_mod:
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
animation: rotation linear infinite;
animation-duration: 2s;
}
- type: conditional
conditions:
- entity: group.bathroom_windows
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:window-open
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('group.office', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Banyo
picture: /local/png/banyo.png
secondary: '{{ states(''sensor.hue_motion_temp_banyo'') | round(0) }} Ā°C'
icon: mdi:sofa
entity: group.banyo
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: ofis
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
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: 73px;
height: 66px;
margin-left: -16px !important;
}
mushroom-card {
background-size: 55px 40px;
{% if is_state('group.banyo', 'on') %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.bathroom_leak_water_leak
state: 'on'
chip:
type: template
icon_color: light-blue
icon: mdi:water-alert
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: switch.motion
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:motion-sensor
- type: conditional
conditions:
- entity: media_player.fire_tv_192_168_1_86
state: playing
chip:
type: template
icon_color: disabled
icon: mdi:movie
card_mod:
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
animation: rotation linear infinite;
animation-duration: 2s;
}
- type: conditional
conditions:
- entity: group.bathroom_windows
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:window-open
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('group.banyo', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
card_mod:
style: |
ha-card {
background-color: #111111;
color: #e1e1e1;
box-shadow: 0px 0px;
}
If I enter it to the templating I got this:
Ergebnistyp: string
type: custom:mushroom-chips-card
chips:
- type: template
card_mod:
style: |
ha-card {
--chip-background: url( '/local/moon_phases/waxing_crescent.png' ) no-repeat center center;
}
Dieses Template Ć¼berwacht die folgenden Ereignisse, die einen Zustand Ƥndern:
EntitƤt: sensor.moon
It seems ok
I have it in www/moon_phases/ That was just a typo here in the forum
Edit:
I forgot to add config folder to path. When I did that, the wordwrap code you sent me worked. Thank you.
Is there a way to get a picture to take up the entire card and not just the small circle? Such as below, I want the picture to cover the entire area.
type: custom:mushroom-template-card
primary: Test123
secondary: How are you?
icon: ''
picture: /local/5.jpg
Yeah the css is a problem I cannot seem to get it looking like itās on the same ācardāā¦
This is as close as I can getā¦
If I apply a background it just covers one but not the otherā¦ not sure how to get them both. Css is the ONE thing that makes me go ughhhhhhhhh. HAHAHAHAHAA
Hereās what I have so far if you have any insights I would appreciate it.
- type: horizontal-stack
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-person-card
entity: device_tracker.sm_f926u1
icon_type: entity-picture
hide_name: true
layout: vertical
secondary_info: state
- type: conditional
conditions:
- entity: sensor.sm_f926u1_battery_state
state: 'charging'
card:
type: custom:mushroom-template-card
entity: sensor.sm_f926u1_battery_level
layout: vertical
icon_color: orange
icon: mdi:battery-charging-medium
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: light-green
entity: sensor.sm_f926u1_battery_state
icon: mdi:power-plug
tap_action:
action: more-info
- type: template
entity: sensor.sm_f926u1_battery_level
icon: |2
{% set bl = states('sensor.sm_f926u1_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.sm_f926u1_battery_level') | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} yellow
{% elif bl < 70 %} yellow
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
fill_container: true
name: Phone
icon: mdi:battery-charging-medium
hide_name: true
primary: '{{ states(''sensor.sm_f926u1_battery_level'') }} %'
secondary: '{{ states(''sensor.sm_f926u1_battery_temperature'') }} Ā°'
card_mod:
style: |
mushroom-shape-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: sensor.sm_f926u1_battery_state
state: 'discharging'
icon_color: red
card:
type: custom:mushroom-template-card
entity: sensor.sm_f926u1_battery_level
layout: vertical
icon_color: |2-
{% set bl = states('sensor.sm_f926u1_battery_level') | int %}
{% if bl < 10 %} #cc0c16
{% elif bl < 20 %} #e61e28
{% elif bl < 30 %} #e3464e
{% elif bl < 40 %} orange
{% elif bl < 50 %} #f0b93a
{% elif bl < 60 %} #f3f56c
{% elif bl < 70 %} #f2f536
{% elif bl < 80 %} #69f095
{% elif bl < 90 %} #2ee669
{% elif bl < 100 %} #05ad3b
{% elif bl == 100 %} #03872d
{% else %} grey
{% endif %}
primary: '{{ states(''sensor.sm_f926u1_battery_level'') }} %'
secondary: '{{ states(''sensor.sm_f926u1_battery_temperature'') }} Ā°'
tap_action:
action: more-info
fill_container: true
icon: mdi:battery-arrow-down
#- type: custom:mushroom-template-card
# secondary: >-
# {{ state_attr('device_tracker.sm_f926u1','Latitude') }}, {{
# state_attr('device_tracker.sm_f926u1','Longitude') }}, {{
# state_attr('device_tracker.sm_f926u1','Speed') }}, {{
# state_attr('device_tracker.sm_f926u1','GPS accuracy') }}
multiline_secondary: true
Yes I have the bottom commented out as I havenāt been able to get that working yet But I will at some pointā¦ more interested in getting the css more under control.
Thank you!