Regular Button Color via Theme File

undertoe · February 14, 2019, 3:09am

Using the dark theme and trying to just make modifications to the regular old button in Lovelace. Anyone know how to do that? I want to change the text color and background color.

dark_theme:
  # Main colors
  primary-color: '#383C45'                                                        # Header
  accent-color: '#5eb3e4'                                                         # Accent color
  dark-primary-color: 'var(--accent-color)'                                       # Hyperlinks
  light-primary-color: 'var(--accent-color)'                                      # Horizontal line in about
      # Text colors
  primary-text-color: '#b8b8b8'                                                   # Primary text colour, here is referencing dark-primary-color was #fff
  text-primary-color: 'var(--primary-text-color)'                                 # Primary text colour
  secondary-text-color: '#5294E2'                                                 # For secondary titles in more info boxes etc.
  disabled-text-color: '#7F848E'                                                  # Disabled text colour
  label-badge-border-color: 'green'                                               # Label badge border, just a reference value
      # Background colors
  primary-background-color: '#383C45'                                             # Settings background
  secondary-background-color: '#383C45'                                           # Main card UI background
  divider-color: 'rgba(0, 0, 0, .12)'                                             # Divider
      # Table rows
  table-row-background-color: '#353840'                                           # Table row
  table-row-alternative-background-color: '#3E424B'                               # Table row alternative
      # Nav Menu
  paper-listbox-color: 'var(--primary-color)'                                     # Navigation menu selection hoover
  paper-listbox-background-color: '#2E333A'                                       # Navigation menu background
  paper-grey-50: 'var(--primary-text-color)'
  paper-grey-200: '#414A59'                                                       # Navigation menu selection
      # Paper card
  paper-card-header-color: 'var(--accent-color)'                                  # Card header text colour
  paper-card-background-color: '#434954'                                          # Card background colour
  paper-dialog-background-color: '#434954'                                        # Card dialog background colour
  paper-item-icon-color: 'var(--primary-text-color)'                              # Icon color
  paper-item-icon-active-color: '#F9C536'                                         # Icon color active
  paper-item-icon_-_color: 'green'
  paper-item-selected_-_background-color: '#434954'                               # Popup item select
  paper-tabs-selection-bar-color: 'green'
      # Labels
  label-badge-red: 'var(--accent-color)'                                          # References the brand colour label badge border
  label-badge-text-color: 'var(--primary-text-color)'                             # Now same as label badge border but that's a matter of taste
  label-badge-background-color: '#2E333A'                                         # Same, but can also be set to transparent here

  # Switches
  paper-toggle-button-checked-button-color: 'var(--accent-color)'
  paper-toggle-button-checked-button-background-color: 'red'
  paper-toggle-button-checked-bar-color: 'var(--accent-color)'
  paper-toggle-button-checked-ink-color: 'var(--accent-color)'
  paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
  paper-toggle-button-unchecked-button-background-color: 'red'
  paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
  paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'
      # Sliders
  paper-slider-knob-color: 'var(--accent-color)'
  paper-slider-knob-start-color: 'var(--accent-color)'
  paper-slider-pin-color: 'var(--accent-color)'
  paper-slider-active-color: 'var(--accent-color)'
  paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
  paper-slider-secondary-color: 'var(--secondary-background-color)'
  paper-slider-disabled-active-color: 'var(--disabled-text-color)'
  paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'
      # Google colors
  google-red-500: '#E45E65'
  google-green-500: '#39E949'
  
  paper-button-ink-color: "#5294E2"
  paper-button-color: "#5294E2"

tom_l · February 14, 2019, 4:08am

This is very useful for trying to work out what colours are what: Theme Color Chart - My UGLY Theme

Unfortunately it does not show those buttons and I think the button colour is the same as the card background colour (paper-card-background-color).

Try applying the ugly theme and see if you can work out which text the buttons use by referencing the yaml file.

undertoe · February 14, 2019, 12:06pm

Very useful theme thanks @tom_l !

I guess what i am looking for is what is the less code for the button

Like i always see the toggle buttons in there
paper-toggle-button-checked-ink-color

What would be the code for just a regular old button?

I’ve tried with no luck

paper-button-ink-color: "#5294E2"
paper-button-color: "#5294E2"

tom_l · February 14, 2019, 12:21pm

Yeah that’s for what we commonly call toggle switches:

I don’t know. You could try asking the frontend developers discord forum if you dont get an answer here.

undertoe · February 14, 2019, 12:24pm

Yea i knew that is what the toggle color is and where it effects it.

Just crazy to me, i went through a lot of themes and no one changes the regular button color or background color.

tom_l · February 14, 2019, 12:27pm

If you see the original (blog?) post about themes it’s not listed so I guess it is either not exposed for theming or it is but is undocumented and no one has worked out what the object is called.

undertoe · February 14, 2019, 3:47pm

hey @tom_l mind sharing the original blog post so i can ask the question?

tom_l · February 14, 2019, 4:12pm

Seems I might be miss remembering:

undertoe · February 14, 2019, 4:29pm

Sent @audrey a message

finity · February 15, 2019, 12:33am

I’m assuming that you are using the alarm panel card in lovelace?

Are you sure the card doesn’t just hard code the buttons and text to match the background/text theme colors?

so it might not be a theme problem, per se, but a color coding in the card of which theme elements to use for the colors.

undertoe · February 15, 2019, 6:52am

Nope happens to execute button for script domain. Input select dropdown, door locks

BaSoMaTiX · March 8, 2019, 8:57am

I am trying to create new themes and I also face similar problems. A small tip to find what is applying a color is to use browser inspection. I use it in chrome quite often. It seems however, that the top bar is linked to a lot of the text:

I’m no expert at this at all so I might be completely wrong, but it looks like the text should get it’s own “variable” to set a color to. Maybe this can be a feature request so more advanced themes can be made?

undertoe · April 3, 2019, 1:12pm

I guess this could be a feature request?

bigmac · May 3, 2019, 1:14pm

Has anyone figured this out yet? I changed the header to dark and yes, it’s tied to a lot of text (status of my locks, the logbook, ect.). I would have thought that the header color would be it’s own element.

undertoe · May 3, 2019, 1:39pm

I have not figured it out. Seems pretty trivial for a less based web app…

apop · May 3, 2019, 2:03pm

@undertoe @bigmac You could try compact custom header. That will let you style the header separately so you can pick a more suitable color for the buttons.

bigmac · May 4, 2019, 8:50am

I guess that’s what happens when you don’t pay attention… very simple (and I already had compact header in use). A simple addition of background: ‘#1F1F28’ is all it took under main_config…

Thanks @apop!