if you use thumbing like:
DONT UPDATE TO 2023.4 beta, because it will render
o and, btw, on button-card, see: Lovelace: Button card - #6829 by Mariusthvdb
Editing the header bar to semi transparent is failing now, too. Even with the new 3.2.1 update.
card-mod-root: |
app-header {
background: var(--ha-card-background) !important;
}
app-toolbar {
background: transparent !important;
}
This worked for ages now. So I hope it’s correct ^^
Ah and this for more understanding of my doing:
ha-card-background: "rgba(0, 0, 0, 0.5)"
the new card-mod did fix the main issue probably, but the mods on the card-mod-sidebar-yaml: no longer work.
update
well, they do card-mod-sidebar-yaml no longer works · Issue #264 · thomasloven/lovelace-card-mod · GitHub
but things changed in HA see:
so, for the regular notification badge, we need to add a default ,248px like:
a[data-panel='ui-familie'] paper-icon-item:after {
content: "{{states('sensor.family_home')}}";
left: calc(var(--app-drawer-width,248px) - 44px);
position: absolute;
min-width: 20px;
box-sizing: border-box;
border-radius: 50%;
font-weight: 400;
background-color: {{states('sensor.presence_color')}}; /*var(--accent-color);*/
line-height: 20px;
text-align: center;
padding: 0px 6px;
color: {{'saddlebrown' if states('sensor.presence_color') == 'gold' else 'ivory'}};
/*var(--text-accent-color, var(--text-primary-color));*/
font-size: 14px;
}
and that brings back the notifications:
however, collapsing the menu changes css to a fixed 26px as you can see in the Inspector screenshot, and I’ve not found a way yet to mimic that in the mod. Or find a conditional on the menu being collapsed or not
Hi , something verry simple, i used before Kios Mode, to hide the top bar, but it doesnt work anymore on 2023.4, seems card mod can do it too . i use google dark theme mod, i did this …
Google Dark Theme:
card-mod-theme: Google Dark Theme
card-mod-root: |
app-header {
display: none;
}
ha-card-border-color: rgba(0,0,0,0) ## transparent
# Header:
app-header-background-color: rgb(23, 23, 23)
app-header-text-color: rgb(198, 203, 210)
app-header-selection-bar-color: var(--primary-color)
app-header-edit-background-color: rgb(136, 136, 136)
# Main Interface Colors
....
But i still have the top bar? what am i missing? i added that card-mod-root to it above
I had the header moved to the bottom, but after today’s HA 2023.4 update, the header moved back to the top.
Any idea how to fix this?
I had my fun with transparency for quite some time now. Until 2023.4.0b0 in this case.
First some material I use right now: GitHub - dreimer1986/yourname_card_mod: Home Assistant theme - A dark, electric blue theme that reminds the movie Your Name.
This is a modified yourname theme for use with CardMod and Vilhelm’s Animated Backgrounds (with some 2023.4.0 fixes I hacked together here WARNING: 2023.4.0b0 or newer break Animated Background · Issue #56 · Villhellm/lovelace-animated-background · GitHub)
- I am open for any kind of suggestion of course. (But better over there on Github as I don’t wanna hijack this thread)
- Look closely on the animated pics I added. You can see the sidebar is a mixture of darker transparent buttons and a less transparent rest. This is the goal I want back…
As CardMod seems to have broken down quite a bit, I decided to get some stuff fixed with a style JS: https://raw.githubusercontent.com/dreimer1986/yourname_card_mod/master/www/styles.js
Header and Lovelace background are fine again, but sidebar is still funny. I got a suggestion from BramKragten how to fix it and it indeed does SOMETHING, just not what I want. The fix in the script casues one layer to vanish as the whole sidebar gets lighter. But there is one layer I cannot find and it is NOT transparent. This can be seen fine when the site loads up after Cache wipe. Sidebar has some dark color and the rest is way lighter. Sadly I cannot make a pic @ home as my PC is too fast, I saw this at work… Thus the current result is:
Here for comparison the same without setProperty("–mdc-theme-surface", “transparent”)
It’s darker.
Now to the final part… HELP!!! What did I miss in all my mess? Why is this thing not transparent? What layer did CardMod make vanish here and now fails to do?
Does Compact-Header still work on HA 2023.4.0?
This following code in my theme.yaml doesn’t do jackshit
ios-dark-mode:
# Global
card-mod-theme: ios-dark-mode
card-mod-root-yaml: |
.: |
ha-menu-button {
display: none !important;
}
@media (orientation: portrait) {
a.menu-link[target="_blank"], ha-button-menu, [main-title] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-right"] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-left"] {
display: none;
}
}
thanks for noticing that, I hadn’t, because my existing theme mods on those app-header and app-toolbar still work. which is remarkable?
/* Set the toolbar background. */
app-header, app-toolbar {
background: {{'radial-gradient(var(--primary-color),var(--card-background-color))'
if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
else 'var(--primary-color)'}};
color: var(--text-primary-color);
}
ive check and moved to:
/* Set the toolbar background. */
.header, .toolbar {
background: {{'radial-gradient(var(--primary-color),var(--card-background-color))'
if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
else 'var(--primary-color)'}};
color: var(--text-primary-color);
}
and yes, that works also 
huh?
need to check if the main settings also have changed:
app-header-background-color:
app-header-text-color:
app-header-edit-background-color:
for that matter… no, they havent: frontend/src/resources/styles.ts at 81ebdf1448ab25689736ad59e5c9012e971280d1 · home-assistant/frontend · GitHub
but, also see this:
app-header and app-toolbar are still very much alive
If someone stumbles upon these for 2023.4.0 let me know:
card-mod-sidebar: |
:host {
background: var(--ha-card-background) !important;
}
div.menu {
background: transparent !important;
}
paper-icon-item[role=option], paper-icon-item[aria-role=option] {
background: var(--ha-card-background) !important;
}
.iron-selected paper-icon-item {
background: var(--ha-card-background) !important;
}
How do I change the color of the entire header?
I’ve tried a handful of variations on this:
card-mod-root-yaml: |
.: |
app-header {
color: black !important;
}
anyone knows how to move the back-arrow of a subview up?
.mdc-icon-button {
padding-bottom: 10px;
}
doesn´t work for me
moving the title up worked with
.main-title {
padding-bottom: 10px;
}
Try this.
card-mod-root-yaml: |
.: |
.header {
color: black;
}
Thanks, but I couldn’t get that to work.
I did find the HA built-in variable app-header-background-color: that seems to do what I need except that I currently have that variable set to different colors for light and dark mode. For most of my devices, I want to keep the header background color intact for light and dark modes, but I need to turn it black based on a specific @media query selector on a specific device regardless of light/dark mode. I think the right way to do this is to place the media query in both light/dark mode sections, but cannot seem to figure out the right syntax for media queries in those sections.
modes:
light:
@media (orientation: landscape) and (min-width: 950px) {
.header {
--app-header-background-color: black;
}
So, here’s a new question:
What’s the right way to wrap a built-in HA variable with a media query in the modes section of a theme?
Since 2023.4, my theme using card-mod is broken, but only in the companion app (iOS).
The culprit part is this:
card-mod-view-yaml: |
hui-masonry-view $: |
.badges {
margin-top: auto !important;
}
.: |
hui-masonry-view {
display: flex;
flex-direction: column-reverse;
justify-content: start;
}
It is to put the badges at the bottom of the pages.
It is working perfectly fine in a browser but in the companion app, the pages are opening at the bottom and it is not possible to scroll up.
At startup:
Trying to scroll (generating a refresh):
When I put the default theme (not using card-mod), everything is working as expected.
I have this code where the top bar has been moved down.
The color was black.
After the HA 2023.4 update the bar is back up and gray and I have no idea how to get it back down, black.
Everything else works fine.
Do you have any idea?
card-mod-theme: hapanel
# Header
card-mod-root-yaml: |
ha-app-layout$: |
#contentContainer {
padding-top: 0px !important;
padding-bottom: 48px !important;
}
ha-tabs$: |
#tabsContainer {
display: flex;
justify-content: center;
}
.: |
ha-tabs {
height: var(--header-height);
--paper-tabs-selection-bar-color: #D2691E !important;
color: #696969 !important;
}
paper-tab[aria-selected=true] > ha-icon, paper-tab[aria-selected=true] {
color: #FF8C00 !important;
}
/* Let's change the background. */
app-header, app-toolbar {
background: black !important;
color: #A9A9A9 !important;
}
app-header {
top: calc(100vh - 48px) !important;
bottom: 0 !important;
transform: unset !important;
}
/* This adds the time */
ha-button-menu::before {
font-size: 18px;
height: 20px;
width: 100px;
margin-left: 150px;
margin-right: 150px;
content: "{{ states('sensor.aktualni_den') }}";
position: absolute;
top: 16px;
right: 48px;
}
try changing app-header to .header and app-toolbar to .toolbar, don´t forget to reload your themes after changing it.
card-mod-theme: hapanel
# Header
card-mod-root-yaml: |
ha-app-layout$: |
#contentContainer {
padding-top: 0px !important;
padding-bottom: 48px !important;
}
ha-tabs$: |
#tabsContainer {
display: flex;
justify-content: center;
}
.: |
ha-tabs {
height: var(--header-height);
--paper-tabs-selection-bar-color: #D2691E !important;
color: #696969 !important;
}
paper-tab[aria-selected=true] > ha-icon, paper-tab[aria-selected=true] {
color: #FF8C00 !important;
}
/* Let's change the background. */
.header, .toolbar {
background: black !important;
color: #A9A9A9 !important;
}
.header {
top: calc(100vh - 48px) !important;
bottom: 0 !important;
transform: unset !important;
}
/* This adds the time */
ha-button-menu::before {
font-size: 18px;
height: 20px;
width: 100px;
margin-left: 150px;
margin-right: 150px;
content: "{{ states('sensor.aktualni_den') }}";
position: absolute;
top: 16px;
right: 48px;
}Hi,
since 2023.4 my very simple theme to remove the top header is not working anymore. Anyone how to fix?
Theme
#Mushrooms Shadow Theme for Mobile Interface
Mushroom Shadow Mobile:
card-mod-theme: Mushroom Shadow Mobile
card-mod-root: |
app-toolbar {
display: none;
}
# Home Assistant override
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
ha-card-border-width: 0
modes:
light:
primary-text-color: "#212121"
primary-background-color: "#EFEFEF"
# header
app-header-text-color: "var(--primary-text-color)"
app-header-background-color: "var(--primary-background-color)"
dark:
primary-text-color: "#DDDDDD"
primary-background-color: "#121212"
# header
app-header-text-color: "var(--primary-text-color)"
app-header-background-color: "var(--primary-background-color)"
try this:
card-mod-root: |
.toolbar {
display: none;
}
That worked, the top bar is down and all, but there’s one more problem.
After moving the bar down, it remains gray, empty at the top, taking up space on the tablet.
Thank you for your kind help.
that didn´t worked - still icons from the header are there