MUSHROOM CHIP THEME SELECTOR IS HERE
- custom:mushroom-select-card
- Add to dashboard via GUI
- Change themes right from the dashboard
1 Like
If you are using mushroom-chips card for your sticky floating menu and are struggling to get the back button icon to change color use the below card-mod proudly contributed by @LiQuid_cOOled. This is updated in the full code HERE
DARK MODE -Icon stays white
FIXED WITH BELOW CARD-MOD
LIGHT MODE - Icon takes on fill: var(–icon-primary-color) which I think is the (–primary-text-color) in theme.
card_mod:
style:
mushroom-conditional-chip:nth-child(2):
mushroom-back-chip$: |
ha-state-icon {
color: white !important;
}
.: |
@media (orientation: portrait) and (max-width: 768px) {
ha-card {
z-index:1;
position: fixed;
bottom: 5px;
left: 5px;
width: calc(100% - 10px);
background-color: transparent !important;
border-radius: 100px;
padding: 10px;
}
}
@media (orientation: portrait) and (min-width: 769px) {
ha-card {
z-index:1;
position: fixed;
bottom: 10px;
left: 50px;
width: calc(100% - 100px);
background-color: transparent !important;
border-radius: 100px;
padding: 10px;
--chip-height: 60px;
--chip-border-radius: 50%;
--chip-icon-size: 30px;
}
}
@media (orientation: landscape) and (min-width: 1281px) {
ha-card {
z-index:1;
position: fixed;
bottom: 5px;
left: 100px;
width: calc(100% - 200px);
background-color: transparent !important;
border-radius: 100px;
padding: 10px;
--chip-height: 55px;
--chip-border-radius: 50%;
--chip-icon-size: 30px;
}
}
@media (orientation: landscape) and (min-height: 600px) and (max-height: 800px) and
(max-width: 1280px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 5px;
left: 50px;
width: calc(100% - 100px);
background-color: transparent !important;
border-radius: 100px;
padding: 10px;
--chip-height: 55px;
--chip-border-radius: 50%;
--chip-icon-size: 30px;
}
}
VERTICAL SWING UP (Mobile Devices) - FOR STICKY FLOATING NAVIGATION MENU - All Devices - Mushroom Chips Card
FULL CODE FOR CARD IS AVAILABLE FROM THIS LINK
If your menu is getting a bit wide to navigate to your pages on mobile devices, I have added card-mod to swing the menu up vertically only on small screen devices.
CARD-MOD TO SWING MENU VERTICAL ON SMALL SCREEN DEVICES
card_mod:
style: |
{%- set toggle = states('input_boolean.chips_menu_toggle') %}
{%- if toggle == 'on' %}
@media (orientation: portrait) and (max-width: 768px) {
ha-card {
z-index:1;
position: fixed;
bottom: 5px;
left: -415px;
width: calc(100% + 350px);
background-color: transparent !important;
border-radius: 100px;
padding: 10px;
{{states('sensor.mushroom_chip_box_shadow')}}
transform: rotate(90deg);
transform-origin: bottom right;
{%- elif toggle == 'off' %}
@media (orientation: portrait) and (max-width: 768px) {
ha-card {
z-index:1;
position: fixed;
bottom: 5px;
left: 5px;
width: calc(100% - 10px);
background-color: transparent !important;
border-radius: 100px;
padding: 10px;
{{states('sensor.mushroom_chip_box_shadow')}}
{%- endif %}
}
}
@media (orientation: portrait) and (min-width: 769px) {
ha-card {
z-index:1;
position: fixed;
bottom: 10px;
left: 50px;
width: calc(100% - 100px);
background-color: transparent !important;
border-radius: 100px;
padding: 10px;
--chip-height: 60px;
--chip-border-radius: 50%;
--chip-icon-size: 30px;
{{states('sensor.mushroom_chip_box_shadow')}}
}
}
@media (orientation: landscape) and (min-width: 1281px) {
ha-card {
z-index:1;
position: fixed;
bottom: 5px;
left: 100px;
width: calc(100% - 200px);
background-color: transparent !important;
border-radius: 100px;
padding: 10px;
--chip-height: 55px;
--chip-border-radius: 50%;
--chip-icon-size: 30px;
{{states('sensor.mushroom_chip_box_shadow')}}
}
}
@media (orientation: landscape) and (min-height: 600px) and (max-height: 800px) and
(max-width: 1280px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 5px;
left: 50px;
width: calc(100% - 100px);
background-color: transparent !important;
border-radius: 100px;
padding: 10px;
--chip-height: 55px;
--chip-border-radius: 50%;
--chip-icon-size: 30px;
{{states('sensor.mushroom_chip_box_shadow')}}
}
}