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;
}
}