Help with edit themes

Hi
I want edit my themes. I want change color text for items selected on screen…
I dont know what i must put in themes to change this color…
Anybody can help…?history

1 Like

Looking for these fields as well. When inspecting the date field from your first screenshot I have found this
<input part="value" autocomplete="off" aria-required="" required="" tabindex="0" aria-labelledby="vaadin-text-field-label-0">
and
[part~="value"] { font-size: var(--paper-font-subhead_-_font-size); font-family: inherit; color: inherit; border: none; background: transparent; }

I can’t find the solution to override the color: inherit though :confused:

+1 I have the same issue in my theme

I commented in another post while looking to see if anyone else has found the solution. Below are the CSS variables i added to my themes.yaml to attempt to resolve it myself. There are some others with lumo-shade (and percentage variations of that) that I still need to mess with.

image

  lumo-primary-text-color: '#00b706'
  lumo-body-text-color: '#FFFFFF'
  lumo-primary-color: '#00b706'
  lumo-primary-color-50pct: 'rgba(0, 183, 6, .5)'
  lumo-primary-color-10pct: 'rgba(0, 183, 6, .1)'

Edit:
Here are the CSS items that affect the Date-Picker and Entity drop-down lists on the History and Logbook sections. I used variables in my themes but you can can change them like other colors however you prefer.

lumo-primary-text-color: 'var(--green-color)'
lumo-secondary-text-color: 'var(--green-color)'
lumo-primary-color: 'var(--green-color)'
lumo-primary-color-50pct: 'rgba(0, 183, 6, .5)'
lumo-primary-color-10pct: 'rgba(0, 183, 6, .1)'
#Calendar day numbers
lumo-body-text-color: 'var(--white-color)'
#Calendar/Date-Picker Background
lumo-base-color: 'var(--medium-grey-color)'
#Month/Year header
lumo-header-text-color: 'var(--lumo-body-text-color)'
#DayOfWeek Header
lumo-tertiary-text-color: 'var(--lumo-body-text-color)'
lumo-shade: 'var(medium-grey-color)'
lumo-shade-90pct: 'rgba(41, 41, 41, .9)'
lumo-shade-80pct: 'rgba(41, 41, 41, .8)'
lumo-shade-70pct: 'rgba(41, 41, 41, .7)'
lumo-shade-60pct: 'rgba(41, 41, 41, .6)'
lumo-shade-50pct: 'rgba(41, 41, 41, .5)'
lumo-shade-40pct: 'rgba(41, 41, 41, .4)'
lumo-shade-30pct: 'rgba(41, 41, 41, .3)'
lumo-shade-20pct: 'rgba(41, 41, 41, .2)'
lumo-shade-10pct: 'rgba(41, 41, 41, .1)'
lumo-shade-5pct: 'rgba(41, 41, 41, .05)'
#Removes Gradient in Calendar/Date-Picker and Drop-down lists
lumo-tint-5pct: 'var(--darker-grey-color)'
1 Like

Thanks, this is working great!

Do you also run hass.io and if so know how to change these black texts?

What is theme name ? Can you share it ?

It is the midnight theme which I have changed a bit. You can find it on my Github.

My apologies for the delayed response, I just had time to set down at a PC and inspect that text.

That text does not currently have styles/themes applied to it. I’ve submitted an issue on github related to this.

1 Like

Hi everyone can you help me finding the element to change this objects colors?

That would be --sidebar-icon-color:

1 Like

Thank you a lot

ANd you found solution how change black text ?

Hey Pepe, it’s not possible at the moment. That text does not appear to have any theme-controlled CSS applied. There’s an issue on hassio github to have it fixed, but no movement on it yet.

ok thanks :slight_smile:

I’ve found where this is applied in the source and have submitted a PR to hopefully resolve this in an upcoming release.

https://github.com/home-assistant/home-assistant-polymer/pull/2739

The PR is merged but in HA 0.88 the text is still black on my dark theme (cleared cache) where primary-text-color is white. Is it working for you?

It was merged into dev, not sure when the cutoff was for 0.88. I assume we’ll see it in 0.89, unless it’s included in any subversions before then.

Okay, thanks. I will keep an eye on it.

Is there a place that documents all the elements and what they change? It’s really hard making a theme by trial and error.

There’s an effort to gather that information.

2 Likes