would be completely wonderful if we could set the label text also, onlynwhite is showing now, which is not very helpful when one needs more contrast to the lighter label colors…
hoping something like ha-label-text-color: green would be correct syntax for that…?
Helpful… which is 10 chars more than the docs
HI Andrey,
ive tried the ha-label-badge-color, but it seems that label-badge-red still overrides this?
Im looking for a way to set label-color, and label-text-color , badge-color, badge-text-color
what would i need to use for that in 1 theme?.
this obviously doesnt work as expected:
green_badge:
label-badge-red: lightgrey
label-badge-border-color: green
label-badge-background-color: white
ha-label-badge-color: grey
label-badge-text-color: green
since label-badge-red overrides both border-color (never seems to work at all?) and ha-label-badge-color, which in this combination is simply showing the set lightgrey…
since we’re on the subject:
what would these be for? ive tried them but cant see what they are doing…certainly dont color the label-badge with the mentioned color, they must be for something else?
–label-badge-blue: #039be5;
–label-badge-green: #0DA035;
–label-badge-yellow: #f4b400;
–label-badge-grey:
Have never rated Safari on the Mac, Chrome is far more useful if you want to do anymore than look at the BBC site or Youtube. Regardless, go into Preferences/Advanced and select ‘Show Develop menu in menu bar’ at the bottom as per image below. Then just right click on whatever it is you want more info about and select ‘Inspect element’ and you should see all you could ever want to know about a web page.
sure, thanks, tried that of course, but can’t find the names to the badge-parts there. Nor in Chrome dev inspector for that matter…
since
label-badge-red seems to override @andrey suggestion above of using ha-label-badge-color, I have looked for extra options to theme the badges.
ha-label-badge-label-color would seem to be exactly what i am looking for, an option to theme the badge label color.
Unfortunately this doesnt work at all… with label-badge-red in place, this is overridden with the color set there. Without it it doesnt do anything either…
Would be so very helpful if anyone of the dev’s could able to help or guide in this quest.
ive tried both ha- options with and without the ha- , no luck in any case…
As shown at the top of this thread, ha-label-badge-color can’t be overridden for some reason, hence why we used label-badge-red to achieve the desired effect.
the desired effect in my post was to color the label of the badge.
independently from the set color of the badge.
label-badge-red sets both, so is not the solution to this question.
No, it was the “desired effect” to my question at the start of this thread and I was using it to show why what was wrong with the statement you made in your last post.
It’s all about the context 
This is absolutely brilliant and exactly what I was after. Once I figured out the appropriate tags to override I now have complete control over colours. Well done!
Can this be used to dynamically hide a sensor? I have tried the code below (in my customize.yaml) and it’s not working. Is this supported in HassIO? Are CustomUI functions included automatically or does it need to setup?
sensor.tim_visiting:
entity_picture: https://mydomain.duckdns.org/local/tim.jpg
templates:
hidden: "return (entities['input_boolean.tim_visiting'].state === 'off'); "
Is it also possible to assign a tap-action to the badges? for instance so that I tap on it, it toggles an automation or runs a script?
Off-Topic but, How do you get this black/green theme?
I red this thread 3 times and the info is so spreaded all over and confusing I still cannot make the labels to be green when at HOME and red when AWAY.
Can anyone edit the first post with an example that work 100% and INCLUDES all prerequisites please (aka all entries to which config files) ? Like the first thing to set up after a fresh install.
I use HASSIO.
ty
ps.
Please don’t send me to the first post because I went there and still cannot understand how to make it work .
won’t send you to the first post, but to the instructions on home-assistant-custom-ui/docs/installing.md at master · andrey-git/home-assistant-custom-ui · GitHub 
there is all you need. please have a look and come back when in need…
if you give us some more info on what you want to customize here:
we’ll be glad to help. what are you trying to customize, based on which state of what?
That is the install instruction, went there, it ti just another piece in a puzzle.
I found all the pieces in one place finally in the link below, and it worked.
of course it worked, it followed the install instruction 
and the customizations I gave as an example…
nevertheless the organization of customizations should best be taken out of the configuration.yaml and put in a dedicated file/folder .
do as follows:
homeassistant:
name: Main
latitude: !secret latitude
longitude: !secret longitude
elevation: !secret elevation
unit_system: metric
time_zone: !secret time_zone
customize: !include_dir_merge_named customize
customize_glob: !include customize_glob.yaml
packages: !include_dir_named packages
whitelist_external_dirs: /config
customizer: !include customizer.yaml
in the above organization, you can create files for devices, sensors, automation etc etc and put these in the folder /config/customize.
all your global customizations you can define in /config/customize_glob.yaml
that way, you only need to edit these dedicated files, which are easy to find, and don’t risk ruining your main configuration.yaml file:
of course when using customize in packages, you can/need to set this in these packages
homeassistent:
customize:
sensor.etc_etcWhat you showed is advice for advance users.
That is why I couldn’t figure it out. You assumed I have the same system and knowledge as you.
A beginner will panic because in his install there are no files like yourself so instead of focusing on his problem you just served several more on the plate (like splitting YAML).
I use HASSIO (installing via command line is a no go) so I have to install manually and put all the files in their place… which is not covered anywhere.