Hi! I was wondering if a global theme could manage “active / inative” state of most buttons, after discoreving that yes, I decided to create a theme and share it.
This theme create a frosty black effect on inactive buttons. (Most of them are handled, only my thermostat card has a custom condition using card-mod to match the other button states).
The top bar is also black frosted. If you want any improvement, let me know 
Example with other wallpaper:
theme.yaml
Glossy Black:
card-mod-theme: Glossy Black
card-mod-root-yaml: |
.: |
.header {
background-color: transparent !important;
}
.toolbar {
backdrop-filter: blur(10px) saturate(100%);
background-color: rgba(0, 0, 0, .5);
}
card-mod-view-yaml: |
.: |
hui-vertical-stack-card$: |
#root {
background-color: rgb(0, 0, 0);
}
card-mod-card-yaml: |
.: |
ha-card.type-heading .content {
color: white !important;
font-size: 22px;
font-weight: bold;
}
ha-card.type-tile:not(.active) {
backdrop-filter: blur(10px) saturate(100%);
background-color: rgba(0, 0, 0, .3);
--primary-text-color: white;
--tile-color: white !important;
}
ha-card.expander-card {
background-color: transparent !important;
box-shadow: none;
transition: none !important;
}
ha-card.expander-card .children-container {
margin-top: 8px;
}
ha-card.expander-card .header:hover {
background-color: rgba(255, 255, 255, 0.15);
}
ha-card.expander-card:not(.active) .header {
position: absolute;
right: 5px;
cursor: pointer;
padding: 5px;
margin: 0;
border-radius: 100%;
transition: background 0s;
}
ha-card.expander-card:not(.active) .ico.svelte-icqkke {
transition-duration: 0s;
}
ha-card.type-custom-vertical-stack-in-card {
background-color: transparent !important;
box-shadow: none;
overflow: initial !important;
}
My background
