First create wallpapers for the following weather types:
clear-day, clear-night, rain, snow, sleet, wind, fog, cloudy, partly-cloudy-day, or partly-cloudy-night, hail, thunderstorm, or tornado
put them in \www\wallpapers
Put this in your configuration.yaml:
frontend: !include frontend.yaml
Create frontend.yaml in the root of your HA with this code:
themes:
clear-day:
lovelace-background: center / cover no-repeat url("/local/wallpapers/clear-day.jpg") fixed
clear-night:
lovelace-background: center / cover no-repeat url("/local/wallpapers/clear-night.jpg") fixed
cloudy:
lovelace-background: center / cover no-repeat url("/local/wallpapers/cloudy.jpg") fixed
fleet:
lovelace-background: center / cover no-repeat url("/local/wallpapers/fleet.jpg") fixed
fog:
lovelace-background: center / cover no-repeat url("/local/wallpapers/fog.jpg") fixed
hail:
lovelace-background: center / cover no-repeat url("/local/wallpapers/hail.jpg") fixed
partly-cloudy-day:
lovelace-background: center / cover no-repeat url("/local/wallpapers/partly-cloudy-day.jpg") fixed
partly-cloudy-night:
lovelace-background: center / cover no-repeat url("/local/wallpapers/partly-cloudy-night.jpg") fixed
rain:
lovelace-background: center / cover no-repeat url("/local/wallpapers/rain.jpg") fixed
snow:
lovelace-background: center / cover no-repeat url("/local/wallpapers/snow.jpg") fixed
wind:
lovelace-background: center / cover no-repeat url("/local/wallpapers/wind.jpg") fixed
Now create the following automations:
- id: homeassistant_startup
alias: home assistant startup
trigger:
- event: start
platform: homeassistant
action:
- service: script.weather_change
and
- id: 'weather_change'
alias: weather_change
trigger:
- entity_id: sensor.darksky_api_icon
platform: state
action:
- service: script.weather_change
create the script weather_change:
weather_change:
alias: weather_change
sequence:
- data_template:
service: frontend.set_theme
name: >
{% if is_state ('sensor.darksky_api_icon','clear-day')%}
clear-day
{% elif is_state ('sensor.darksky_api_icon','clear-night')%}
clear-night
{% elif is_state ('sensor.darksky_api_icon','rain') %}
rain
{% elif is_state ('sensor.darksky_api_icon','snow')%}
snow
{% elif is_state ('sensor.darksky_api_icon','sleet')%}
sleet
{% elif is_state ('sensor.darksky_api_icon','wind') %}
wind
{% elif is_state ('sensor.darksky_api_icon','fog') %}
fog
{% elif is_state ('sensor.darksky_api_icon','cloudy') %}
cloudy
{% elif is_state ('sensor.darksky_api_icon','partly-cloudy-day')%}
partly-cloudy-day
{% elif is_state ('sensor.darksky_api_icon','partly-cloudy-night')%}
partly-cloudy-night
{% elif is_state ('sensor.darksky_api_icon','hail')%}
hail
{% elif is_state ('sensor.darksky_api_icon','thunderstorm')%}\
thunderstorm
{% elif is_state ('sensor.darksky_api_icon','tornado')%}
tornado
{% endif %}
- service: frontend.reload_themes
This background for your lovelace frontend will now be the weather in it’s current state
To get the transparant card background I have used Card-mod:
note:
this will set the background for all your lovelace views.
If you want a view to have an independant background. Make an extra particular theme for that view in your frontend.yaml. Add this to your lovelace view:
theme: example