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…?
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
+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.
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)'
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.
That would be --sidebar-icon-color:
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
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.