I’m trying to add a custom css file in order to try and override some styles I can’t get to in my theme. It doesn’t appear to be loading at all. I threw in some basic styles that should just show up in various places in the UI, but nothing ever shows up and I can’t find my styles anywhere in the developer tools. I’m clearing cache, and updating the version number on my css file, but I get nothing. There’s no errors in the log related to it.
This is the resources section of my raw config (from the UI editor):
This is my style sheet. The really explicit selectors are the fields I actually want to change. I don’t like using the !important modifier, but I’m using it here just to try and get it working.
The css file is located in a css folder under my config/www folder. In other words, /config/www/css/dark-mix-styles.css
Any ideas what I might be doing wrong? I really don’t think it’s getting loaded at all. I’m using Vivaldi (chromium based), but I also am not seeing my changes in chrome. This is hassio running on a pi BTW.
Is there a certain folder name I need to put custom css files in? I tried moving my css file to /config/www and updating the resources section to point to /local/dark-mix-styles.css?v=0.xx but I still don’t seem to get any indication the file is being loaded.
Forgot to tag this with “frontend”. Hopefully someone can answer my questions. I just need to know if it’s still possible to load custom css files as I’ve described and if there’s any special locations where they need to go. I’ve tried many combinations of things over the last few days and still don’t seem to get my custom css file to load or take effect.
Home Assistant uses web components which rely heavily on something called a ShadowDOM.
In short, that means each element (cards, toggles, icons, buttons, sliders, etc…) are isolated from each other and that you can’t modify them from “outside”.
This is a very good thing, because it means you can make a webcomponent that looks a certain way on one website, and then just copy it over to another website as a neat little package and it will look exactly the same (if you’ve done some web design work, you know this is HUGE).
It’s a bad thing, though, because you can’t change the components very easily.
There are some ways, though.
The components can still read, inside their shadowDOM, the value of some CSS variables defined outside. That’s how the themes work.
But besides that, your only option would be to use javascript monkey-patching to replace components or parts of components manually.
I’ve done a lot of web development in the past, but have not really kept up with all the HTML 5 stuff. When I saw you talking about the shadow roots in the card-mod docs, I assumed it was part of some third party library that HA was using. I didn’t realize it was part of the HTML 5 spec.
So, I went back to the school of the internet yesterday and learned all about these things. What I started working on first was a custom javascript that would iterate all the shadow roots to find all the mwc-button/mdc-button objects on the page and inject the foreground color I wanted. That became a rabbit hole very fast that I didn’t want to go down So, I stepped back and looked at it from another angle. My main issue was with this dark theme I created. I had the colors just like I wanted, but the primary color was a darkish blue. Because mdc-buttons use the primary color as the text color, the text on those buttons was practically unreadable. So I looked at why I needed that dark primary color. It was only for the app header.
So, I made my primary color lighter to make the text readable, then used javascript to set the app-header and app-toolbar object background colors to my original darker color. That works pretty well, except it only works in lovelace pages. HACS and the developer tools, etc. do not get my custom javascript so the header is the lighter color. I can live with that.
But my next question is if there is a way to introduce custom javascript somehow for those non-lovelace portions of the frontend? I’m running hassio so I don’t have access to wherever those pages are served from (except for HACS).
I dabbled a bit in web design myself back in the early 2000s… then nothing until lovelace.
As you’ve probably seen, it’s best to just forget everything you think you knew and start over.
The primary color is used in some more places, like section labels in entities cards, but I think there’s actually a new variable (`–app-header-background-color) for setting the header color separately. Not sure if that made it into 0.104, but I’d think so.
Ahh, excellent. The --app-header-background-color worked like a charm and is exactly what I wanted. I’ll refer back here is I need to add some javascript for something else in the future.
I’ve added a custom js as described above. But I’m unable to perform a simple getelementbyid and add some classes to it. The Dom elements don’t seem to be recognized (null). Tried binding on load, inserting script manually, but no go. Even the insertion of jQuery library seems to work, but then no way to use on document ready.
Can you guys point me to the right direction to get an element by it’s id using javascript? I’m trying to read and catch-up on shadowdom. I thought this was some Hass elements.
So, I stepped back and looked at it from another angle. My main issue was with this dark theme I created. I had the colors just like I wanted, but the primary color was a darkish blue. Because mdc-buttons use the primary color as the text color, the text on those buttons was practically unreadable. So I looked at why I needed that dark primary color. It was only for the app header.