I will implement this into my “pre-2022.11” theme… I think, that should be a good option for those who used the theme to get rid of borders, and so on 
It’s a modification and summary of previous work from other people. Not intentional, I was just bringing everything together to make it easier for people to ‘fix’ their dashboards. 
Some people may want at least some of the new colours and, if not, they can change them to suit their needs. The main variable that was important for my dashboards is the state-binary-sensor-color, but that may vary depending on usage.
1 Like
Btw, this doesn’t seem to work.
Tried everything, selected “Backend-selected” in the profile, it does not work in dev tools nor in an automation. Do I miss something that has to be modified somewhere else ?
The theme only works if I specifically select it in the profile.
Weird, it works for me. If you’ve renamed the theme, make sure you change the name in the automation as well? It may also be case-sensitive, although I’m not sure.
Using the automation works fine for me as well, choosing the theme I created with the correct name
This comes in extremely handy, thanks for this work ! 
Weird it is, I have no error, the service call executes but it changes nothing.
And the name is obviously correct because I choose it interactively in the dropdown.
I will continue to investigate further.
Thanks for your work anyway.
So, have implemented the changes from @robertwigley into my theme
Thanks for collecting all the information… Some changes that have been made with the 2022.12 update are still cool stuff…
So I have tried to find a balance between old UI and new UI Options:
Unfortunately, there’s no “default” state for entities like Siren, Alarm Devices and Locks - Maybe, this will come with future releases…
In this case, I plan to update the entities as following:
People (home) => green
People (in Zone) => light blue
People (away) =>
lock (locked) => green
lock (pending) => orange
lock (unlocked) => red (not yet available, afaik)
Alarm (armed) => green? currently red
Alarm (unarmed) => not yet available, afaik)
Binary Sensor Alarm (Clear) => green (not yet available, afaik)
Binary Sensor Alarm (Alarm) => red
update sensors (no update) => green (not yet available, afaik)
update sensors (update available) => red
update sensor (update installing) => orange
1 Like
It will be the default for alarm and lock with this fix Improve person/alarm/lock state by piitaya · Pull Request #14633 · home-assistant/frontend · GitHub
2 Likes
@piitaya : Hi Thanks for your reply
Maybe, still something to consider in this case - binary_sensor “locked / unlocked”
Right now, the state color for unlocked is “active” and locked default.
It would be better, if the state would match the states from the lock entity in my opinion
he already responded to this
1 Like
To get more clarification…
It’s good that we have a valid list of the new styling variables.
Does anyone have a list of what styling variables have been removed and if or what they have been replaced with?
Edit to add something to the discussion:
here are the github pages dealing with theme styles in HA (not necessarily exhaustive) for those that haven’t seen them before:
A solution to manage and retrieve colours on history graph
Note that my huge reaction is all about picture elements card
This is a card where the concept is to use a mix of background graphics, small picture files and regular icons and the documentation describes how you place the elements, scale them and style them. When you change the css used by picture elements card, you break them. It is not many css vars we talk about. It is the colours for on and off used by each element. It has nothing to do with themes. The idea is that in picture elements card you can define the on and off style individually for every entity so one sensor is red and green and another is grey and yellow. Themes affects everything globally.
When you use picture elements card, you expect your on and off colours to exist independent of the style. That is the whole idea with having the style object for every element in the card. And we need styles for both on and off
Note that Picture Elements card is not a custom card. It is an officially supported part of the frontend.
3 Likes
Sure, it’s a supported card. But I only see a theme option in that documentation. And like I said before to my knowledge the only supported ways of changing the style of the front end are by changing the primary and accent colors, everything else is unofficial and undocumented.
You said what you were doing was officially supported. So thats why I wanted to know where the documentation does that shows what you are doing is supported. It may be a supported card but that doesn’t mean everything you can possibly do to it is supported.
If it is documented then it is also assumed supported. If not for any other reason then common human respect. I have supported Nabu Casa from the beginning as subscriber. I have purchased their Blue. I have purchased their yellow even though I don’t need it. And last their SkyConnect dongle. I do not expect the impossible. But a little consideration and care to change things so they do not break to pieces. And when it is unavoidable, that you document how to rework things so it can be done with reasonable effort. It cannot be right that every month breaking changes means we have to spend an entire night till early morning fixing things. I want to be excited getting a new release. Instead I fear them
12 Likes
I feel like we’re talking in circles. You said this:
I’m asking you to please link me to the official documentation you are referring to here.
I did add the link to the Picture Elements Card.
It describes how to use the style and give the example of setting the colour. Right?
style:
# Positioning of the element
left: 50%
top: 50%
# Overwrite color for icons
"--paper-item-icon-color": pink
2 Likes
Yep I just found it here. Hm that is problematic. Thanks, sorry should’ve clicked around further within there.
The best way to long term fix this is to change the syntax to not use css but simple yaml for on_color and off_color. The now broken way was documented but not user friendly
5 Likes