Change background color depending on state

Share your Projects! Dashboards & Frontend
1

Hi,
I am trying to change Lovelace UI background color depending on the state of the Sun. i.e. Lighter color if Sun is up, darker color if Sun is down. Is this possible?
Thanks in advance,
Manjula

1 Like
2

Hi!

I think you can do this with state image:

  - type: picture-glance
    title: Unten
    entities:
      - switch.light_kueche_light_essen
      - light.ceiling_lights

    state_image:
      "on": /local/unten_ein.png
      "off": /local/unten_aus.jpg
    entity: group.unten

Instead of entity: group_unten you should use a binary sensor (on if sun is up and off if sun is down)
so it will use the background according to the sun state

EDIT: is not exactly what you want to do (I should read more exactly :slight_smile:)

3

I think you could use the sun.sun sensor


Create two themes e.g. my_light_theme and my_dark_theme, where you should set at least the parameters (not sure) primary-background-color and secondary-background-color and paper-card-background-color

Afterwards create an automation based on sun state and execute the service frontend.set_theme
e.g. for sunrise:

- id: 'set theme sun up'
  alias: sunrise
  trigger:
  - entity_id: sun.sun
    platform: state
    to: 'above_horizon'
  action:
  - data:
      name: my_light_theme
    service: frontend.set_theme

Here is my setup for a simple light dark theme:

dark:
  primary-color: "#36454F"
  paper-item-icon-color: "#151a1e"
  secondary-background-color: "#d2d9e0"
  paper-card-background-color: "#f0f2f5"
  #ha-label-badge-color: "#36454F"
  label-badge-red: "#36454F"
  label-badge-blue: "#878f99"
  paper-item-icon-active-color: "#feb236"
4

this doesn’t work in lovelace theme!

5

I am using Lovelace and I am not sure where to add themes? Does Lovelace support themes?