type: custom:gap-card
height: 1000
throw this in the middle of your screen
3 Likes
Your page needs to be scrollable so as @alexandrechoske said adding a gap card before the nav bar will work.
Also simplified the code for the nav bar a little
Sticky Nav Bar
type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:mushroom-template-card
primary: Home
icon: mdi:home
tap_action:
action: navigate
navigation_path: home
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
- type: custom:mushroom-template-card
primary: Media
icon: mdi:play-box-multiple-outline
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
--shape-color: none;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
- type: custom:mushroom-template-card
primary: Energy
icon: mdi:lightning-bolt-outline
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
--shape-color: none;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
- type: custom:mushroom-template-card
primary: Map
icon: mdi:map-outline
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 66px !important;
height: 36px !important;
--shape-color: none;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-border-radius: 16px;
}
card_mod:
style: |
:host {
z-index: 999;
position: sticky;
position: -webkit-sticky;
bottom: 0;
}
ha-card {
background: rgb(30,30,30);
padding-bottom: 15px;
margin: 0px -8px -10px -8px;
border-radius: 0px;
}
14 Likes
i just modified the ios-tapbar-theme from minimalist ui to match it for my needs.
---
ios-tapbar:
# version 1.0.1
# By LRvdLinden
# Journal
state-icon-color: "rgb(var(--color-theme))"
border-radius: "20px"
ha-card-border-radius: "var(--border-radius)"
ha-card-border-width: 0
error-color: "var(--google-red)"
warning-color: "var(--google-yellow)"
success-color: "var(--google-green)"
info-color: "var(--google-blue)"
divider-color: "rgba(var(--color-theme),.12)"
accent-color: "var(--google-yellow)"
card-mod-theme: "ios-tapbar"
card-mod-root: |
app-toolbar {
display: none;
}
header-height: "58px"
card-mod-view-yaml: |
"*:first-child$": |
#columns .column > * {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
}
# Move navbar
card-mod-root-yaml: |
ha-tabs$: |
#tabsContent {
width: 97%;
}
.: |
@media (orientation: portrait) {
a.menu-link[target="_blank"], ha-button-menu, ha-menu-button, [main-title] {
display: none !important;
}
app-toolbar {
padding-right: 0px;
padding-left: 0px;
}
}
ha-app-layout{
transform: initial;
padding: 0 !important;
margin: 0 !important;
width: 100%;
height: 100% !important;
}
app-header {
top: auto;
bottom: 0;
box-shadow: var(--footer-shadow);
position: fixed;
height: var(--header-height) !important;
}
app-toolbar {
height: var(--header-height) !important;
padding: 10px 10px !important;
background: var( --ha-card-background, var(--card-background-color) );
}
#view {
margin-top: calc(-1 * var(--header-height)) !important;
padding-bottom: var(--header-height) !important;
}
ha-tabs {
--paper-tabs-selection-bar-color: var(--header-tab-indicator-color) !important;
--mdc-icon-size: 24px;
display: flex;
justify-content: space-between;
padding: 10px;
margin-top: 15px;
height:var(--header-height) !important;
}
paper-tab[aria-selected=true] {
color: var(--google-blue);
}
paper-tab {
color: var(--header-all-tabs-color);
border-radius: 5px;
height: 32px;
padding: 0 20px;
}
# Color themes
modes:
light:
# main interface colors
primary-color: "#434343"
google-red: "#F54436"
google-green: "#01C852"
google-yellow: "#FF9101"
google-blue: "#3D5AFE"
google-violet: "#661FFF"
google-grey: "#BBBBBB"
color-red: "245, 68, 54"
color-green: "1, 200, 82"
color-yellow: "255, 145, 1"
color-blue: "61, 90, 254"
color-purple: "102, 31, 255"
color-grey: "187, 187, 187"
color-pink: "233, 30, 99"
color-theme: "51,51,51"
color-background-yellow: "250, 250, 250"
color-background-blue: "250, 250, 250"
color-background-green: "250, 250, 250"
color-background-red: "250, 250, 250"
color-background-pink: "250, 250, 250"
color-background-purple: "250, 250, 250"
color-yellow-text: "var(--primary-text-color)"
color-blue-text: "var(--primary-text-color)"
color-green-text: "var(--primary-text-color)"
color-red-text: "var(--primary-text-color)"
color-pink-text: "var(--primary-text-color)"
color-purple-text: "var(--primary-text-color)"
opacity-bg: "1"
# Header / Footer
header-active-tab-color: "rgb(var(--color-blue))"
header-active-tab-bg-color: "rgba(var(--color-blue), .3)"
header-all-tabs-color: "var(--paper-item-icon-color)"
header-tab-indicator-color: "rgba(0, 0, 0, 0)"
app-header-text-color: "var(--primary-text-color)"
app-header-background-color: "var(--primary-background-color)"
paper-tabs-selection-bar-color: "var(--primary-text-color)"
footer-shadow: "0px -1px 3px 0px rgba(0,0,0,0.12)"
# background and sidebar
card-background-color: "#FAFAFA"
primary-background-color: "#EFEFEF"
secondary-background-color: "#EFEFEF"
# text
primary-text-color: "#212121"
# slider
slider-color: "rgb(var(--google-blue))"
slider-bar-color: "rgba(var(--google-blue),0.38)"
# cards
box-shadow: "0px 2px 4px 0px rgba(0,0,0,0.16)"
ha-card-box-shadow: "var(--box-shadow)"
# sidebar
sidebar-selected-text-color: "rgb(var(--color-blue))"
sidebar-selected-icon-color: "rgb(var(--color-blue))"
sidebar-text-color: "#80868b"
# switch
switch-checked-color: "rgb(var(--color-blue))"
# media player
mini-media-player-accent-color: "rgb(var(--color-blue))"
dark:
# main interface colors
primary-color: "#89B3F8"
google-red: "#F18B82"
google-green: "#80C994"
google-yellow: "#FCD663"
google-blue: "#2196F3"
google-violet: "#BB86FC"
google-grey: "#BBBBBB"
color-red: "241, 139, 130"
color-green: "128, 201, 148"
color-yellow: "252, 214, 99"
color-blue: "137, 179, 248"
color-theme: "221,221,221"
color-purple: "102, 31, 255"
color-grey: "187, 187, 187"
color-pink: "233, 30, 99"
color-amber: "255, 145, 1"
color-background-yellow: "var(--color-yellow)"
color-background-blue: "var(--color-blue)"
color-background-green: "var(--color-green)"
color-background-red: "var(--color-red)"
color-background-pink: "var(--color-pink)"
color-background-purple: "var(--color-purple)"
color-yellow-text: "var(--color-yellow)"
color-blue-text: "var(--color-blue)"
color-green-text: "var(--color-green)"
color-red-text: "var(--color-red)"
color-pink-text: "var(--color-pink)"
color-purple-text: "var(--color-purple)"
opacity-bg: "0.1"
# Header / Footer
header-active-tab-color: "rgb(var(--color-amber))"
header-active-tab-bg-color: "rgba(var(--color-amber), .3)"
header-all-tabs-color: "var(--paper-item-icon-color)"
header-tab-indicator-color: "rgba(0, 0, 0, 0)"
app-header-text-color: "var(--primary-text-color)"
app-header-background-color: "var(--primary-background-color)"
paper-tabs-selection-bar-color: "var(--primary-text-color)"
footer-shadow: "0px -1px 3px 0px rgba(0,0,0,0.12)"
# background and sidebar
card-background-color: "#1D1D1D"
primary-background-color: "#121212"
secondary-background-color: "#121212"
# text
primary-text-color: "#DDDDDD"
# floating button text color
mdc-theme-on-secondary: "var(--card-background-color)"
# Sidebar
sidebar-selected-text-color: "rgb(var(--color-amber))"
sidebar-selected-icon-color: "rgb(var(--color-amber))"
# Slider
slider-color: "rgb(var(--color-blue))"
slider-bar-color: "rgba(var(--color-blue),0.38)"
# card
box-shadow: "none"
# media player
mini-media-player-accent-color: "var(--google-blue)"
# Journal
state-icon-color: "rgb(var(--color-theme))"
9 Likes
these modifications are only on theme?
I mean, the code is the same but theme modify only the bar?
nah it also changes a few colors of HA itself. mushroom shouldn´t be affected tho.
1 Like
Playing Around with with Mushroom - Many things to do and clean up some code. But here is Version 0.03 for you if interested 
type: custom:vertical-stack-in-card
title: Wohnzimmer
style: |
.card-header {
padding: 6px 16px 2px !important;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.temp_xx_humidity
- type: entity
entity: sensor.temp_xx_temperature
alignment: end
style: |
.chip-container {
padding-right: 14px;
margin-top: -40px
}
- type: custom:mushroom-light-card
entity: light.lampe_xx
show_brightness_control: true
collapsible_controls: true
layout: horizontal
name: Lampe Links
- type: custom:mushroom-light-card
entity: light.lampe_xx
show_brightness_control: true
collapsible_controls: true
layout: horizontal
name: Lampe Rechts
- type: custom:mushroom-media-player-card
entity: media_player.xx
layout: horizontal
show_volume_level: false
media_controls:
- on_off
volume_controls:
- volume_set
icon: mdi:television
name: Sony Fernseher
use_media_info: true
- type: custom:mushroom-climate-card
entity: climate.heizung_xx
layout: horizontal
fill_container: true
show_temperature_control: true
collapsible_controls: false
name: Thermostate
tap_action:
action: more-info
- type: custom:mushroom-chips-card
alignment: end
style: |
ha-card {
z-index:9;
}
.chip-container {
padding: 14px;
}
chips:
- type: template
entity: binary_sensor
icon: >
{% set state=states('binary_sensor.heizung_xx_window_open') %}
{% if state=='off' %}
mdi:window-closed-variant
{% elif state=='on' %}
mdi:window-open-variant
{% endif %}
icon_color: >
{% set state=states('binary_sensor.heizung_xx_window_open') %}
{% if state=='on' %}
orange
{% endif %}
content: >
{% set state=states('binary_sensor.heizung_xx_window_open') %}
{% if state=='off' %}
Fenster geschlossen!
{% elif state=='on' %}
Fenster offen!
{% endif %}
- type: template
entity: switch.heizung_xx_window_open_force
content: >
{% set state=states('switch.heizung_xx_window_open_force') %}
{% if state=='on' %}
LĂźften Aktiv!
{% elif state=='off' %}
LĂźften!
{% endif %}
icon: >
{% set state=states('switch.heizung_xx_window_open_force') %}
{% if state=='on' %}
mdi:window-open-variant
{% elif state=='off' %}
mdi:window-closed-variant
{% endif %}
icon_color: >
{% set state=states('switch.heizung_xx_window_open_force') %}
{% if state=='on' %}
orange
{% endif %}
- type: template
entity: climate.heizung_xx
icon: >
{% set battery_level = state_attr('switch.heizung_xx_window_open_force','battery')|int('unknown') %}
{% set battery_round = (battery_level|int / 10)|int * 10 %}
{% if battery_level == 'unknown' %}
mdi:battery-unknown
{% else %}
{% if battery_round >= 100 %}
mdi:battery
{% elif battery_round > 0 %}
mdi:battery-{{ battery_round }}
{% else %}
mdi:battery-alert
{% endif %}
{% endif %}
content: '{{ state_attr(''climate.heizung_xx'',''battery'') }} %'
name: Battery
tap_action:
action: more-info
- type: custom:mini-graph-card
entities:
- sensor.temp_xx
animate: true
hour24: true
font_size: 75
line_width: 4
points_per_hour: 1
style: |
ha-card {
margin-top: -67px;
z-index: 1;
}
show:
name: false
icon: false
legend: false
labels: true
16 Likes
This is my first card of my dashboard:
home battery status, with percentage and solar input
Device status, from the left:
Link to the security page
doors status
windows status
lights status
Thermostat status
heated towel rails status
each of the status button light orange when something is on, if you touch one it open a popup with the list of entities on.
code:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: UtilitĂ
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 45% 55%
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-entity-card
entity: sensor.powerwall_solar_now
name: Batteria
icon: mdi:home-battery-outline
icon_color: teal
icon_type: icon
tap_action:
action: navigate
navigation_path: energia
- type: custom:bar-card
entity: sensor.powerwall_charge
severity:
- from: '0'
color: orange
to: '25'
- from: '26'
to: '49'
color: orange
- from: '50'
to: '100'
color: teal
name: ' '
height: 42px
min: '0'
max: '100'
entity_row: true
color: teal
positions:
icon: 'off'
indicator: 'off'
card_mod:
style: |
ha-card {
padding: 12px;
margin-left: 12px;
--bar-card-border-radius: 12px;
}
bar-card-value {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-backgroundbar {
opacity: 0.2;
filter: brightness(1);
}
- square: false
columns: 6
type: grid
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:home-alert
tap_action:
action: navigate
navigation_path: sicurezza
icon_color: orange
multiline_secondary: true
badge_icon: mdi:link
badge_color: orange
fill_container: false
layout: horizontal
- type: custom:mushroom-entity-card
entity: binary_sensor.porte
primary_info: none
secondary_info: none
layout: vertical
icon_color: orange
fill_container: false
name: Porte
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Porte aperte
content:
type: custom:auto-entities
filter:
include:
- group: binary_sensor.porte
state: 'on'
options:
type: custom:mushroom-entity-card
layout: horizontal
secondary_info: last-changed
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
exclude: []
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
- type: custom:mushroom-entity-card
entity: binary_sensor.finestre
primary_info: none
secondary_info: none
layout: vertical
icon_color: orange
fill_container: false
name: Finestre
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Finestre aperte
content:
type: custom:auto-entities
filter:
include:
- group: binary_sensor.finestre
state: 'on'
options:
type: custom:mushroom-entity-card
layout: horizontal
secondary_info: last-changed
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
exclude: []
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
- type: custom:mushroom-entity-card
entity: light.luci
primary_info: none
secondary_info: none
layout: vertical
icon_color: orange
hold_action:
action: more-info
double_tap_action:
action: more-info
fill_container: false
name: Luci
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Luci accese
content:
type: custom:auto-entities
filter:
include:
- group: light.luci
state: 'on'
options:
type: custom:mushroom-light-card
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
exclude: []
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
- type: custom:mushroom-entity-card
entity: binary_sensor.stato_termostati
primary_info: none
secondary_info: none
layout: vertical
icon: mdi:thermostat
icon_color: orange
fill_container: false
name: Termostati
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Termostati accesi
content:
type: custom:auto-entities
filter:
include:
- domain: climate
integration: knx
options:
type: custom:mushroom-climate-card
show_temperature_control: true
layout: horizontal
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
exclude:
- attributes:
hvac_action: idle
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
- type: custom:mushroom-entity-card
entity: switch.termobagno
primary_info: none
secondary_info: none
icon_color: orange
fill_container: false
name: Termobagno
layout: horizontal
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Termobagno accesi
content:
type: custom:auto-entities
filter:
include:
- group: switch.termobagno
state: 'on'
options:
type: custom:mushroom-entity-card
layout: horizontal
secondary_info: last-changed
tap_action:
action: toggle
hold_action:
action: none
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
exclude:
- attributes:
hvac_action: idle
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
EDIT:
just made the battery card more mushroom like:
added the badge when is charging, made the bar looking more like a mushroom card
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 45% 55%
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
entity: sensor.powerwall_charge
primary: Batteria
secondary: '{{states(''sensor.powerwall_charge'') }}%'
icon: mdi:home-battery-outline
icon_color: teal
icon_type: icon
badge_icon: "{% if is_state('binary_sensor.powerwall_charging','on') %}\n\_\_mdi:arrow-up-bold\n{% endif %}"
badge_color: "{% if is_state('binary_sensor.powerwall_charging','on') %}\n\_\_teal\n{% endif %}"
tap_action:
action: navigate
navigation_path: energia
- type: custom:bar-card
entity: sensor.powerwall_charge
severity:
- from: '0'
color: gray
to: '0'
- from: '1'
to: '49'
color: teal
- from: '50'
to: '100'
color: teal
name: ' '
height: 42px
min: '0'
max: '100'
entity_row: true
color: teal
positions:
icon: 'off'
indicator: 'off'
value: 'off'
card_mod:
style: |
ha-card {
padding: 12px;
margin-left: 12px;
--bar-card-border-radius: 12px;
}
bar-card-backgroundbar {
opacity: 0.2;
filter: brightness(1);
}
14 Likes
i applied your theme now, but the slider for input_number disappeared hahaha
i did not tested on another helpers thoâŚ
do you know the code to set a color for it?
hmm, i also just copied it and modified it a bit
but i guess it´s one of those:
# slider
slider-color: "rgb(var(--google-blue))"
slider-bar-color: "rgba(var(--google-blue),0.38)"
it´s under light: and dark:
guess i´ll remove all the variables but the one you need to get the bar to the bottom when i got some sparetimeâŚ
try this one, it shouldn´t change any colors
Code
---
Bottom_navbar:
border-radius: "20px"
ha-card-border-radius: "var(--border-radius)"
ha-card-border-width: 0
card-mod-theme: "Bottom_navbar"
card-mod-root: |
app-toolbar {
display: none;
}
header-height: "58px"
card-mod-view-yaml: |
"*:first-child$": |
#columns .column > * {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
}
card-mod-root-yaml: |
ha-tabs$: |
#tabsContent {
width: 97%;
}
.: |
@media (orientation: portrait) {
a.menu-link[target="_blank"], ha-button-menu, ha-menu-button, [main-title] {
display: none !important;
}
app-toolbar {
padding-right: 0px;
padding-left: 0px;
}
}
ha-app-layout{
transform: initial;
padding: 0 !important;
margin: 0 !important;
width: 100%;
height: 100% !important;
}
app-header {
top: auto;
bottom: 0;
box-shadow: "0px -1px 3px 0px rgba(0,0,0,0.12)";
position: fixed;
height: var(--header-height) !important;
}
app-toolbar {
height: var(--header-height) !important;
padding: 10px 10px !important;
background: var( --ha-card-background, var(--card-background-color) );
}
#view {
margin-top: calc(-1 * var(--header-height)) !important;
padding-bottom: var(--header-height) !important;
}
ha-tabs {
--paper-tabs-selection-bar-color: "rgba(0, 0, 0, 0)" !important;
--mdc-icon-size: 24px;
display: flex;
justify-content: space-between;
padding: 10px;
margin-top: 15px;
height:var(--header-height) !important;
}
paper-tab[aria-selected=true] {
color: var(--google-blue);
}
paper-tab {
color: var(--header-all-tabs-color);
border-radius: 5px;
height: 32px;
padding: 0 20px;
}
# Modes
modes:
light: {}
dark: {}
Similar to the overview for fuel prices, here is my Apple-like stock market card, using the Yahoo Finance integration: GitHub - iprak/yahoofinance: Home Assistant component which allows you to get stock updates from Yahoo finance.
Code
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 70% 30%
grid-gap: 0px;
cards:
- type: custom:mushroom-template-card
entity: sensor.yahoofinance_aex
primary: ^AEX
secondary: '{{state_attr(entity, ''friendly_name'')}}'
icon: mdi:currency-eur
icon_color: grey
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
font-size: 20px;
content: 'đłđą';
}
ha-icon {
width: 0px !important;
}
.: |
ha-card {
box-shadow: none;
margin: -4px -7px;
}
- type: custom:mushroom-template-card
entity: sensor.yahoofinance_aex
primary: '{{states(entity)}}'
secondary: |
{% if state_attr(entity, 'trending') == "up" %}+{% endif
%}{{state_attr(entity,'regularMarketChangePercent')}}%
card_mod:
style:
mushroom-state-info$: |
* {
text-align: end;
font-family: 'SF Pro Rounded';
}
.: |
ha-card {
--secondary-text-color: {% if state_attr(config.entity, 'trending') == "up" %}rgba(var(--rgb-green)){% else %}rgba(var(--rgb-red)){% endif %};
margin: -3px 2px -6px 0px;
box-shadow: none;
}
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
margin: -25px 0px 0px 66px;
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
}
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 70% 30%
grid-gap: 0px;
cards:
- type: custom:mushroom-template-card
entity: sensor.yahoofinance_vusa_as
primary: VUSA.AS
secondary: '{{state_attr(entity, ''friendly_name'')}}'
icon: '{{state_attr(entity,"icon")}}'
icon_color: grey
card_mod:
style: |
ha-card {
box-shadow: none;
margin: -4px -7px;
}
- type: custom:mushroom-template-card
entity: sensor.yahoofinance_vusa_as
primary: '{{states(entity)}}'
secondary: |
{% if state_attr(entity, 'trending') == "up" %}+{% endif
%}{{state_attr(entity,'regularMarketChangePercent')}}%
card_mod:
style:
mushroom-state-info$: |
* {
text-align: end;
font-family: 'SF Pro Rounded';
}
.: |
ha-card {
--secondary-text-color: {% if state_attr(config.entity, 'trending') == "up" %}rgba(var(--rgb-green)){% else %}rgba(var(--rgb-red)){% endif %};
margin: -3px 2px -6px 0px;
box-shadow: none;
}
Just adding my old version here as well, should anyone prefer this one:
Code
square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-template-card
entity: sensor.yahoofinance_aex
icon: '{{state_attr(entity,"icon")}}'
icon_color: >-
{% if state_attr(entity,'regularMarketChangePercent')|float > 0 %} green
{% else %} red {% endif %}
primary: '{{state_attr(entity, "friendly_name")}}'
multiline_secondary: true
secondary: >-
⏠{{states(entity)}} ({% if state_attr(entity, 'trending') == "up" %}+{%
endif %}{{state_attr(entity,'regularMarketChangePercent')}}%)
tap_action:
action: more-info
fill_container: true
card_mod:
style: |
ha-card {
--secondary-text-color: {% if state_attr('sensor.yahoofinance_aex', 'trending') == "up" %}rgba(var(--rgb-green)){% else %}rgba(var(--rgb-red)){% endif %};
}
- type: custom:mushroom-template-card
entity: sensor.yahoofinance_vusa_as
icon: '{{state_attr(entity,"icon")}}'
icon_color: >-
{% if state_attr(entity,'regularMarketChangePercent')|float > 0 %} green
{% else %} red {% endif %}
primary: '{{state_attr(entity, "friendly_name")}}'
multiline_secondary: true
secondary: >-
⏠{{states(entity)}} ({% if state_attr(entity, 'trending') == "up" %}+{%
endif %}{{state_attr(entity,'regularMarketChangePercent')}}%)
tap_action:
action: more-info
fill_container: true
card_mod:
style: |
ha-card {
--secondary-text-color: {% if state_attr('sensor.yahoofinance_vusa_as', 'trending') == "up" %}rgba(var(--rgb-green)){% else %}rgba(var(--rgb-red)){% endif %};
}
11 Likes
thanks mate,
just another question, is the last one I promess hahha
I am making an mobile version and the background i need to stay as pure white â#FFFFFFâ, I can set the background color in this version too?
no worries, this way i´m learning some stuff
try this:
modes:
light:
primary-background-color: "#FFFFFF"
secondary-background-color: "#FFFFFF"
card-background-color: "#FFFFFF"
dark:
primary-background-color: "#FFFFFF"
secondary-background-color: "#FFFFFF"
card-background-color: "#FFFFFF"
guess you need to change the icon-color so it matches the white:
paper-tab[aria-selected=true] {
color: var(--google-blue); ### <--- ACTIVE TAP COLOR ###
}
paper-tab {
color: var(--header-all-tabs-color); ### <--- ICON COLOR ###
border-radius: 5px;
height: 32px;
padding: 0 20px;
}
2 Likes
I got one! Lot of trial and error went into this one.
Introducing a Mushroom Light Card equipped with pop-up and auto-entities card as well!
Code
type: custom:mushroom-light-card
entity: light.lr_light_group
name: All Living Room Lights
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: true
icon: mdi:sofa-outline
hold_action:
action: toggle
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: All Living Room Lights
content:
type: custom:auto-entities
card:
type: entities
filter:
include:
- group: light.lr_light_group
options:
type: custom:mushroom-light-card
show_brightness_control: true
use_light_color: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: true
tap_action:
action: toggle
card_mod:
style: |
ha-card {
{% 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] %}
{% if is_state(config.entity, 'on') %}
background: rgba({{r}}, {{g}}, {{b}},0.1);
--primary-text-color: rgb({{r}}, {{g}}, {{b}});
--secondary-text-color: rgba({{r}}, {{g}}, {{b}},0.5);
{% endif %}
}
ha-card {
padding: 8px 24px !important;
}
ha-card {
--badge-size: 0px;
}
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
exclude: []
sort:
method: friendly_name
card_mod:
style: |
ha-card {
{% 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] %}
{% if is_state(config.entity, 'on') %}
background: rgba({{r}}, {{g}}, {{b}},0.1);
--primary-text-color: rgb({{r}}, {{g}}, {{b}});
--secondary-text-color: rgba({{r}}, {{g}}, {{b}},0.5);
{% endif %}
}
ha-card {
padding: px 24px !important;
}
ha-card {
--badge-size: 0px;
}
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
What youâll need
(thanks to @thomasloven)
Cards Used
- Mushroom Light Card
- Auto Entities
Prerequisites Needed
- Using the âGroupâ helper - create a group with all your lights combined together. In my case itâs âlight.lr_light_groupâ
Use Case
- For me itâs mobile optimized as it makes the dashboard smaller and more effecient
- With auto entities card it allows for the dashboard to talk with the backend. I.e those pesky times when you have to remove or change an entity in the backend and then have to update the dashboard side as well. Now itâll automatically update!
- Can be expanded into other entity types then just lights
Hope this all helps!
28 Likes
Information Light Card: I use this card to see if any lights are on and how many (mostly used when Iâam not home to see if someone forgot to turn off any lights).
I use automations and motions sensors for all lights, but that can not fix all scenarios in my home! To many peolpe and animals with diffrent time schedules!
We also have 73 lights and I donât want to have endless of lights in a popup menu or have a dedicated dashboard for all lights.
This one also have the rhybâs animated icon when a light is on! 
How to setup;
- You need a template for all lights. Put this code in the config file of Home Assistant
(check the config before restart) If you are not using Philips Hue then this line is not needed | rejectattr(âattributes.is_hue_groupâ, âtrueâ)
Template Sensor
- platform: template
sensors:
lights_on:
friendly_name: "Lights On"
value_template: >
{{ states.light | selectattr('state', 'eq', 'on')
| rejectattr('attributes.is_hue_group', 'true')
| map(attribute='entity_id')
| list | count }}
-
Areas in your Home Assistant needs to have all the lights.
Change the bold text to your own Areas in the code of Light Card - {% set areas = [âVardagsrumâ] %} -
A input_boolean.lights_on helper (to open and close the card).
-
The code to be used in Mushroom cards.
Light Card
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:gap-card
height: 2
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 33px
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
entity: sensor.lights_on
primary: Belysningen i Hemmet
secondary: >
{% if is_state('sensor.lights_on','0') %} Släckt {%else%}
{{states('sensor.lights_on')}}/{{ states.light |
rejectattr('attributes.is_hue_group', 'true') |
map(attribute='entity_id') | list | count }} Lampor är pü {% endif
%}
icon: >
{% if is_state('sensor.lights_on','0') %} mdi:lightbulb {%else%}
mdi:lightbulb-on {% endif %}
icon_color: >
{% if is_state('sensor.lights_on','0') %} grey {%else%} orange {%
endif %}
fill_container: false
multiline_secondary: false
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{% if is_state('sensor.lights_on', '0') %}
{%else%}
--icon-animation: illumination 2s infinite;
{% endif %}
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
card_mod: null
style: |
ha-card {
background: none;
--ha-card-border-width: 0;
}
- type: custom:mushroom-template-card
entity: input_boolean.lights_on
icon: >-
{{ 'mdi:chevron-up' if is_state(entity, 'on') else
'mdi:chevron-down' }}
icon_color: black
hold_action:
action: none
card_mod:
style: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-border-width: 0;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: conditional
conditions:
- entity: input_boolean.lights_on
state: 'on'
card:
type: custom:vertical-stack-in-card
cards:
- type: markdown
content: >
{% set areas = ['Vardagsrum'] %} {% for rooms in areas %} {%-
set lights = expand(area_entities(rooms))
|rejectattr('attributes.is_hue_group', 'true')
|selectattr('domain', 'eq', 'light') |list -%} {%- set on =
lights |selectattr('state', 'eq', 'on') |map(attribute='name')
|list -%} {%- if on -%}<b>{{ rooms }}</b>: ({{ on |count }}/{{
lights |count }}) - {{ on | join(', ') }} {% else %}{{ '' }}{%
endif %}{%- endfor %}
{% set areas = ['TV Rum'] %} {% for rooms in areas %} {%- set
lights = expand(area_entities(rooms))
|rejectattr('attributes.is_hue_group', 'true')
|selectattr('domain', 'eq', 'light') |list -%} {%- set on =
lights |selectattr('state', 'eq', 'on') |map(attribute='name')
|list -%} {%- if on -%}<b>{{ rooms }}</b>: ({{ on |count }}/{{
lights |count }}) - {{ on | join(', ') }} {% else %}{{ '' }}{%
endif %}{%- endfor %}
{% set areas = ['Sovrum'] %} {% for rooms in areas %} {%- set
lights = expand(area_entities(rooms))
|rejectattr('attributes.is_hue_group', 'true')
|selectattr('domain', 'eq', 'light') |list -%} {%- set on =
lights |selectattr('state', 'eq', 'on') |map(attribute='name')
|list -%} {%- if on -%}<b>{{ rooms }}</b>: ({{ on |count }}/{{
lights |count }}) - {{ on | join(', ') }} {% else %}{{ '' }}{%
endif %}{%- endfor %}
{% set areas = ['Matrum'] %} {% for rooms in areas %} {%- set
lights = expand(area_entities(rooms))
|rejectattr('attributes.is_hue_group', 'true')
|selectattr('domain', 'eq', 'light') |list -%} {%- set on =
lights |selectattr('state', 'eq', 'on') |map(attribute='name')
|list -%} {%- if on -%}<b>{{ rooms }}</b>: ({{ on |count }}/{{
lights |count }}) - {{ on | join(', ') }} {% else %}{{ '' }}{%
endif %}{%- endfor %}
{% set areas = ['Killarnas Rum'] %} {% for rooms in areas %} {%-
set lights = expand(area_entities(rooms))
|rejectattr('attributes.is_hue_group', 'true')
|selectattr('domain', 'eq', 'light') |list -%} {%- set on =
lights |selectattr('state', 'eq', 'on') |map(attribute='name')
|list -%} {%- if on -%}<b>{{ rooms }}</b>: ({{ on |count }}/{{
lights |count }}) - {{ on | join(', ') }} {% else %}{{ '' }}{%
endif %}{%- endfor %}
{% set areas = ['Stellas Rum'] %} {% for rooms in areas %} {%-
set lights = expand(area_entities(rooms))
|rejectattr('attributes.is_hue_group', 'true')
|selectattr('domain', 'eq', 'light') |list -%} {%- set on =
lights |selectattr('state', 'eq', 'on') |map(attribute='name')
|list -%} {%- if on -%}<b>{{ rooms }}</b>: ({{ on |count }}/{{
lights |count }}) - {{ on | join(', ') }} {% else %}{{ '' }}{%
endif %}{%- endfor %}
{% set areas = ['Gym'] %} {% for rooms in areas %} {%- set
lights = expand(area_entities(rooms))
|rejectattr('attributes.is_hue_group', 'true')
|selectattr('domain', 'eq', 'light') |list -%} {%- set on =
lights |selectattr('state', 'eq', 'on') |map(attribute='name')
|list -%} {%- if on -%}<b>{{ rooms }}</b>: ({{ on |count }}/{{
lights |count }}) - {{ on | join(', ') }} {% else %}{{ '' }}{%
endif %}{%- endfor %}
{% set areas = ['Utomhus'] %} {% for rooms in areas %} {%- set
lights = expand(area_entities(rooms))
|rejectattr('attributes.is_hue_group', 'true')
|selectattr('domain', 'eq', 'light') |list -%} {%- set on =
lights |selectattr('state', 'eq', 'on') |map(attribute='name')
|list -%} {%- if on -%}<b>{{ rooms }}</b>: ({{ on |count }}/{{
lights |count }}) - {{ on | join(', ') }} {% else %}{{ '' }}{%
endif %}{%- endfor %}
card_mod: null
style: |
ha-card {
--ha-card-border-width: 0;
}
Best Regards
Thekholm
15 Likes
A few weeks back I saw the great work on a minimalist inspired room card by @theandouz and had the same thoughts as @PatrickJanson for a smaller version to be able to fit more cards on the screen at once.
I re-worked things a bit to make it smaller and added a few extra âfeaturesâ.
- The secondary text displays temp and humidity, color is based on the roomâs climate devices hvac state (heating, cooling) as well as an icon to quickly display the state.
- The light chip is constant and supports the light entityâs color or a default color if there isnât one. Single tap brings up a quick popup to show all light entities in that room.
- Can display up to 4 conditional chips at a time (You can add as many as you like but only 4 display) with certain chips bringing up a popup including the beautiful media card from @rhysb. I personally preferred the conditional chips to just display the icon without the circle around it. I found it easier to notice.
Hereâs the code. Certainly open to any additional ideas or tweaks.
Minimalist Room Card
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: group.master_bedroom
icon: mdi:bed
icon_color: |
{% if is_state(entity, 'on') %}
#03A9F4
{% else %}
grey
{% endif %}
primary: Master Bedroom
secondary: >-
{{ states('sensor.thermostat_master_bedroom_local_temperature') | round(0)
}}°C | {{ states('sensor.thermostat_master_bedroom_humidity') |
round(0) }}%
layout: horizontal
tap_action:
action: navigate
navigation_path: /mobile-dashboard/master-bedroom
double_tap_action:
action: navigate
navigation_path: /mobile-dashboard/master-bedroom
hold_action:
action: toggle
badge_icon: >
{% if is_state_attr('climate.thermostat_master_bedroom', 'hvac_action',
'heating') %}
mdi:radiator
{% elif is_state_attr('climate.thermostat_master_bedroom', 'hvac_action',
'cooling') %}
mdi:snowflake
{% else %} {% endif %}
badge_color: >
{% if is_state_attr('climate.thermostat_master_bedroom', 'hvac_action',
'heating') %}
red
{% elif is_state_attr('climate.thermostat_master_bedroom', 'hvac_action',
'cooling') %}
#03A9F4
{% else %} {% endif %}
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
position: relative;
top: -50px;
left: -155px;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: -52px;
left: -155px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -43px;
top: 55px;
}
.: |
:host {
--mush-icon-size: 146px;
--secondary-text-color:
{% if is_state_attr('climate.thermostat_master_bedroom', 'hvac_action', 'heating') %}
red
{% elif is_state_attr('climate.thermostat_master_bedroom', 'hvac_action', 'cooling') %}
#03A9F4
{% else %}
#6c6c75
{% endif %}
}
style: |
mushroom-badge-icon {
left: 69px;
top: 25px;
}
- type: custom:mushroom-template-card
primary: none
icon_color: disabled
icon: mdi:lightbulb
secondary: none
entity: light.master_bedroom_light
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Master Bedroom Lights
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.master_bedroom_light
name: Master Bedroom Light
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-light-card
entity: light.closet_light
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
hold_action:
action: toggle
double_tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state(config.entity, 'on') %}
{% if state_attr(config.entity, 'rgb_color') == none %}
--icon-color: rgb(255,190,137) !important;
--shape-color: rgb(255,190,137, 0.2 ) !important;
{% else %}
{% 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: rgb( {{r}}, {{g}}, {{b}} ) !important;
--shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.2 ) !important;
{% endif %}
{% endif %}
}
.: |
ha-card {
width: 66px;
margin-left: 68%;
top: -178px;
background: none;
}
:host {
--mush-icon-size: 38px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.in_bed
state: 'on'
chip:
type: entity
entity: input_boolean.in_bed
icon: mdi:bed
icon_color: blue
content_info: none
- type: conditional
conditions:
- entity: binary_sensor.motion_master_bedroom_occupancy
state: 'on'
chip:
type: entity
entity: binary_sensor.motion_master_bedroom_occupancy
icon: mdi:motion-sensor
icon_color: blue
content_info: none
- type: conditional
conditions:
- entity: fan.master_bedroom_fan
state: 'on'
chip:
type: entity
entity: fan.master_bedroom_fan
icon: mdi:fan
icon_color: blue
content_info: none
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Master Bedroom Fan
content:
type: custom:mushroom-fan-card
entity: fan.master_bedroom_fan
name: Master Bedroom Fan
icon_animation: true
fill_container: false
show_percentage_control: true
show_oscillate_control: false
collapsible_controls: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: conditional
conditions:
- entity: switch.plug_master_bedroom
state: 'on'
chip:
type: entity
entity: switch.plug_master_bedroom
icon: mdi:power-plug
icon_color: blue
content_info: none
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Master Bedroom Plugs
content:
type: custom:mushroom-entity-card
entity: switch.plug_master_bedroom
name: Master Bedroom Plug
icon: mdi:power-plug
icon_color: '#03A9F4'
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: conditional
conditions:
- entity: media_player.emby_bedroom
state: playing
chip:
type: entity
entity: media_player.emby_bedroom
icon: mdi:play-pause
icon_color: blue
content_info: none
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Master Bedroom Media Player
content:
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.emby_bedroom
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
}
@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% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
}
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'idle') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
margin: 4px 4px 16px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
border-radius: var(--control-border-radius);
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
}
- type: conditional
conditions:
- entity: media_player.emby_bedroom
state_not: 'off'
- entity: media_player.emby_bedroom
state_not: idle
card:
entity: media_player.emby_bedroom
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
{{ '--paper-progress-container-color: rgba(var(--rgb-indigo-color), 0.2) !important;' if is_state(config.entity, 'playing') }}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 12px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(var(--rgb-indigo-color));
--mmp-border-radius: 12px !important;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state('media_player.emby_bedroom', 'idle') %}
background: url( '{{ state_attr('media_player.emby_bedroom', "entity_picture") }}' ) center no-repeat;
{% endif %}
filter: blur(150px) saturate(200%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
card_mod:
style:
.: |
ha-card {
width: 66px;
margin-left: 76%;
top: -186px;
background: none;
--chip-border-width: 0;
}
:host {
--mush-icon-size: 20px;
--mush-chip-spacing: -2.9px
}
card_mod:
style: |
ha-card {
height: 178px !important;
width: 178px !important;
}
54 Likes
Came here to share an RGB card that I put together using Mushroom Cards and a few others. Iâve never been a fan of the convoluted way HA manages RGB Bulbs by default and always wanted to build a unified solution. Mushroom Cards make it SUPER easy. Hopefully others find this helpful.
In addition to Mushroom Cards, youâll need to install the following cards via HACS (or manually)
- stack-in-card - removes the empty gaps between Mushroom cards
- card_mod - Allows for tweaking of cards (Border removal, background and text colors, etc.)
- text-divider-row - Simple and clean way to create a divider with a title
A couple of points to note:
- Card_mod and text-divider-row do not support UI mode. Card_mod, in particular, breaks Mushroom Cardâs UI editor functionality. (At least it does in my experience.)
- The entity in my code is actually a Light Group consisting of all my RGB bulb entities. The use of Light Groups is necessary to control multiple RGB bulbs at once.
- The preset background colors leverage the RGB equivalent values of the Kelvin temperature. For example, the Daylight preset uses a Kelvin value of 5500K. In order for the background to reflect the Kelvin âcolorâ, the RGB value of (255, 236, 224) is used.
To adapt this card to your environment, simply copy/paste the YAML into a new card and then change all entity: values to your specific light or light group.
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-light-card
entity: light.all_livingroom_bulbs
layout: vertical
primary_info: name
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px;
}
- type: custom:text-divider-row
text: Presets
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.all_livingroom_bulbs
name: Daylight
icon: mdi:lightbulb
content_info: name
use_light_color: false
tap_action:
action: call-service
service: light.turn_on
data:
kelvin: 5500
brightness: 50
transition: 2
target:
entity_id: light.all_livingroom_bulbs
card_mod:
style: |
ha-card {
--chip-background: rgb(255, 236, 224);
--text-color: black;
}
- type: light
entity: light.all_livingroom_bulbs
name: Cool White
tap_action:
action: call-service
service: light.turn_on
data:
kelvin: 3500
brightness: 50
transition: 2
target:
entity_id: light.all_livingroom_bulbs
content_info: name
use_light_color: false
icon: mdi:lightbulb
card_mod:
style: |
ha-card {
--chip-background: rgb(255, 196, 137);
--text-color: black;
}
- type: light
entity: light.living_room_lamps
icon: mdi:lightbulb
name: Cozy
use_light_color: false
content_info: name
tap_action:
action: call-service
service: light.turn_on
data:
transition: 2
brightness: 50
kelvin: 2700
target:
entity_id: light.all_livingroom_bulbs
card_mod:
style: |
ha-card {
--chip-background: rgb(255, 169, 87);
--text-color: black;
}
alignment: center
- type: custom:text-divider-row
text: Manual Adjustments
- type: custom:mushroom-light-card
entity: light.all_livingroom_bulbs
show_brightness_control: true
show_color_control: false
name: Brightness
layout: horizontal
fill_container: false
use_light_color: true
secondary_info: none
icon: mdi:brightness-7
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px;
}
- type: custom:mushroom-light-card
entity: light.all_livingroom_bulbs
show_color_control: true
name: Color
use_light_color: true
layout: horizontal
secondary_info: none
icon: mdi:palette
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px;
}
- type: custom:mushroom-light-card
entity: light.all_livingroom_bulbs
show_color_temp_control: true
name: Temperature
use_light_color: true
layout: horizontal
secondary_info: none
icon: mdi:white-balance-sunny
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px;
}
33 Likes
wow this is amazing. Great work! Do you happen to have any more code examples of other rooms? Cheers!
All my room cards are basically the same thing with different entities swapped in. So in place of light.kitchen it may be light.dining_room for example.
1 Like
can you hare your Room Cards?