ā¦ excellent workā¦
Just started with mineā¦
BTW how did you integrate the computerā¦
Like CPU, Memory, C drive D drive etcā¦
Thank you so muchā¦ will try it out this weekendā¦
Hallo everybody. Iām new to the hassio and my english is not perfect. So, thanks a lot for understanding 
I was looking for a solution for longer time here, but I must give up. Probably you can help me.
I try to add a button for a group of lights which should change the color of the light (cold and warm). In my example, when I tap, the color should change to 4000 kelvin. So, the functionality is there, but I can not figure out how to change the button icon status, so that the icon color changes to green after the tap.
Thanks in advance!
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: 'Cold light'
secondary: ''
icon: mdi:snowflake
icon_color: >-
{{ 'green' if is_state('light.bulbs_group_salon', 'kelvin') == '4000' else
'' }}
layout: vertical
tap_action:
action: call-service
service: light.turn_on
target:
entity_id: light.bulbs_group_salon
data:
kelvin: 4000
Hello could somone help with changing the lock icon to the open one when the state changes, I have managed to get it to change colour from code in this thread- thank you. It would finish my dashboard off if I could get the icon to change too.
type: vertical-stack
cards:
- type: custom:mushroom-template-card
entity: binary_sensor.alarm_front_door_locked
icon: mdi:lock
icon_color: '{{ ''green'' if is_state(entity, ''off'') else ''red'' }}'
tap_action:
action: call-service
service: switch.turn_on
data: {}
target:
entity_id: switch.sonoff_10008bf604_1
secondary_info: none
hello, first of all Iām sorry for my English I use Google translate.
Iām new to Home Assistant, and Iām building a mobile dashboard.
I took part of the code to make this card. I see a line how can I eliminate it?
type: custom:stack-in-card
cards:
- type: custom:mushroom-climate-card
entity: climate.thermostat_sejour
hvac_modes:
- heat
- auto
- fan_only
show_temperature_control: true
layout: horizontal
name: Climat
icon: mdi:thermometer-auto
double_tap_action:
action: more-info
- type: custom:stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-entity-card
entity: sensor.sonde_salon_temp
primary_info: state
secondary_info: name
name: Temperature
icon_color: green
- type: custom:mushroom-entity-card
entity: sensor.sonde_salon_hum
primary_info: state
secondary_info: name
name: Humidity
icon: mdi:water-percent
icon_color: blue
- type: custom:mini-graph-card
entities:
- entity: sensor.sonde_salon_temp
name: Temperature
color: green
- entity: sensor.sonde_salon_hum
name: Humidity
color: '#2196f3'
y_axis: secondary
hours_to_show: 24
points_per_hour: 2
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
labels: true
state: false
legend: false
fill: fade
card_mod:
style: |
mushroom-shape-icon {
{% if is_state(config.entity, 'heat_cool') %}
--card-mod-icon: mdi:autorenew;
animation: spin 3s ease-in-out infinite alternate;
{% elif is_state(config.entity, 'heat') %}
--card-mod-icon: mdi:fire;
animation: heat 2s infinite;
{% elif is_state(config.entity, 'cool') %}
--card-mod-icon: mdi:snowflake;
animation: cool 6s ease-in-out infinite;
{% elif is_state(config.entity, 'dry') %}
--card-mod-icon: mdi:water-percent;
animation: dry 1.5s linear infinite;
{% elif is_state(config.entity, 'fan_only') %}
--card-mod-icon: mdi:fan;
animation: spin 1s linear infinite;
{% else %}
--card-mod-icon: mdi:air-conditioner;
{% endif %}
display: flex;
}
@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; }
}
Thanks
5 Likes
Been trying to include some elements from the minimalist theme. Iāve reused code which was made by @rhysb for my room cards and made the background and icon colors adaptive based on dark/light mode.
Code for the room cards:
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Woonkamer
secondary: '{{states(''sensor.woonkamer_room_temperature'')}}Ā°'
icon: mdi:sofa
entity: light.woonkamer
tap_action:
action: toggle
hold_action:
action: more-info
icon_color: |-
{% if is_state('light.woonkamer', 'on') %}
orange
{% endif %}
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) ha-card {
{% if is_state(config.entity, 'on') %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
--primary-text-color: rgba( {{r}}, {{g}}, {{b}}, 0.99 );
--secondary-text-color: rgba( {{r}}, {{g}}, {{b}}, 0.50 );
{%- else -%}
{%- endif %}
}
:host([dark-mode]) mushroom-shape-icon {
{% if is_state(config.entity, 'on') %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
--icon-color: rgba( {{r}}, {{g}}, {{b}}, 0.99 ) !important;
--shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.20 ) !important;
{%- else -%}
{%- endif %}
}
- type: custom:mushroom-template-card
primary: Keuken
secondary: '{{states(''sensor.hue_motion_sensor_3_temperature_2'')}}Ā°'
icon: mdi:knife
tap_action:
action: toggle
entity: light.keuken
hold_action:
action: more-info
double_tap_action:
action: none
icon_color: |-
{% if is_state('light.keuken', 'on') %}
orange
{% endif %}
card_mod:
style: |
:host([dark-mode]) ha-card {
{% if is_state(config.entity, 'on') %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
--primary-text-color: rgba( {{r}}, {{g}}, {{b}}, 0.99 );
--secondary-text-color: rgba( {{r}}, {{g}}, {{b}}, 0.50 );
{%- else -%}
{%- endif %}
}
:host([dark-mode]) mushroom-shape-icon {
{% if is_state(config.entity, 'on') %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
--icon-color: rgba( {{r}}, {{g}}, {{b}}, 0.99 ) !important;
--shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.20 ) !important;
{%- else -%}
{%- endif %}
}
The colored cards at the top are collapsible:
9 Likes
looks great, what theme are you using?
Iāve customized the mushroom theme a bit:
# Theme based on Google light and dark modem UI
# Creator: Juan - @juanmtech
# Website: https://www.juanmtech.com
# YouTube Channel: https://youtube.com/juanmtech
# My Home Assistant Config files: https://github.com/JuanMTech/Home_Assistant_files
#
#
Google Mushroom:
# Mushroom part
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
ha-card-border-width: 0
ha-card-border-radius: 20px
modes:
light:
# Header:
app-header-background-color: rgb(239, 239, 239)
app-header-text-color: rgb(95, 99, 104)
# Main Interface Colors
primary-color: rgb(26, 115, 232)
light-primary-color: var(--primary-color)
primary-background-color: rgb(239, 239, 239)
secondary-background-color: rgb(230, 230, 230)
divider-color: var(--primary-background-color)
accent-color: rgb(26, 115, 232)
# Text
primary-text-color: rgb(32, 33, 36)
secondary-text-color: rgb(95, 99, 104)
text-primary-color: rgb(255, 255, 255)
disabled-text-color: rgba(95, 99, 104, 0.4)
# Sidebar Menu
sidebar-icon-color: rgb(95, 99, 104)
sidebar-text-color: var(--sidebar-icon-color)
sidebar-background-color: rgb(255, 255, 255)
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: rgb(26, 115, 232)
sidebar-selected-text-color: var(--sidebar-selected-icon-color)
# Buttons
paper-item-icon-color: rgb(95, 99, 104)
paper-item-icon-active-color: rgb(26, 115, 232)
# States and Badges
state-icon-color: rgb(26, 115, 232)
state-icon-active-color: rgb(95, 99, 104)
state-icon-unavailable-color: var(--disabled-text-color)
# Sliders
paper-slider-knob-color: rgb(26, 115, 232)
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: var(--paper-slider-knob-color)
paper-slider-secondary-color: var(--light-primary-color)
# Labels
label-badge-background-color: rgb(248, 250, 249)
label-badge-text-color: rgb(77, 85, 117)
label-badge-red: rgb(199, 72, 76)
label-badge-green: rgb(109, 192, 113)
label-badge-blue: rgb(26, 115, 232)
label-badge-yellow: rgb(217, 183, 87)
label-badge-gray: rgb(95, 98, 103)
# Cards
card-background-color: rgb(255, 255, 255)
ha-card-background: rgb(255, 255, 255)
ha-card-border-color: none
ha-card-border-width: 0px
paper-dialog-background-color: var(--card-background-color)
paper-listbox-background-color: var(--card-background-color)
paper-card-background-color: var(--card-background-color)
# Switches
switch-checked-button-color: rgb(26, 115, 232)
switch-checked-track-color: rgb(26, 115, 232)
switch-unchecked-button-color: rgb(189, 193, 198)
switch-unchecked-track-color: rgb(189, 193, 198)
# Toggles
paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
# Table
table-row-background-color: var(--card-background-color)
table-row-alternative-background-color: var(--primary-background-color)
data-table-background-color: var(--primary-background-color)
# Dropdowns
material-background-color: var(--card-background-color)
material-secondary-background-color: var(--primary-background-color)
mdc-theme-surface: var(--primary-background-color)
# Pre/Code
markdown-code-background-color: rgb(242, 242, 242)
# Checkboxes
mdc-select-fill-color: rgb(255, 255, 255)
mdc-select-ink-color: var(--primary-text-color)
mdc-select-label-ink-color: var(--secondary-text-color)
mdc-select-idle-line-color: var(--primary-text-color)
mdc-select-dropdown-icon-color: var(--secondary-text-color)
mdc-select-hover-line-color: var(--accent-color)
# Input
input-fill-color: var(--secondary-background-color)
input-dropdown-icon-color: var(--secondary-text-color)
input-ink-color: var(--primary-text-color)
input-label-ink-color: var(--secondary-text-color)
input-idle-line-color: var(--primary-text-color)
input-hover-line-color: var(--accent-color)
#
dark:
# Minimalist
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.90)
# Header:
app-header-background-color: rgb(17, 17, 17)
app-header-text-color: rgb(198, 203, 210)
# Main Interface Colors
primary-color: rgb(138, 180, 248)
light-primary-color: var(--primary-color)
primary-background-color: rgb(17, 17, 17)
secondary-background-color: rgb(32, 33, 36)
divider-color: var(--primary-background-color)
accent-color: rgb(138, 180, 248)
# Text
primary-text-color: rgb(242, 242, 242)
secondary-text-color: rgb(166, 166, 166)
text-primary-color: var(--primary-text-color)
disabled-text-color: rgba(184, 190, 199, 0.4)
# Sidebar Menu
sidebar-icon-color: rgb(169, 177, 188)
sidebar-text-color: rgb(198, 203, 210)
sidebar-background-color: rgb(32, 33, 36)
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: rgb(138, 180, 248)
sidebar-selected-text-color: var(--sidebar-selected-icon-color)
# Buttons
paper-item-icon-color: rgb(169, 177, 188)
paper-item-icon-active-color: rgb(138, 180, 248)
# States and Badges
state-icon-color: rgb(138, 180, 248)
state-icon-active-color: rgb(169, 177, 188)
state-icon-unavailable-color: var(--disabled-text-color)
# Sliders
paper-slider-knob-color: rgb(138, 180, 248)
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: var(--paper-slider-knob-color)
paper-slider-secondary-color: var(--light-primary-color)
# Labels
label-badge-background-color: rgb(32, 33, 36)
label-badge-text-color: rgb(198, 203, 210)
label-badge-red: rgb(208, 101, 104)
label-badge-green: rgb(128, 200, 132)
label-badge-blue: rgb(138, 180, 248)
label-badge-yellow: rgb(223, 194, 113)
label-badge-gray: rgb(95, 98, 103)
# Cards
card-background-color: rgb(32, 33, 36)
ha-card-border-color: none
ha-card-border-width: 0px
paper-dialog-background-color: var(--card-background-color)
paper-listbox-background-color: var(--card-background-color)
paper-card-background-color: var(--card-background-color)
# Switches
switch-checked-button-color: rgb(138, 180, 248)
switch-checked-track-color: rgb(138, 180, 248)
switch-unchecked-button-color: rgb(172, 176, 185)
switch-unchecked-track-color: rgb(154, 160, 166)
# Toggles
paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
# Table
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
data-table-background-color: var(--primary-background-color)
mdc-checkbox-unchecked-color: rgb(169, 177, 188)
# Dropdowns
material-background-color: var(--secondary-background-color)
material-secondary-background-color: var(--primary-background-color)
mdc-theme-surface: var(--primary-background-color)
# Pre/Code
markdown-code-background-color: rgb(17, 17, 17)
# Checkboxes
mdc-select-fill-color: rgb(32, 33, 36)
mdc-select-ink-color: var(--primary-text-color)
mdc-select-label-ink-color: var(--secondary-text-color)
mdc-select-idle-line-color: var(--primary-text-color)
mdc-select-dropdown-icon-color: var(--secondary-text-color)
mdc-select-hover-line-color: var(--accent-color)
# Input
input-fill-color: var(--secondary-background-color)
input-dropdown-icon-color: var(--secondary-text-color)
input-ink-color: var(--primary-text-color)
input-label-ink-color: var(--secondary-text-color)
input-idle-line-color: var(--primary-text-color)
input-hover-line-color: var(--accent-color)
4 Likes
Hello. I want to have all the chips without background and without the border.
I was able to hide the background but the border is still there.
Hereās the code:
square: false
columns: 5
type: grid
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: 'DivisĆ£o:'
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
chips:
- type: template
content: 'Sala '
icon_color: green
icon: mdi:sofa
double_tap_action:
action: none
tap_action:
action: more-info
hold_action:
action: none
entity: cover.persiana_sala_esq
Can someone help me removing the border
myself i add the below code and once adding it after chip entire it worked as you wanted
card_mod:
style: |
ha-card
{background: transparent;
border-style: none;
}
Hi. Can you show your code for this view ?
Is there someone how knows how to create this with an input card from mushroom? I want to use it in my vacuum card. I know its possible with styling but i cannot achieve this.
1 Like
It didnāt work for me The border is still visible
Update:
Nailed it:
card_mod:
style: |
ha-card {
--chip-border-width: 0;
--chip-background: none;
}
how do you use this theme on your HA? I mean how do you include it in config files? 
The room card uses the custom:vertical-stack-in-card
Here is one of the rooms:
It has a quite simple code, you can also use the visual editor with this
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
secondary: Cucina e soggiorno
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: soggiorno
icon_color: blue
multiline_secondary: true
primary: Zona giorno
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.temperatura_soggiorno
icon_color: blue
- type: entity
entity: sensor.umidita_soggiorno_knx
icon_color: blue
Inside your āCONFIGā folder there is a folder āthemesā. There should be a folder āmushroomā. Duplicate that folder and rename it to whatever you like. Then rename the yaml file inside it and paste my code inside the file. Reboot.
I do not have such a folder thereā¦
should I install a mushroom theme?
Since youāre replying in the Mushroom Cards topic I thought you already had that installed but yeah, please install.
