This is awesome, much better than what I had in mind.
Can you create a “black” (or “dark”) mushroom theme easily or is there any one already available?
I’m asking for this because the current frontend set theme API from HA does not allow you to set dark / light theme through it (the existing “mode” setting does something different) and the browser_mod which allows you to control this is too flaky.
So my solution is to set devices I want to control to use the “Default Theme” and then to have a specific dark mode theme.
If anyone is aware of a dark/black mushroom theme, pls let me know. Or how I can create one myself. Thanks!
I just use caule-themes-pack-1/info.md at 0ec8a4b7acf63d8618bcf2fdd968d6256e998acb · ricardoquecria/caule-themes-pack-1 · GitHub or GitHub - AmoebeLabs/HA-Theme_M3-C11-Purple: Material Design 3 / Material YOU theme for Home Assistant. A separate theme can be applied as default for light or dark mode using the the call service. Make sure you press the call service button for each setting.
Want dark all the time, set the dark theme for both light and dark.
Set each dashboard to no theme and do not apply any themes to the cards. The system will follow default then.
Make sure theme is set for default on each device used to login.
Here is the code for the animations. Message me if you have any issues implementing it.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:stove
icon_color: white
primary: Stove
card_mod:
style: |
ha-card{
background: none !important;
border: none !important;
padding-bottom: 0px !important;
z-index: 0;
height: 50px !important;
}
- type: custom:mushroom-template-card
icon: mdi:heat-wave
icon_color: orange
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
--icon-symbol-size: 20px;
{% if states('sensor.range_cooktop_burner') == 'run' %}
{% else %}
--icon-color: transparent;
{% endif %}
}
.: |
ha-card {
margin-top: -74px !important;
border: none;
}
ha-state-icon {
{% if states('sensor.range_cooktop_burner') == 'run' %}
animation: top 2s alternate infinite;
{% endif %}
}
@keyframes top {
0%, 100% { clip-path: inset(100% 0 0 0); }
0% { clip-path: inset(35% 0 0 0 ); }
}
- type: custom:mushroom-template-card
icon: mdi:radiator
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
rotate: ;
--icon-symbol-size: 17px;
{% if states('sensor.range_oven_job_state') == 'cooking' %}
}
.shape:before {
content: "";
height: 12px;
width: 16px;
border-width: 0;
position: absolute;
background: black;
top: 12px !important;
left: 12px !important;
}
{% else %}
--icon-color: transparent;
{% endif %}
}
.: |
ha-card {
margin-top: -65px !important;
border: none;
}
ha-state-icon {
{% if states('sensor.range_oven_job_state') == 'cooking' %}
animation: oven 2s alternate infinite;
{% endif %}
}
@keyframes oven {
0%, 100% { clip-path: inset(50% 0 0 0); }
0% { clip-path: inset(0 0 0 0 ); }
}
3 Likes
For my understanding, these settings aren’t working for you? redline highlight
What does the box say where I highlighted green?
You even have the option to create your own theme, which is quite simple.
Amazing, thank you, I implement when I get in and let you know.
1 Like
Thanks, it works but only without other styles. Can this work with ha-card and for all light chips?
- type: custom:mushroom-chips-card
card_mod:
style: |
mushroom-light-chip:nth-child(1)$: |
ha-state-icon {
--icon-color: blue;
}
ha-card {
--chip-box-shadow: none;
--chip-background: none;
-chip-spacing: none;
--chip-icon-size: 22px;
--primary-text-color: rgb(var(--rgb-disabled));
}
chips:
- type: light
yes you can add ha-card. checkout this guide
especially the
What the $ and .: | symbols do
type: custom:mushroom-chips-card
chips:
- type: light
entity: light.lights_off
icon: mdi:ceiling-light
- type: light
entity: light.kitchen
- type: light
entity: light.bar_2
card_mod:
style:
mushroom-light-chip:nth-child(1)$: |
ha-state-icon {
--icon-color: blue;
}
mushroom-light-chip:nth-child(2)$: |
ha-state-icon {
--icon-color: red;
}
mushroom-light-chip:nth-child(3)$: |
ha-state-icon {
--icon-color: green;
}
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
-chip-spacing: none;
--chip-icon-size: 22px;
--primary-text-color: rgb(var(--rgb-disabled));
}
2 Likes
I have 8 custom:mushroom-template-card’s with tap actions, when tapped running (the same) script.
Is there a way to check in the script which custom:mushroom-template-card is tapped ?
I made 1 script for the 8 cards, but when one is pressed, I want to set the state to on, before the script starts running…
Is there a possibility to change the text of the status, for example so that instead of “Off” it prints the text I want!
If state is off then “text” ?
Yes, but on the chip card itself!
Like this ?
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
content: |-
{% if 'on' in states('light.nspanel_relay_1') %}
ON, maybe?
{% else %}
OFFish
{% endif %}
icon: mdi:lightbulb
entity: light.nspanel_relay_1
1 Like
Change Mushroom Number Card Slider Colour based on state.
Thought I would post because I could not find many examples, this one based on a soil moisture meter.
Made to align with this gauge card.
- type: custom:mushroom-number-card
entity: input_number.back_garden_set_moisture
display_mode: slider
name: Back Garden Set Moisture Level
card_mod:
style:
mushroom-number-value-control$: |
mushroom-slider {
{% set nbr= states('input_number.back_garden_set_moisture') | float %}
{% if nbr<21 %}
--main-color: #F75050 !important;
--bg-color: #700700 !important;
{% elif nbr<41 %}
--main-color: #EEE049 !important;
--bg-color: #737500 !important;
{% elif nbr<61 %}
--main-color: #55E84A !important;
--bg-color: #006122 !important;
{% elif nbr<100 %}
--main-color: #39BEEA !important;
--bg-color: #006875 !important;
{% endif %}
}
2 Likes
Gradient Slider Background.
Grandients made with CSS Gradient
HARD GRADIENT
type: horizontal-stack
cards:
- type: custom:mushroom-number-card
entity: input_number.back_garden_set_moisture
display_mode: slider
name: Back Garden Set Target Moisture Level
card_mod:
style:
mushroom-number-value-control$: |
mushroom-slider {
{% set nbr= states('input_number.back_garden_set_moisture') | float %}
{% if nbr<21 %}
--main-color: #F75050 !important;
--gradient: -webkit-linear-gradient(360deg, rgba(112,7,0,1) 20%, rgba(115,117,0,1) 21%, rgba(115,117,0,1) 40%, rgba(0,97,34,1) 41%, rgba(0,97,34,1) 60%, rgba(0,104,117,1) 61%) !important;
{% elif nbr<41 %}
--main-color: #EEE049 !important;
--gradient: -webkit-linear-gradient(360deg, rgba(112,7,0,1) 20%, rgba(115,117,0,1) 21%, rgba(115,117,0,1) 40%, rgba(0,97,34,1) 41%, rgba(0,97,34,1) 60%, rgba(0,104,117,1) 61%) !important;
{% elif nbr<61 %}
--main-color: #55E84A !important;
--gradient: -webkit-linear-gradient(360deg, rgba(112,7,0,1) 20%, rgba(115,117,0,1) 21%, rgba(115,117,0,1) 40%, rgba(0,97,34,1) 41%, rgba(0,97,34,1) 60%, rgba(0,104,117,1) 61%) !important;
{% elif nbr<100 %}
--main-color: #39BEEA !important;
--gradient: -webkit-linear-gradient(360deg, rgba(112,7,0,1) 20%, rgba(115,117,0,1) 21%, rgba(115,117,0,1) 40%, rgba(0,97,34,1) 41%, rgba(0,97,34,1) 60%, rgba(0,104,117,1) 61%) !important;
{% endif %}
}
SOFT GRADIENT
type: horizontal-stack
cards:
- type: custom:mushroom-number-card
entity: input_number.back_garden_set_moisture
display_mode: slider
name: Back Garden Set Target Moisture Level
card_mod:
style:
mushroom-number-value-control$: |
mushroom-slider {
{% set nbr= states('input_number.back_garden_set_moisture') | float %}
{% if nbr<21 %}
--main-color: #F75050 !important;
--gradient: -webkit-linear-gradient(360deg, rgba(112,7,0,1) 10%, rgba(115,117,0,1) 30%, rgba(0,97,34,1) 50%, rgba(0,104,117,1) 75%) !important;
{% elif nbr<41 %}
--main-color: #EEE049 !important;
--gradient: -webkit-linear-gradient(360deg, rgba(112,7,0,1) 10%, rgba(115,117,0,1) 30%, rgba(0,97,34,1) 50%, rgba(0,104,117,1) 75%) !important;
{% elif nbr<61 %}
--main-color: #55E84A !important;
--gradient: -webkit-linear-gradient(360deg, rgba(112,7,0,1) 10%, rgba(115,117,0,1) 30%, rgba(0,97,34,1) 50%, rgba(0,104,117,1) 75%) !important;
{% elif nbr<100 %}
--main-color: #39BEEA !important;
--gradient: -webkit-linear-gradient(360deg, rgba(112,7,0,1) 10%, rgba(115,117,0,1) 30%, rgba(0,97,34,1) 50%, rgba(0,104,117,1) 75%) !important;
{% endif %}
}
Thank you !
Is it possible for this to work within a chip card? Something like below?
type: custom:mushroom-chips-card
chips:
- type: custom:mushroom-template-card
entity: switch.fan
icon: mdi:fan
icon_color: '{{ ''grey'' if states(config.entity) == ''off'' else ''blue''}}'
primary: '{{ ''Not Running'' if states(config.entity) == ''off'' else ''Running''}}'
tap_action:
action: navigate
navigation_path: /lovelace/temperature
card_mod:
style: |
ha-icon {
{{ 'animation: spin 1s linear infinite;' if states(config.entity) == 'on' else 'animation: none;' }}
}
This should work
type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.fan
icon: mdi:fan
icon_color: '{{ ''grey'' if states(config.entity) == ''off'' else ''blue''}}'
content: '{{ ''Not Running'' if states(config.entity) == ''off'' else ''Running''}}'
tap_action:
action: navigate
navigation_path: /lovelace/temperature
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{{ 'animation: spin 1s linear infinite;' if is_state('switch.fan', 'on') else 'animation: none;' }}
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
Thank you, that works on it’s own but won’t work when I build it into my room tile.
Ignore all the entities being all over the place at the moment, I’m just testing and creating the card so using lights for now as conditions etc.
Any suggestions?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Bathroom
secondary: >-
{{ states('sensor.openweathermap_temperature') | round (1) }}°C - {{
states('sensor.openweathermap_humidity') }}%
icon: mdi:tree
entity: light.soffit_lights
hold_action:
action: toggle
tap_action:
action: navigate
navigation_path: /home-v2/outside
icon_color: '{{ "orange" if is_state("light.soffit_lights", "on") else "disabled" }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 0px 0px 5px black;
--card-primary-font-weight: 325;
--card-primary-color: white;
--card-primary-font-size: 20px;
align-items: end;
margin-top: 175px;
inline-size: 180px;
height: 25px;
}
.secondary {
--card-secondary-font-size: 13px;
text-shadow: 0px 0px 5px black;
--card-secondary-color: white;
--card-secondary-font-weight: 350;
margin-top: -2px;
}
.: |
:host {
{% if is_state('light.soffit_lights', 'off') %}
background: url('/local/images/areas/bathroom.jpg') center;
background-size: cover;
background-position-y: 70px;
background-blend-mode: overlay;
#filter: grayscale(70%);
background-color: rgba(var(--rgb-card-background-color), 0.0);
{% endif %}
--mush-icon-size: 0px;
height: 220px;
margin-left: -15px !important;
margin-top: -70px !important;
{% if is_state('light.soffit_lights', 'on') %}
background: url('/local/images/areas/bathroom.jpg') center;
background-size: cover;
background-blend-mode: overlay;
background-position-y: 70px;
background-color: rgba(var(--rgb-card-background-color), 0.0);
{% endif %}
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'orange' if is_state('light.soffit_lights', 'on') else 'disabled' }}), 0.4) !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.dining_room_lamp
icon: mdi:fan
icon_color: '{{ ''grey'' if states(config.entity) == ''off'' else ''blue''}}'
content: ''
tap_action:
action: navigate
navigation_path: /lovelace/temperature
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{{ 'animation: spin 1s linear infinite;' if is_state('light.dining_room_lamp', 'on') else 'animation: none;' }}
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
- type: template
entity: light.soffit_lights
icon: >-
{{ 'mdi:lightbulb' if expand(area_entities('outside')) |
selectattr('domain','eq','light') | selectattr('state','eq','on') |
list | count > 0 else 'mdi:lightbulb-outline' }}
icon_color: >
{% set lights_in_outside = expand(area_entities('outside')) |
selectattr('domain', 'eq', 'light') | list %} {{ 'orange' if
lights_in_outside | selectattr('state', 'eq', 'on') | list | count > 0
else 'grey' }}
content: >-
{{ expand(area_entities('outside')) |
selectattr('domain','eq','light') | selectattr('state','eq','on') |
list | count }}
tap_action:
action: call-service
service: light.toggle
target:
area_id: outside
hold_action:
action: more-info
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: -15px;
margin-top: -10px;
}
card_mod:
style: |
ha-card {
height: 180px;
width: 180px;
margin-left: auto;
margin-right: auto;
{% if is_state('light.soffit_lights', 'on') %}
#box-shadow: 0 0 20px rgba(245, 173, 66, 0.5);
#border-radius: 10px;
#background: rgba(245, 173, 66, 0.3); {% endif %}
}
1 Like