List of theme variables - HA menus

DeltaNu1142 · December 12, 2025, 4:44pm

It’s long overdue that I start using themes instead of hard-coding all of my colors. I’ve got a decent list going, and I’m pretty sure I have all of the variables that I need for my dashboards identified. If not… I can use some custom ones.

But… for the HA menus? I’m still lost. In particular, I’m trying to get to the point that I can change the colors for a variety of texts and backgrounds to just make them functional:

What am I missing?

  input-idle-line-color: rgba(7,103,215,0.24) # border around active drop-down field
  input-hover-line-color: rgba(7,103,215,1.0) # border around cursor hover drop-down field
  input-disabled-line-color: rgb(0,255,0,1.0) #?
  input-outlined-idle-border-color: rgb(0,255,0,1.0) #?
  input-outlined-hover-border-color: rgb(0,255,0,1.0) #?
  input-outlined-disabled-border-color: rgb(0,255,0,1.0) #?
  input-fill-color: rgb(30,30,30,1.0) # drop-down background color
  input-disabled-fill-color: rgb(0,255,0,1.0)   #?
  input-ink-color: rgb(255,255,255,1.0) # drop-down text color
  input-label-ink-color: rgb(255,255,255,1.0) # drop-down idle text color  
  input-disabled-ink-color: rgb(50,50,50,1.0)   #
  input-dropdown-icon-color: rgba(7,103,215,0.8) # drop-down arrow

I’m certain that the text that shows up in the dropdown menus is primary-text-color. However, I have it set to white, which means I can’t see any of that text unless I identify the right variable(s) for a contrasting background.

A screen shot with a legend would be outstanding. Or… a well-documented list. I’ve looked around and haven’t see one yet. Any help would be great.

Mariusthvdb · December 12, 2025, 4:52pm

you could start here frontend/src/resources/theme/color/color.globals.ts at 3bd45dd29b57136b190539cfea7984235928b861 · home-assistant/frontend · GitHub

you should always check the Inspector for those, then there is no guessing

DeltaNu1142 · December 12, 2025, 5:20pm

Thanks–I’m able to get some useful variables from this list. I haven’t tried them all yet.

Honestly, there’s still a substantial amount of guesswork for me as I wade through this info, as I’m not sure how to correlate the code to the elements I’m looking at:

My HACS is a complete mess:

For instance… I see a new variable, bubble-backdrop-background-color, in both… but I can’t see what it corresponds to and defining it my theme doesn’t have any effect.

Mariusthvdb · December 12, 2025, 5:30pm

use the pointer to select an element, and then check in the style which variable it is set to

is for the custom card and wont have any impact here.

bubble will probably explain its use of vars in their repo.

DeltaNu1142 · December 12, 2025, 5:53pm

I appreciate your willingness to give me an education on this. I’ve had limited success doing this in the past, mostly because I don’t know what I’m looking for.

Going back to my immediate issue, this is what I see when I visit my profile page and hit F12 (using Chrome):

Now… I don’t know what I’m looking at. And clicking around the page doesn’t change the contents of the Styles tab in the bottom right. The most worrisome of the current issues is that I can’t see the values in the drop-down menus, and clicking them only results in changing things I don’t want changed… e.g., I set my UI language to Afrikaans just now while trying to see if I could see the styling of the invisible selections in the Language drop-down. In doing so, I didn’t see anything of value in the Styles tab.

I could very well be doing this incorrectly. I’ve just gone down this road before, and I only occasionally find the variable names I’m seeking.

Mariusthvdb · December 12, 2025, 5:55pm

Did you select the right pointer in the toolbar?
in Chrome it looks like this (top left square with the arrow)

Safari has this icon in blue when selected.

after that, you can click any element in the view, and the Styling will scroll to that element

DeltaNu1142 · December 12, 2025, 6:07pm

Thanks–that’s what I’ve been missing, and now I’m close. Now… once I click on this element (in this case, one of the selection item backgrounds), I see this:

I see the color (currently #FFFFFF) in the pop-up, and the top window on the right definitely jumps to that element in the page… but the Styles tab below isn’t revealing a variable name for the color.

I’m sure I’m close, but I’m not sure where to dig into to get that variable name from here. Thanks again.

EDIT: If I scroll down in the Styles tab, I see this:

…but… md-sys-color-surface? Could that be it? Seems unlikely. Nope… that doesn’t do it.

EDIT 2: Ah hah… but that variable references card-background-color, which does effect that change. Great. I should be able to make some progress from here.

Thanks again.

Mariusthvdb · December 12, 2025, 6:14pm

You see which var(—cxx) are used. Check your theme for those , and test if they are contrasting to your backgrounds. You can also select the backgrounds, any element really

You can even test another color in the top most ‘box’ in the styling, by simply setting an extra there. Try color: red

DeltaNu1142 · December 12, 2025, 6:28pm

Thanks–I’ve been using purple, really draws the eye. I appreciate the help.