Can someone tell me the Theme entry I need to add/change/adjust so the Background and the Foreground colours of these items are Black & Blue respectively.
Cheers. ✌️
#[Solved] CSS Name or "Theme" entry to change these colours
magic whale
umbral beacon
If you're talking about the little pop-up that appears with the percentage while sliding, I think it is --divider-color). For the background color of the card (blue in your screenshot), I think it is --card-background-color.
magic whale
Alternatively: Is there a comprehensive list of all Theme-able entries??
Opps, soz @umbral beacon I wrote my last before seeing your reply.
I'll "have a play" later - Thnx
magic whale
Alas, not the ones:
- card-background-color - Changed all my Dashboard card's BGs
- divider-color - Just changed their boarder
... Neither made a difference to the Light's Slider Pop-up 😦
The standard "Home Assistant Theme" shows contrasting colours, so there must be a setting for them
umbral beacon
In hindsight, I didn't look to see if the variables were used elsewhere. Looking at the first screenshot I posted, you could try --dialog-scroll-divider-color (which was undefined for me) or the "higher-level" --mdc-dialog-scroll-divider-color should target specifically that object, I think.
umbral beacon
Alternatively: Is there a comprehensive list of all Theme-able entries??
I did some digging into the code (which I am pretty clueless what it all means...) but I found a reference for --ha-dialog-surface-background in ha-dialog.ts which I think is the more-info. LINK
magic whale
I couldn't find what first 2 changed but, the third!
Handy to know thou, and I do appreciate your time.
FYI: That Yellow ha-dialog-surface-background is used elsewhere too. E.G. Edit panels for UI elements
umbral beacon
For that last one, if you could target .mdc-dialog .mdc-dialog__surface {background: XXXXX; } where XXXXX is the color, then you wouldn't have to rely on a common variable. I think that is where "card_mod themeing" comes into play, essentially card_mod inside your theme file. I haven't worked with it but I seen it in a theme. I think this snippet came from a MinimalistUI theme (minimalist-mobile-tapbar.yaml): ```yaml
card-mod-root-yaml: |
ha-tabs$: |
#tabsContent {
width: 97%;
}
.: |
.header {
top: auto !important;
bottom: 0px !important;
box-shadow: var(--footer-shadow);
height: var(--header-height) !important;
}
Just out of curiosity, is this just something for your personal setup or something for an upcoming video? (I recognized your username.)
magic whale
Personal atm - It's been nagging me for some time. I have plans for doing a full-on "Theme" video/tutorial.
"... (I recognized your username.)" A subscriber I hope LOL
umbral beacon
I'm subscribed. 😁
magic whale
@umbral beacon
Ok, found it. It's called: clear-background-color:
[Solved] CSS Name or "Theme" entry to change these colours
Text uses: primary-text-color: which I'm ok with.
umbral beacon
Interesting. Looks like that is part of ha-control-slider.ts
I did notice that it only looks for that specific variables whereas some other items can look for a couple of different variables (hence, the one that I mentioned that was undefined.) yaml background-color: var(--clear-background-color); color: var(--primary-text-color); font-size: var(--control-slider-tooltip-font-size); I wonder if it would be better to also look for --control-slider-tooltip-background-color (or something like that), too. Same for the color: --control-slider-tooltip-text-color, perhaps?
umbral beacon
I shall give those a go....
Those won't work. What I meant was the code is locked into just the variable you found, but it is not intuitive to include that names that I mentioned. (Wondering if the code should be updated to handle them.)