Help Please - Theme Mod within Developer Tools

Can somebody please help me?
Got far with my theme edit but now I am stuck.

Hi, searched the forum, reading through advice on theme overviews and tested several things but still dont manage to figure out on how to change this.

I want to change within the Dropdown, select menu in
Developer Tools > Actions

It is not the same setting as input, select menus in cards. Seem to be another section. I am not using dark or light theme (maybee something I should have done but I created the theame to work with both)

The selected item, background, within the menu is white and as I’ve picked white text font. I would change the background or the text on a selected item.

Appresiate any kind of help please.
:thinking:

I will not tell you an exact name of a particular CSS variable which should be added in to a theme.
Instead, I can try to tell you how to sort things out by yourself.
You can find out names of CSS variables for any UI element using Code inspector or a similar tool of your browser. In Chrome it is shown with F12.
Hover a mouse on a particular UI element, right click, ā€œopen in code inspectorā€ (or how it is called). The when it will be shown in a tree-like structure, you can go higher or down a hierarchy. Check how a particular property (like ā€œbackgroundā€ in your case) is set.
Also, there’s a chance that no CSS variables can be used to customize a particular element, values are hard-coded or there is a more complex algorithm.

Thanks for reaching out, a helping hand to a node-nerd in desprate mode… my smart-home-editing-brain-freeze has entered another level.

This is what happens when a stubborn node-nerd jumps ahead of his knowledge barrier. Should have learned this with html and css before… Thats another chapter.

I did find this with the chrome inpect…

<sup>.combo-box-row.current-value {
    background-color: var(--ha-color-fill-primary-quiet-resting);
}</sup>

I can tick the box and get the white layer to go away…

looking into the html style section

--ha-color-fill-neutral-quiet-resting: var(--ha-color-neutral-95)

Here is where my knowledge ends…
Dont have time to learn this now so guess I’ll be stuck.

Cheers

If you do not know how to create a custom theme:
go to the main card-mod thread - 1st post - fantastic link - scroll down to ā€œOther stuffā€ - themes - how to add own vars into a default theme.
Do it and then post a file of your custom theme here, we’ll see.

As for particular cases like that - there are 2 ways: either you will wait for someone’s ready code or try to dig it yourself. The ā€œā€“ha-color-neutral-95ā€ variable is hardcoded in a HA code. Check where & how that ā€œā€“ha-color-fill-neutral-quiet-restingā€ is used; it is probably used somewhere down the hierarchy like ā€œbackground: var(–ha-color-fill-neutral-quiet-resting)ā€ - consider that as setting a variable on a root level to be used on lower levels.

Thanks @Ildar_Gabdullin
Guess I’ll have to live with this issue until I have the time to learn this properly. Priorities, Priorities. Need to think through how the lovelace mods should be made to secure functionallity and look. Future-proof.

I consider it is a big risk making too many big changes in Home Assistant due to how much are changing in the backend due to developments and upgrades. Suddenly it can break…

Playing with a custom theme will not brick your HA setup. In a worst case, a frontend may not be loaded (though I am not sure if it is possible by themeing), and even in this case you may SSH to your server and manually comment a line in your configuration.yaml for your custom theme.

No, playing with a custom theme won’t brick HA. But, If I customize and create functions in HA to look and work in a specific way, to be helpful and logical for some users, then it might become a problem.

For me this is beyond my own little ego and fun playing with home automations. I have 3 setups in three different homes. The other two are at parents or close friends that I want to help. Both homes have functions that are pretty important for them. They don’t exist to buy, I had to build and create them. To make the functions easy to use I have to create a front and UI that is logical and easy for them to understand. That is the reality. If that breaks or doesn’t look or work as expected… It becomes a problem. :scream:

For me it is a balance on how much time to spend on this. A balance between the most necessary and my own aesthetic force to improve when I don’t like what I see. I think you know what I am on about. :wink:

So we’ll see what I can get done later on.

Totally understand you in general.
But, coming back to the initial question ā€œhow to set a background color for a particular UI elementā€ - I consider this as critical only if a user have difficulties with eyes, or a particular display should have particular colors (too dark/too light in a room, or a display is low-end and thus cannot show colors well); other reasons only could be aesthetical.
Imho, default themes are more-or less OK, but can be surely improved for some cases.

hmm… yea. I have plenty to say on that. :joy: ā€œOKā€ … yea maybe. Good? No.

The UI is not HA strongest bit. But its still one of the best Home Automations due to all the options.

While I’m here ā€˜talking’ to you. I have to say, there are people like you and others here on the forum that are key for this Home Assistant project to work.

BIG THANKS for all the contributions. So much great helpful material. All the kindness and will to give. That is very valuable! All the help I’ve gotten from searching through this forum…

:hugs:

1 Like