Help with edit themes


#1

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


#2

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:


#3

+1 I have the same issue in my theme


#4

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)'

#5

Thanks, this is working great!

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


#6

What is theme name ? Can you share it ?


#7

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


#8

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.


#9

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


#10

That would be --sidebar-icon-color:


#11

Thank you a lot


#12

ANd you found solution how change black text ?


#13

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.


#14

ok thanks :slight_smile:


#15

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