Hello,
I’m looking for the solution to display the date in template card like entity card for the secondary line.
By defaut, we’ve a date format “XX minutes ago” but when we use the template card, it show a timestamp.
How can I convert the timestamp to have the same resultat that the entity card by default ?
Here is my secondary line for the template card
secondary: |
{{ states(entity) }}
Thanks.
Whilst I am not a football fan I can see the considerable work that has gone into this and it looks great. Well done.
This is the route I ended up taking, thanks very much for pointing me in this direction! It’s not quite perfect yet, but minimalist area card definitely does manage to cover most of the functionality I was looking for in migrating. Moving over to mushroom has been very enjoyable so far!
Thank you very much. I am trying to use Home Assistant not only for Smart home but for smart life. Now I have found much more informative calendars for football as well. I think I may also display match results from fixtures, but of course it mostly depends on how accurately and fast these services upload the scores to calendar events.
Later on I am also planning to use rss services for different pages.
Mushroom cards create the --rgb-[color] dynamically, so are only available within a Mushroom card. If --mush-rgb-[color] is defined it uses this value, otherwise it uses the hardcoded --default-[color] value. The --mush-rgb-[color] values can be defined in a theme file and these will then also be available to other cards. So, if you want to use the CSS values outside of the Mushroom cards you will need to define them in a custom theme. The quick and easy way to do this is to copy @piitaya’s example from his theme github and place it in a new theme file.
Here is a Mushroom Input Number card if anyone needs one. It requires stack-in-card, mushroom-card, car-mod and my-slider from my-cards.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: input_number.lounge_pc_volume
icon: |
{% set vol_level = states(entity) | float %}
{% if vol_level == 0 %}
mdi:volume-mute
{% elif vol_level > 0.66 %}
mdi:volume-high
{% elif vol_level < 0.33 %}
mdi:volume-low
{% else %}
mdi:volume-medium
{% endif %}
icon_color: indigo
primary: Volume
secondary: |
{% set vol = states(entity) | float * 100 %}
{{ vol | round | int }}%
- type: custom:my-slider
entity: input_number.lounge_pc_volume
radius: 12px
height: 42px
mainSliderColor: rgb(var(--mush-rgb-indigo))
secondarySliderColor: rgba(var(--mush-rgb-indigo), 0.2)
mainSliderColorOff: rgb(var(--mush-rgb-disabled))
secondarySliderColorOff: rgba(var(--mush-rgb-disabled), 0.2)
thumbHorizontalPadding: 0px
thumbVerticalPadding: 0px
thumbWidth: 0px
card_mod:
style: |
ha-card {
padding: 0px 11px 11px;
--mush-rgb-disabled: 189,189,189;
--mush-rgb-indigo: 63, 81, 181;
}
Hey folks,
I’m just starting to migrate over to the Mushroom Cards, and I want to show a chip for each person with the appropriate battery level as the icon, coloured based on the battery percentage.
The following code returns the correct result in developer settings -> templates, however when I move it into the card editor for the dashboard it throws missed comma between flow collection entries
{% for p in states.person -%}
{% set name = p.entity_id -%}
# Make sure we have a source from which to collect the battery level
{% if state_attr(name, 'source') -%}
# Get the battery_level data for the appropriate user
{% set battery_level = states('sensor.{}_battery_level'.format(state_attr(name,
'source').split('.')[1])) -%}
{% else -%}
# If we don't have a battery_level, set it to -1 so we can filter on it later
{% set battery_level = -1 -%}
{% endif -%}
type: custom:mushroom-chips-card
chips:
- type: template
content: >
{{ state_attr(name, "friendly_name") }} {% if (battery_level != "unknown") and (battery_level | int >= 0) %}({{ battery_level }}%){% endif %}
{% if (battery_level != "unknown") and (battery_level | int >= 0) %}
icon: >-
{{ state_attr(states('sensor.{}_battery_level'.format(state_attr(name,
'source').split('.')[1])), 'icon') }}
icon_color: >-
{% if states('sensor.{}_battery_level'.format(state_attr(name,
'source').split('.')[1])) | int < 20 -%}
red
{% elif states('sensor.{}_battery_level'.format(state_attr(name,
'source').split('.')[1])) | int < 50 -%}
orange
{% else -%}
green
{% endif %}
{% endif %}
{% endfor -%}
The resulting card should look like this for each user:
Is anyone able help?
type: custom:stack-in-card
mode: vertical
keep:
box_shadow: true
border_radius: true
margin: true
outer_padding: true
background: true
cards:
- type: vertical-stack
cards:
- type: conditional
conditions:
- entity: media_player.garage
state_not: 'off'
card:
type: custom:mini-media-player
style: |
:host {
--mini-media-player-name-font-weight: 500;
--mini-media-player-artwork-opacity: 1;
--mini-media-player-media-cover-info-color: white;
--mini-media-player-overlay-base-color: #2196f3;
}
entity: media_player.garage
info: scroll
artwork: cover
volume_stateless: false
toggle_power: true
hide:
runtime_remaining: false
runtime: false
info: false
power: true
power_state: false
progress: false
source: false
play_stop: true
volume_level: false
controls: true
volume: true
icon: true
name: false
- type: conditional
conditions:
- entity: media_player.kuche
state_not: 'off'
card:
type: custom:mini-media-player
style: |
:host {
--mini-media-player-name-font-weight: 500;
--mini-media-player-artwork-opacity: 1;
--mini-media-player-media-cover-info-color: white;
--mini-media-player-overlay-base-color: #2196f3;
}
entity: media_player.kuche
info: scroll
artwork: cover
volume_stateless: false
toggle_power: true
hide:
runtime_remaining: false
runtime: false
info: false
power: true
power_state: false
progress: false
source: false
play_stop: true
volume_level: false
controls: true
volume: true
icon: true
name: false
- type: conditional
conditions:
- entity: media_player.tv_samsung_6_series_55
state: 'on'
card:
type: custom:mini-media-player
style: |
:host {
--mini-media-player-name-font-weight: 500;
--mini-media-player-artwork-opacity: 1;
--mini-media-player-media-cover-info-color: white;
--mini-media-player-overlay-base-color: #2196f3;
}
entity: media_player.tv_samsung_6_series_55
info: scroll
artwork: cover
volume_stateless: false
toggle_power: true
hide:
runtime_remaining: false
runtime: false
info: false
power: true
power_state: false
progress: false
source: false
play_stop: true
volume_level: false
controls: true
volume: true
icon: true
name: false
- type: conditional
conditions:
- entity: media_player.laptop
state: playing
card:
type: custom:mini-media-player
style: |
:host {
--mini-media-player-name-font-weight: 500;
--mini-media-player-artwork-opacity: 1;
--mini-media-player-media-cover-info-color: white;
--mini-media-player-overlay-base-color: #2196f3;
}
entity: media_player.laptop
info: scroll
artwork: cover
volume_stateless: false
toggle_power: true
hide:
runtime_remaining: false
runtime: false
info: false
power: true
power_state: false
progress: false
source: false
play_stop: true
volume_level: false
controls: true
volume: true
icon: true
name: false
- square: false
columns: 4
type: grid
cards:
- type: custom:mushroom-template-card
style: |
:host {
--primary-text-color:
{% if is_state('input_select.lms_player', 'garage')%} #2196f3
{% else %} #9e9e9e
{% endif %}
}
secondary: ''
icon: mdi:radio
entity: media_player.garage
primary: Garage
multiline_secondary: true
icon_color: >-
{{ is_state("input_select.lms_player", "garage") | iif("blue",
"disabled") }}
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: garage
target:
entity_id: input_select.lms_player
fill_container: true
hold_action:
action: more-info
layout: vertical
- type: custom:mushroom-template-card
style: |
:host {
--primary-text-color:
{% if is_state('input_select.lms_player', 'kuche')%} #2196f3
{% else %} #9e9e9e
{% endif %}
}
secondary: ''
icon: mdi:silverware-fork-knife
entity: media_player.kuche
primary: Küche
multiline_secondary: true
icon_color: >-
{{ is_state("input_select.lms_player", "kuche") | iif("blue",
"disabled") }}
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: kuche
target:
entity_id: input_select.lms_player
fill_container: true
layout: vertical
hold_action:
action: more-info
- type: custom:mushroom-template-card
style: |
:host {
--primary-text-color:
{% if is_state('input_select.lms_player', 'tv_samsung_6_series_55')%} #2196f3
{% else %} #9e9e9e
{% endif %}
}
secondary: ''
icon: mdi:television-classic
entity: media_player.tv_samsung_6_series_55_3
multiline_secondary: true
icon_color: >-
{{ is_state("input_select.lms_player", "tv_samsung_6_series_55") |
iif("blue", "disabled") }}
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: tv_samsung_6_series_55
target:
entity_id: input_select.lms_player
fill_container: true
layout: vertical
hold_action:
action: more-info
primary: TV
- type: custom:mushroom-template-card
style: |
:host {
--primary-text-color:
{% if is_state('input_select.lms_player', 'laptop')%} #2196f3
{% else %} #9e9e9e
{% endif %}
}
secondary: ''
icon: mdi:laptop
entity: media_player.laptop
primary: Laptop
multiline_secondary: true
icon_color: >-
{{ is_state("input_select.lms_player", "laptop") | iif("blue",
"disabled") }}
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: laptop
target:
entity_id: input_select.lms_player
fill_container: true
layout: vertical
hold_action:
action: more-info
- type: entities
entities:
- type: custom:fold-entity-row
padding: 0
style:
ha-icon:
$: |
ha-svg-icon {
color: #ff5722;
}
head:
type: custom:button-card
name: Romania Radiostation
tap_action:
action: none
styles:
card:
- margin-bottom: 0px
- padding-bottom: 0px
- padding-top: 0px
- box-shadow: none
name:
- justify-self: start
- padding-left: 8px
- font-size: 15px
- font-weight: bold
- color: '#795548'
entities:
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-border-radius: 12px;
--primary-text-color: grey;
}
chips:
- type: template
entity: input_select.chromecast_radio_station
icon_color: >-
{{ is_state("input_select.chromecast_radio_station", "ProFM")
| iif("blue", "disabled") }}
content: 'Pro FM '
icon: >-
{{ is_state("input_select.chromecast_radio_station", "ProFM")
| iif("mdi:checkbox-blank-circle",
"mdi:checkbox-blank-circle-outline") }}
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: ProFM
target:
entity_id: input_select.chromecast_radio_station
- type: template
entity: input_select.chromecast_radio_station
icon_color: >-
{{ is_state("input_select.chromecast_radio_station", "KissFM")
| iif("blue", "disabled") }}
content: Kiss FM
icon: >-
{{ is_state("input_select.chromecast_radio_station", "KissFM")
| iif("mdi:checkbox-blank-circle",
"mdi:checkbox-blank-circle-outline") }}
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: KissFM
target:
entity_id: input_select.chromecast_radio_station
- type: template
entity: input_select.chromecast_radio_station
icon_color: >-
{{ is_state("input_select.chromecast_radio_station",
"EuropaFM") | iif("blue", "disabled") }}
content: Europa FM
icon: >-
{{ is_state("input_select.chromecast_radio_station",
"EuropaFM") | iif("mdi:checkbox-blank-circle",
"mdi:checkbox-blank-circle-outline") }}
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: EuropaFM
target:
entity_id: input_select.chromecast_radio_station
- type: template
entity: input_select.chromecast_radio_station
icon_color: >-
{{ is_state("input_select.chromecast_radio_station",
"RadioZu") | iif("blue", "disabled") }}
content: RadioZu
icon: >-
{{ is_state("input_select.chromecast_radio_station",
"RadioZu") | iif("mdi:checkbox-blank-circle",
"mdi:checkbox-blank-circle-outline") }}
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: RadioZu
target:
entity_id: input_select.chromecast_radio_station
- type: template
entity: input_select.chromecast_radio_station
icon_color: >-
{{ is_state("input_select.chromecast_radio_station", "DigiFM")
| iif("blue", "disabled") }}
content: Digi FM
icon: >-
{{ is_state("input_select.chromecast_radio_station", "DigiFM")
| iif("mdi:checkbox-blank-circle",
"mdi:checkbox-blank-circle-outline") }}
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: DigiFM
target:
entity_id: input_select.chromecast_radio_station
- type: template
entity: input_select.chromecast_radio_station
icon_color: >-
{{ is_state("input_select.chromecast_radio_station",
"MagicFM") | iif("blue", "disabled") }}
content: Magic FM
icon: >-
{{ is_state("input_select.chromecast_radio_station",
"MagicFM") | iif("mdi:checkbox-blank-circle",
"mdi:checkbox-blank-circle-outline") }}
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: MagicFM
target:
entity_id: input_select.chromecast_radio_station
- type: template
entity: input_select.chromecast_radio_station
icon_color: >-
{{ is_state("input_select.chromecast_radio_station",
"VirginRadio") | iif("blue", "disabled") }}
content: Virgin Radio
icon: >-
{{ is_state("input_select.chromecast_radio_station",
"VirginRadio") | iif("mdi:checkbox-blank-circle",
"mdi:checkbox-blank-circle-outline") }}
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: VirginRadio
target:
entity_id: input_select.chromecast_radio_station
- type: template
entity: input_select.chromecast_radio_station
icon_color: >-
{{ is_state("input_select.chromecast_radio_station",
"RadioMedias") | iif("blue", "disabled") }}
content: Radio Medias
icon: >-
{{ is_state("input_select.chromecast_radio_station",
"RadioMedias") | iif("mdi:checkbox-blank-circle",
"mdi:checkbox-blank-circle-outline") }}
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: RadioMedias
target:
entity_id: input_select.chromecast_radio_station
- type: template
entity: input_select.chromecast_radio_station
icon_color: >-
{{ is_state("input_select.chromecast_radio_station",
"RadioPetrecere") | iif("blue", "disabled") }}
content: Radio Petrecere
icon: >-
{{ is_state("input_select.chromecast_radio_station",
"RadioPetrecere") | iif("mdi:checkbox-blank-circle",
"mdi:checkbox-blank-circle-outline") }}
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: RadioPetrecere
target:
entity_id: input_select.chromecast_radio_station
- type: template
entity: input_select.chromecast_radio_station
icon_color: >-
{{ is_state("input_select.chromecast_radio_station",
"NationalFM") | iif("blue", "disabled") }}
content: National FM
icon: >-
{{ is_state("input_select.chromecast_radio_station",
"NationalFM") | iif("mdi:checkbox-blank-circle",
"mdi:checkbox-blank-circle-outline") }}
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: NationalFM
target:
entity_id: input_select.chromecast_radio_station
- type: template
entity: input_select.chromecast_radio_station
icon_color: >-
{{ is_state("input_select.chromecast_radio_station",
"WefunkRadio") | iif("blue", "disabled") }}
content: WeFunk Radio
icon: >-
{{ is_state("input_select.chromecast_radio_station",
"WefunkRadio") | iif("mdi:checkbox-blank-circle",
"mdi:checkbox-blank-circle-outline") }}
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: WefunkRadio
target:
entity_id: input_select.chromecast_radio_station
- type: template
entity: input_select.chromecast_radio_station
icon_color: >-
{{ is_state("input_select.chromecast_radio_station",
"FunkyRadio") | iif("blue", "disabled") }}
content: Funky Radio
icon: >-
{{ is_state("input_select.chromecast_radio_station",
"FunkyRadio") | iif("mdi:checkbox-blank-circle",
"mdi:checkbox-blank-circle-outline") }}
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: FunkyRadio
target:
entity_id: input_select.chromecast_radio_station
- type: template
entity: input_select.chromecast_radio_station
icon_color: >-
{{ is_state("input_select.chromecast_radio_station",
"RadioFunkyThrills") | iif("blue", "disabled") }}
content: Radio Funky Thrills
icon: >-
{{ is_state("input_select.chromecast_radio_station",
"RadioFunkyThrills") | iif("mdi:checkbox-blank-circle",
"mdi:checkbox-blank-circle-outline") }}
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: RadioFunkyThrills
target:
entity_id: input_select.chromecast_radio_station
alignment: null
- type: entities
entities:
- type: custom:fold-entity-row
padding: 0
style:
ha-icon:
$: |
ha-svg-icon {
color: #ff5722;
}
head:
type: custom:button-card
name: Lokalsender
tap_action:
action: none
styles:
card:
- margin-bottom: 0px
- padding-bottom: 0px
- padding-top: 0px
- box-shadow: none
name:
- justify-self: start
- padding-left: 8px
- font-size: 15px
- font-weight: bold
- color: '#795548'
entities:
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-border-radius: 12px;
--primary-text-color: grey;
}
chips:
- type: template
entity: input_select.chromecast_radio_station
icon_color: >-
{{ is_state("input_select.chromecast_radio_station",
"Bayern1") | iif("blue", "disabled") }}
content: Bayern1
icon: >-
{{ is_state("input_select.chromecast_radio_station",
"Bayern1") | iif("mdi:checkbox-blank-circle",
"mdi:checkbox-blank-circle-outline") }}
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: Bayern1
target:
entity_id: input_select.chromecast_radio_station
- type: template
entity: input_select.chromecast_radio_station
icon_color: >-
{{ is_state("input_select.chromecast_radio_station",
"Bayern3") | iif("blue", "disabled") }}
content: Bayern3
icon: >-
{{ is_state("input_select.chromecast_radio_station",
"Bayern3") | iif("mdi:checkbox-blank-circle",
"mdi:checkbox-blank-circle-outline") }}
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: Bayern3
target:
entity_id: input_select.chromecast_radio_station
- type: template
entity: input_select.chromecast_radio_station
icon_color: >-
{{ is_state("input_select.chromecast_radio_station",
"Charivari") | iif("blue", "disabled") }}
content: Charivari
icon: >-
{{ is_state("input_select.chromecast_radio_station",
"Charivari") | iif("mdi:checkbox-blank-circle",
"mdi:checkbox-blank-circle-outline") }}
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: Charivari
target:
entity_id: input_select.chromecast_radio_station
- type: template
entity: input_select.chromecast_radio_station
icon_color: >-
{{ is_state("input_select.chromecast_radio_station", "Energy")
| iif("blue", "disabled") }}
content: Energy
icon: >-
{{ is_state("input_select.chromecast_radio_station", "Energy")
| iif("mdi:checkbox-blank-circle",
"mdi:checkbox-blank-circle-outline") }}
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: Energy
target:
entity_id: input_select.chromecast_radio_station
- type: custom:mushroom-chips-card
chips:
- type: action
icon_color: blue
icon: mdi:play
tap_action:
action: call-service
service: script.lms
service_data: {}
target: {}
- type: action
icon_color: deep-orange
icon: mdi:stop
tap_action:
action: call-service
service: script.lms_stop
service_data: {}
target: {}
- type: action
tap_action:
action: call-service
service: input_number.decrement
service_data: {}
target:
entity_id: input_number.lms_volume
icon: mdi:volume-minus
icon_color: grey
- type: action
icon: mdi:volume-plus
tap_action:
action: call-service
service: input_number.increment
service_data: {}
target:
entity_id: input_number.lms_volume
icon_color: grey
Has anyone used mushroom card/custom in stack card with input_selects and input_numbers? If yes can you share yaml/pictures?
Just with sensors.
Code if it helps 
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-entity-card
name: Fuktighet
icon: mdi:water
entity: sensor.tomat_plante_manuel_moisture
layout: vertical
- type: custom:mushroom-entity-card
name: Lys
icon: mdi:weather-sunny
icon_color: amber
entity: sensor.tomat_plante_manuel_brightness
layout: vertical
- type: custom:mushroom-entity-card
name: Temperatur
icon_color: light-green
entity: sensor.tomat_plante_manuel_temperature
layout: vertical
- type: custom:mushroom-entity-card
name: Gjødsel
icon: mdi:sprout
icon_color: brown
entity: sensor.tomat_plante_manuel_conductivity
layout: vertical
Thank you. What I’m really looking for is how someone handled the ability to select from an input select. Was it simply using a tap action: more-info or did they use something more elegant to avoid using that generic page/pop-up.
Simple question here but trying to figure out best way to do it. I’m trying have a dropdown from the “All Living Room Switches.” Any thoughts/code on how to do that or do I have to use custom conditional card and custom card mod and write the code? Obviously using Mushroom to avoid any yaml editing for my basic needs like this. Would like to do it from the “double tap action” option
It looks very impressive.
I would really love to see a code for a rss weather forecast,
Thank you for the reply. So I guess I have to bite the bullet and confront something I’d been wary of my own understanding all along I’ve noted the various comments in the thread about the separate Theme package but never quite understood how to put it into practice. When installed manually or through HACS, the actual theme files are just a few lines long (3-5) however the Github page lists several pages of variables. I’ve just assumed that what we see on the Github page we get for “free” in the cards themselves, and if we wanted to extend the theme out to non-Mushroom cards one would just need to include the variables listed in Github in the actual theme file loaded by HA. Is that right? That’s what I’ve done to try and expose the colors for this use-case, anyway. My mushroom.yaml theme file now contains everything listed in the Github and I think I have many more variables available to me when working through Inspector.
However… I still can’t seem to get this licked. Original problem statement just for recap was that I’d like to use you (Rhys’) room card or something similar but vary the colors of the individual rooms a bit. So the icon color is easy enough to set, but it’s the rest of the card’s background I’m having trouble setting. Would you mind terribly to share a snippet of one of your room cards where one of the target rooms utilizes a color other than the default/orange?
Thank you!
The Mushroom theme settings allow you to customize/override the the default settings of the Mushroom cards. For instance if you want to use amber for the lights, instead of orange, you can override it by adding mush-rgb-state-light: var(--mush-rgb-amber) to your theme file. In the same way you can change what red is by specifying a different value for mush-rgb-red, say pure red with mush-rgb-red: 255, 0, 0. Now every time a Mushroom card uses red it will be this new value of red we have specified in our theme. These ‘mush’ values are only for Mushroom cards, they don’t affect any of the normal HA cards. The advantage of specifying the ‘mush’ values in a theme, even if we do not change them, is that they are now available to be used in CSS anywhere.
This is what I have in my Mushroom theme file:
Mushroom Custom:
# HA variables
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
ha-card-border-radius: 20px
# Mushroom layout
#mush-spacing: 12px
# Title
#mush-title-padding: 24px 12px 16px
#mush-title-spacing: 12px
#mush-title-font-size: 24px
#mush-title-font-weight: normal
#mush-title-line-height: 1.2
# Subtitle
#mush-subtitle-font-size: 16px
#mush-subtitle-font-weight: normal
#mush-subtitle-line-height: 1.2
# Card
#mush-card-primary-font-size: 14px
#mush-card-secondary-font-size: 12px
#mush-card-primary-font-weight: bold
#mush-card-secondary-font-weight: bolder
#mush-card-primary-line-height: 1.5
#mush-card-secondary-line-height: 1.5
# Chip
#mush-chip-spacing: 8px
#mush-chip-padding: 0 0.25em
#mush-chip-height: 36px
#mush-chip-border-radius: 18px
#mush-chip-font-size: 0.3em
#mush-chip-font-weight: bold
#mush-chip-icon-size: 0.5em
#mush-chip-avatar-padding: 0.1em
#mush-chip-avatar-border-radius: 50%
#mush-chip-box-shadow: var(--ha-card-box-shadow)
#mush-chip-background: var(--ha-card-background)
# Control
#mush-control-border-radius: 12px
#mush-control-height: 42px
#mush-control-button-ratio: 1
#mush-control-icon-size: 0.5em
# Slider
#mush-slider-threshold: 10
# Badge
#mush-badge-size: 16px
mush-badge-icon-size: 0.8em
#mush-badge-border-radius: 50%
# Icon
#mush-icon-border-radius: 50%
#mush-icon-size: 42px
#mush-icon-symbol-size: 0.5em
# Colors
mush-rgb-red: 244, 67, 54
mush-rgb-pink: 233, 30, 99
mush-rgb-purple: 156, 39, 176
mush-rgb-deep-purple: 103, 58, 183
mush-rgb-indigo: 63, 81, 181
mush-rgb-blue: 33, 150, 243
mush-rgb-light-blue: 3, 169, 244
mush-rgb-cyan: 0, 188, 212
mush-rgb-teal: 0, 150, 136
mush-rgb-green: 76, 175, 80
mush-rgb-light-green: 139, 195, 74
mush-rgb-lime: 205, 220, 57
mush-rgb-yellow: 255, 235, 59
mush-rgb-amber: 255, 193, 7
mush-rgb-orange: 255, 152, 0
mush-rgb-deep-orange: 255, 87, 34
mush-rgb-brown: 121, 85, 72
mush-rgb-grey: 158, 158, 158
mush-rgb-blue-grey: 96, 125, 139
mush-rgb-black: 0, 0, 0
mush-rgb-white: 255, 255, 255
#mush-rgb-info: var(--mush-rgb-blue)
#mush-rgb-success: var(--mush-rgb-green)
#mush-rgb-warning: var(--mush-rgb-orange)
#mush-rgb-danger: var(--mush-rgb-red)
#mush-rgb-state-fan: var(--mush-rgb-green)
mush-rgb-state-light: var(--mush-rgb-amber)
#mush-rgb-state-entity: var(--mush-rgb-blue)
#mush-rgb-state-switch: var(--mush-rgb-blue)
#mush-rgb-state-alarm-disarmed: var(--mush-rgb-info)
#mush-rgb-state-alarm-armed: var(--mush-rgb-success)
#mush-rgb-state-alarm-triggered: var(--mush-rgb-danger)
#mush-rgb-state-person-home: var(--mush-rgb-success)
#mush-rgb-state-person-not-home: var(--mush-rgb-danger)
#mush-rgb-state-person-zone: var(--mush-rgb-info)
#mush-rgb-state-person-unknown: var(--mush-rgb-grey)
#mush-rgb-state-cover-open: var(--mush-rgb-blue)
#mush-rgb-state-cover-closed: var(--mush-rgb-disabled)
#mush-rgb-state-climate-auto: var(--mush-rgb-green);
#mush-rgb-state-climate-cool: var(--mush-rgb-blue);
#mush-rgb-state-climate-dry: var(--mush-rgb-orange);
#mush-rgb-state-climate-fan-only: var(--mush-rgb-blue-grey);
#mush-rgb-state-climate-heat: var(--mush-rgb-deep-orange);
#mush-rgb-state-climate-heat-cool: var(--mush-rgb-green);
#mush-rgb-state-climate-idle: var(--mush-rgb-grey);
#mush-rgb-state-climate-off: var(--mush-rgb-disabled);
# You must keep this to support light/dark theme
modes:
light:
mush-rgb-disabled: 189, 189, 189
dark:
mush-rgb-disabled: 111, 111, 111
As you can see, most of it is commented out. I mainly use it for the mush-rgb-[color] values.
To apply this to my Room card we can now do this:
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'') 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;
}
- 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: unavailable
chip:
type: template
icon_color: disabled
icon: |-
{% set media_type = state_attr('media_player.lounge_tv',
'media_content_type') %}
{% if media_type == 'tvshow' %}
mdi:television-classic
{% elif media_type == 'movie' %}
mdi:movie-open
{% elif media_type == 'music' %}
mdi:music
{% elif media_type == 'playlist' %}
mdi:music
{% else %}
mdi:plex
{% endif %}
tap_action:
action: none
hold_action:
action: none
- 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: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
{% if is_state('climate.air_conditioner', 'fan_only') %}
animation: rotation 2s linear infinite;
{% endif %}
}
- 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;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('light.lounge_light', 'on') %}
background: rgba(var(--mush-rgb-red), 0.1);
{% endif %}
}
The last card_mod: style: is being applied to the stack-in-card, which is not a Mushroom card so cannot see the dynamically created --rgb-[color] values. However it can see the --mush-rgb-[color] values that we have defined in our theme file.
Alternatively we can find the value of --rgb-orange and manually specify that in our CSS, which is what I originally did with my Room card:
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('light.lounge_light', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
I hope that’s clearer than mud 
.
You can add paper-item-icon-active-color: 253, 216, 53 to your theme file. This defines the yellow in RGB values.
@rhysb have you used mushroom card/custom in stack card with input_selects and input_numbers? If yes can you share yaml/pictures?
I’m wondering how to make them take up less space while still having readable titles for each select/number.
3 input selects. 1 Input number and 1 input boolean. I’m trying to create an interface for custom light effects.
For a clean mobile setup I’m thinking the order should be
Input selects (horizontal or vertical)
Input number (horizontal or vertical)
Input Boolean (centered potentially)
Simply use
relative_time(here.timestamp)
Thanks for that @rhysb. But in my case, I would prefer to use the paper-item-icon-active-color that is already defined by the user-selected theme. I don’t want to explicitly define any color in particular, but rather just use the theme’s color. To be totally clear, I am not a css expert, so I might be missing something very simple. I guess maybe there must be a way to convert the already-defined paper-item-icon-active-color from a HEX to RGB so I can use the rgba function to adjust the opacity of the shape color, or perhaps there is already a mechanism in place to use the user-selected theme colors? Am I overthinking this, or is there no simple way to do this?
