Let’s not forget to reference @rhysb his collected Mushroom Animation posts with all the many examples he created in the topics gathered in one (ok four) place!
Part 1: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #3240 by rhysb
Part 2: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #3256 by rhysb
Part 3: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #3272 by rhysb
Part 4: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #3348 by rhysb
Working on my conversion to full mushroom. Starts to look beautiful but the time I’m spending on this…
Anyway, while re-thinking what I want on my main page (which is dynamic based on if I’m home or not) created below. As I wanted to use different types of graphs I had to use ApexCards (check it out).
Code:
type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: sensor.solarday
secondary: Now
primary: |
{{ states('sensor.benext_solar_electric_production_w') | round(0) }} W
icon: mdi:sun-wireless
icon_color: orange
tap_action:
action: more-info
- type: custom:mushroom-template-card
entity: sensor.solarday
secondary: Daily
primary: |
{{ states('sensor.solarday') | round(2) }} KwH
icon: mdi:sun-clock
icon_color: orange
tap_action:
action: more-info
- type: custom:mushroom-template-card
entity: sensor.solar_net
secondary: Grid
primary: |
{{ states('sensor.solar_net') | round(2) }} KwH
name: Grid
icon: mdi:solar-power
icon_color: green
tap_action:
action: more-info
- type: custom:apexcharts-card
graph_span: 1d
span:
start: day
apex_config:
chart:
height: 150px
fontFamily: Raleway,sans-serif
legend:
show: false
stroke:
width: 2
plotOptions:
bar:
columnWidth: 100%
grid:
show: true
borderColor: '#00000030'
strokeDashArray: 4
position: back
experimental:
color_threshold: true
header:
show: false
show_states: false
colorize_states: true
yaxis:
- id: first
decimals: 1
apex_config:
tickAmount: 2
- id: second
opposite: true
decimals: 0
apex_config:
tickAmount: 2
series:
- entity: sensor.power_consumption
name: Power
yaxis_id: first
show:
legend_value: false
type: column
group_by:
func: avg
duration: 60min
color_threshold:
- value: 0
color: '#228B22'
- value: 0.1
color: '#d35400'
- value: 1.5
color: '#c0392b'
- entity: sensor.benext_solar_electric_production_w
name: Solar
yaxis_id: second
type: area
curve: smooth
opacity: 0.2
color: '#00bb33'
extend_to: false
show:
legend_value: false
group_by:
func: avg
duration: 60min
Trying a new card, Bottom Navigation Card: I wanted two try another look at my home screen, so I made a navigation card and wanted to see if that did my life happier 
I maybe never use it, but someone else might.
This is a simple card (beauty as it is) that can be used for anything. It’s not stuck at the bottom of the page. I have done cards above to make it at the buttom 
Here it is.
In use.
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: navigate
navigation_path: /mushroom-beta/sensors-page
icon: mdi:leak
entity: ''
card_mod: null
style: |-
ha-card {
top: 14px;
--chip-background: none;
}
- type: template
tap_action:
action: navigate
navigation_path: /mushroom-beta/home-page
icon: mdi:home
entity: ''
card_mod: null
style: |-
ha-card {
top: 14px;
}
- type: template
tap_action:
action: navigate
navigation_path: /mushroom-beta/devices-page
icon: mdi:devices
entity: ''
card_mod: null
style: |-
ha-card {
top: 14px;
--chip-background: none;
}
alignment: center
card_mod:
style: |
ha-card {
margin: 0px 12px 12px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--chip-border-width: 0;
--chip-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 42px;
--chip-padding: 23px;
--chip-spacing: 42px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
content: Sensors
tap_action:
action: navigate
navigation_path: /mushroom-beta/sensors-page
card_mod: null
style: |-
ha-card {
top: 0px;
--chip-background: none;
}
- type: template
content: Home
tap_action:
action: navigate
navigation_path: /mushroom-beta/home-page
card_mod: null
style: |-
ha-card {
top: 0px;
--chip-background: none;
}
- type: template
content: Devices
tap_action:
action: navigate
navigation_path: /mushroom-beta/devices-page
card_mod: null
style: |-
ha-card {
top: 0px;
--chip-background: none;
}
alignment: center
card_mod:
style: |
ha-card {
margin: 0px 0px 0px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--chip-border-width: 0;
--chip-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 42px;
--chip-padding: 23px;
--chip-spacing: 23px;
}
/Thekholm
Please read the first post!
Best regards
Thekholm
Conditional Chip card, if the lights are on, show how many lights are on and place them on the chip card. Powered by 
rhysb
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: group.office_all_lamps
state: 'on'
chip:
type: template
icon: mdi:lightbulb
content: >-
{{ expand(states.group.office_all_lamps, states.light.master_bedroom_l)
| selectattr( 'state', 'eq', 'on') | list | count }}
entity: group.office_all_lamps
icon_color: amber
tap_action:
action: none
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
span {
position: relative;
right: 6px;
top: -6px;
width: 0px;
font-size: 10px;
margin-right: -5px;
}
mushroom-conditional-chip:nth-child(2):
mushroom-template-chip$: |
span {
position: relative;
right: 6px;
top: -6px;
width: 0px;
font-size: 10px;
margin-right: -5px;
}
.: |
ha-card {
height: 36px !important;
}
Adding this to the vertical stack will anchor it to the bottom of the screen
card_mod:
style: |
:host {
z-index: 999;
position: sticky;
position: -webkit-sticky;
bottom: 0;
}
Conditional Chip Card to show whether it is garbage or recycling today or tomorrow. Hidden other days.
You need the Garbage Collection integration in HACS: Garbage-Collection/README.md at master · bruxy70/Garbage-Collection · GitHub
When you create the helper, make sure to check “Verbose state” and in the code change sensor.garbage_recycling and sensor.trash_collection to your helper you create.
type: conditional
conditions:
- entity: sensor.garbage_recycling
state: today
chip:
type: template
icon: mdi:recycle
icon_color: green
content: Today
type: conditional
conditions:
- entity: sensor.garbage_recycling
state: tomorrow
chip:
type: template
icon: mdi:recycle
icon_color: green
content: Tomorrow
type: conditional
conditions:
- entity: sensor.trash_collection
state: tomorrow
chip:
type: template
icon: mdi:trash-can
icon_color: grey
content: Tomorrow
type: conditional
conditions:
- entity: sensor.trash_collection
state: today
chip:
type: template
icon: mdi:trash-can
icon_color: grey
content: Today
Wow! This is great. Did some searching and also found below. Sticky back arrow at the left top of the page. Great for mobile use.
type: custom:mushroom-chips-card
chips:
- type: action
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: home
alignment: justify
card_mod:
style: |
:host {
z-index: 999;
position: sticky;
position: -webkit-sticky;
top: var(--header-height);
}
ha-card {
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
}
My Input-time Card: This card is used with automations to start an alarm, light or anything that you want to control inside of Mushroom! This is very handy and a nice looking card.
This is the same card but with and without background on the buttons. This Card is done by ArenaCloser, so special thanks to him, THANKS! I just changed the the card to fit my needs.
This one is a little tricky to get right, look at the code and also read ArenaCloser input on the Mushroom topic.
ArenaCloser
What you need is the following;
service: input_datetime.set_datetime
data:
time: >-
{{as_timestamp(as_datetime(state_attr('input_datetime.mushroom','timestamp'))
+ timedelta(minutes=+15))| timestamp_custom('%H:%M', false) }}
target:
entity_id: input_datetime.mushroom
service: input_datetime.set_datetime
data:
time: >-
{{as_timestamp(as_datetime(state_attr('input_datetime.mushroom','timestamp'))
+ timedelta(minutes=-15))| timestamp_custom('%H:%M', false) }}
target:
entity_id: input_datetime.mushroom
alias: Mushroom - Datetime Auto
description: ""
trigger:
- platform: time
at: input_datetime.mushroom
condition: []
action:
- service: light.turn_on
data: {}
target:
entity_id: light.sovrum
mode: single
square: false
columns: 2
type: grid
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Väckning
secondary: |-
{% if is_state('automation.mushroom_datetime_auto', 'on') %}
På
{% else %}
Av
{% endif %}
icon: mdi:alarm
entity: ''
icon_color: |-
{% if is_state('automation.mushroom_datetime_auto', 'on') %}
green
{% else %}
grey
{% endif %}
tap_action:
action: call-service
service: automation.toggle
data: {}
target:
entity_id: automation.mushroom_datetime_auto
hold_action:
action: more-info
- type: custom:layout-card
layout_type: masonry
layout:
width: 221
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, 0px 0px 0px)
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:minus
tap_action:
action: call-service
service: script.mushroom_datetime_minus
- type: template
entity: input_datetime.mushroom
content: >-
{{(state_attr('input_datetime.mushroom','timestamp')) |
timestamp_custom('%H:%M', false) }}
- type: template
icon: mdi:plus
tap_action:
action: call-service
service: script.mushroom_datetime_plus
alignment: center
card_mod:
style: |
ha-card {
margin: -2px 0px 12px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--chip-border-width: 0;
--chip-border-radius: 12px;
--chip-height: 40px;
--chip-padding: 12px;
--chip-spacing: 1px;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Väckning
secondary: |-
{% if is_state('automation.mushroom_datetime_auto', 'on') %}
På
{% else %}
Av
{% endif %}
icon: mdi:alarm
entity: ''
icon_color: |-
{% if is_state('automation.mushroom_datetime_auto', 'on') %}
green
{% else %}
grey
{% endif %}
tap_action:
action: call-service
service: automation.toggle
data: {}
target:
entity_id: automation.mushroom_datetime_auto
hold_action:
action: more-info
card_mod: null
style: |
ha-card:after {
content: '';
border-bottom: solid 1px rgba(var(--rgb-disabled), 0.2);
margin: 15px 0px -12px;
}
- type: custom:layout-card
layout_type: masonry
layout:
width: 221
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, 0px 0px 0px)
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:minus
tap_action:
action: call-service
service: script.mushroom_datetime_minus
- type: template
entity: input_datetime.mushroom
content: >-
{{(state_attr('input_datetime.mushroom','timestamp')) |
timestamp_custom('%H:%M', false) }}
- type: template
icon: mdi:plus
tap_action:
action: call-service
service: script.mushroom_datetime_plus
alignment: center
card_mod:
style: |
ha-card {
margin: -1px 0px 5px;
--chip-border-width: 0;
--chip-border-radius: 12px;
--chip-height: 42px;
--chip-padding: 10px;
--chip-spacing: 1px;
}
How do I get 3 lights in one row. somtinhing with vertical stack card and colums? Can you post the code of lights also
Hello,
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: entity
entity: sensor.office_motion_sensor_temperature
icon_color: green
- type: conditional
conditions:
- entity: binary_sensor.office_right_window_sensor
state: 'on'
chip:
type: entity
entity: binary_sensor.office_right_window_sensor
icon_color: red
icon: mdi:window-open-variant
- type: conditional
conditions:
- entity: binary_sensor.office_motion_sensor_motion
state: 'on'
chip:
type: entity
entity: binary_sensor.office_motion_sensor_motion
icon_color: red
content_info: none
- type: conditional
conditions:
- entity: group.office_all_lamps
state: 'on'
chip:
type: template
icon: mdi:lightbulb
content: >-
{{ expand(states.group.office_all_lamps,) | selectattr( 'state',
'eq', 'on') | list | count }}
entity: group.office_all_lamps
icon_color: amber
tap_action:
action: none
alignment: start
- square: false
columns: 3
type: grid
title: Lights
cards:
- type: custom:mushroom-light-card
entity: light.table_lamp_1
use_light_color: true
show_brightness_control: true
name: Work
- type: custom:mushroom-light-card
entity: light.table_lamps_office
use_light_color: true
show_brightness_control: true
icon: hue:table-shade
name: Table
- type: custom:mushroom-light-card
entity: light.office_all_lamps
show_brightness_control: true
use_light_color: true
icon: mdi:lightbulb-group-outline
name: All Lamp
This is amazing.
Any way to identify actual page and highlight on navigation bar?
Just change the background of the respective icon for each individual page
This is my Apple-inspired overview for the current fuel prices.
It uses this integration in HACS (for The Netherlands): GitHub - metbril/home-assistant-brandstofprijzen: Home Assistant component for fuel prices from United Consumers
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.brandstofprijs_euro95
primary: Euro 95
secondary: ''
icon: mdi:currency-eur
icon_color: orange
card_mod:
style: |
ha-card {
box-shadow: none;
margin: -4px -7px;
}
- type: custom:mushroom-template-card
entity: sensor.brandstofprijs_euro95
primary: '{{states(entity)}}'
secondary: ''
card_mod:
style:
mushroom-state-info$: |
* {
text-align: end;
font-family: 'SF Pro Rounded';
}
.: |
ha-card {
margin: 6px 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.brandstofprijs_super
primary: Super
secondary: ''
icon: mdi:engine
icon_color: orange
card_mod:
style: |
ha-card {
box-shadow: none;
margin: -4px -7px;
}
- type: custom:mushroom-template-card
entity: sensor.brandstofprijs_super
primary: '{{states(entity)}}'
secondary: ''
card_mod:
style:
mushroom-state-info$: |
* {
text-align: end;
font-family: 'SF Pro Rounded';
}
.: |
ha-card {
margin: 6px 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.brandstofprijs_diesel
primary: Diesel
secondary: ''
icon: mdi:gas-station
icon_color: orange
card_mod:
style: |
ha-card {
box-shadow: none;
margin: -4px -7px;
}
- type: custom:mushroom-template-card
entity: sensor.brandstofprijs_diesel
primary: '{{states(entity)}}'
secondary: ''
card_mod:
style:
mushroom-state-info$: |
* {
text-align: end;
font-family: 'SF Pro Rounded';
}
.: |
ha-card {
margin: 6px 2px -6px 0px;
box-shadow: none;
}
i´ve added it, still it doesn´t stick to the bottom. is there a way to move it all the way down or do i have to so it with empty cards?`
type: custom:gap-card
height: 1000
throw this in the middle of your screen
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
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;
}
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))"
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.