Updating banner and background colors in Lovelace

Share your Projects! Themes
1

I’ve put together the following dark-theme. I’m struggling to change the banner color (default: blue) and background (default: white) in Lovelace. Is it possible to change the colors of these objects?

image
image1469×909 101 KB

Thanks in advance for any pointers.

Below is the theme definintion:

pauls_dark:
# Main colors that can be changed
  card-background-color: "#d3d3d3"
  text-primary-color: "#F2F2F3"                  # not used) 
  primary-color: "#fefd01"                       # zzz on)
  disabled-text-color: "#D6DBDF"                 # couch off icon & fish off icon
  divider-color: "rgba(179, 179, 179, 0.12)"
  paper-card-background-color: "#85929E"         # background all cards)  
  paper-grey-200: "#191919"                      # almost black 
  paper-item-icon-color: "#D6DBDF"               # weather icons zzz off)
  paper-listbox-background-color: "#202020"      # not used)
  paper-listbox-color: "#FFFFFF"                 # not used)
  primary-background-color: "#303030"            # dark grey
  primary-text-color: "#fefd01"                  # fishtank on icon)
  secondary-background-color: "#2b2b2b"          # not used)
  secondary-text-color: "#FFFFFF"                # weather city, desc, lows)
  ha-label-badge-color: "#DEDEDE"

# Colors based on variables, see above
  bignumber-fill-color: "var(--secondary-background-color)"
  label-badge-background-color: "var(--secondary-background-color)"
  label-badge-text-color: "var(--text-primary-color)"
  paper-card-header-color: "var(--paper-item-icon-color)"
  paper-grey-50: "var(--primary-text-color)"
  paper-item-icon-active-color: "var(--primary-color)"
  paper-item-icon_-_color: "var(--primary-text-color)"
  paper-slider-active-color: "var(--primary-color)"
  paper-slider-knob-color: "var(--primary-color)"
  paper-slider-knob-start-color: "var(--primary-color)"
  paper-slider-pin-color: "var(--primary-color)"
  paper-slider-secondary-color: "var(--light-primary-color)"     
  paper-toggle-button-checked-ink-color: "var(--dark-primary-color)"
  paper-toggle-button-checked-button-color: "var(--primary-color)"
  paper-toggle-button-checked-bar-color: "var(--light-primary-color)"
  paper-toggle-button-unchecked-bar-color: "var(--primary-text-color)"
1 Like
2

Have you been able to find the answer to your question?

3

Hi AJ

I still have not been able to change the banner or background colors in Lovelace. I read somewhere that it may be because of the use of custom cards. I’m using the custom button-card heavily. Can anyone confirm?

Thanks for responding
Paul Bosker

4

That’s a shame. I’ve been able to add a background image, so you could change the colour by adding a picture of your preferred colour to the www folder in your config, then change the background code for each of your views, so it looks a bit like

  • background: center / cover no-repeat url("/local/your_background-file_name") fixed

Doesn’t help with changing the banner colour but maybe someone will respond.
Best of luck

5

Adding a plain background picture worked like a charm. Thank you for the suggenstion.
Merry Christmas to you and your family Adam

1 Like
6

For me in Lovelace changing the banner color is:

primary-color: "#2D2D2D"

and the background is:

--primary-background-color: #272727;

Of course, changing the primary color to something subtle, also means all the buttons are now that color…

7

Does anyone know how to color the bottom bar in the iOS app? I have done it before so I know it is possible. But I don’t know which attribute to use for that. And I have a nice setup now that I do not want to mess with it too much XD. Thanks in advance.

8

Thank you AJ, but could I ask where Is url(“/local/your_background-file_name”). I have HA with SAMBA enabled. There is a config directory, but where exactly is there a www or a local or anything directory that I can store the image? :wink:

9

Hi,
TBH, I thought www was already in config now but if not, you can create the www folder in the config folder and then add images, or any other file type to that folder. The way you reference that folder path is /local/filename.extension, where ‘local’ is the ‘www’ folder and you can guess the rest :grinning:

10

Great thanks!

11

The banner now has its own entry.

Primary color is separate from the header bar.
Before the last update, changing the primary color to white changed the top bar white, where now it can be it’s own color.

# primary-color: "#8978a0"
  primary-color: "#ffffff"
  app-header-text-color: "#ffffff"
  app-header-background-color: "#8978a0"