Custom animated weather card for Lovelace


I rolled back to 0.77.1 and it’s working again!


I get Uncaught TypeError: Cannot read property ‘unit_system’ of undefined hassio.
It fails to find the custom weathercard and from what i can understand i have to change permissions. is there a solid guide how? I run my homeassistant on a synology nas


Are we forced to download the icons one by one? Can you create a zip file to make the download easier? And then the backgrounds where to save them and how to add more?


You can download it as a zip. Press clone or download on github and you will get a zip with the folders in it.


I fixed an issue where the css background-image on .card was changing all card backgrounds. created in icons folder on github.

To change background: upload to /www/pictures/
download new code for dark-sky-weather-card.js and dark-sky-weather-card.css on github site

in lovelace-ui.yaml under dark-sky-weather-card entity declarations add the following line - replace imagefile with filename ie: summer_day.jpg:

entity_background: imagefile


Yes, it works… thanks… When the ability to change automatically background depending from the season or day/night? And how to make the card bigger or not squared like in your screenshot?


Same error… did you find a fix?


Hi Guys, I’m getting this error and cant seem to figure out why, the Dark Sky platform is working fine, I’m using the latest css/js from the github (for dark_sky)


Here is my ui-lovelace.yaml

  - icon: mdi:weather-cloudy
id: weather
title: Weather
  - type: "custom:dark-sky-weather-card"
    entity_weather: weather.dark_sky
    entity_sun: sun.sun

Any ideas on how to fix?


Feature request: Anybody with the skill and knowledge to make this with the YR sensor/platform? I know it requires a re-write, but I’m not capable of doing it myself.



@KirovAir @samnup @Kristofferssson @sparkydave @arsaboo

It appears to be necessary to add localhost ( and/or ::1) to trusted_networks to read config entries in 0.77.3

I get the feeling this may change again…


He’s using the dark sky sensor instead of weather. I’d suggest following the steps over here on setting dark sky up: Custom Dark Sky Animated Weather Card


Hey there! Did anyone really solved blurring? I tried Mariusthvdb’s code, but did not succeed. After making copy of icons and changing js file I lost all small icons and only big one was pictured. And yes, I killed cookies and cache, that did not help. Where am I wrong? Will it be fixed in next update?
Thank you for great stuff.


I am very close to making it work. So far, it shows the card with all the numbers but wrong units, shows F instead of C ,miles instead of km etc. Also, it doesn’t show the icons. I have unziped the animated folder under www/icons/weather_icons/animated.

Units are fixed. So, now only problem are the icons. Any ideas?


just to be precise: ‘my code’ surely wasn’t mine, but more importantly, is used in non-lovelace setup.


Thanks, that did it for me, now I have another problem, I had blurred icons, so I tried one of the suggestions above (create another folder with the icons) but now I don’t have any icons showing up, any ideas.

Update. Never mind, I got it working, however the blurred icon only shows on Firefox, I tried Chrome and looks fine



Currently i did not solve any of the problems.
Tried everything, update HA, frontend: latest and es5, deleting browser history…
Still bumping on red errors in love lace and “calling system_log/write”.

Anyone has a solution for this?


Started getting this the other day for no apparent reason, have tried reloading weather component, restarting hass, downloaded the .js and .css again. No errors in the log :confounded: anyone else experiencing this/has a fix? 32


Had tha same issue.
i have discoverd thet the openweathermap caused an error (still dont know why) and this error prevented the
yweather component load correctly.
after i removed openweathermap from the Weather section everything came back to life.


First of all: thank you for the good work on the card.

After some struggling I finally succeeded in setting up your version of the dark-sky-weather-card (struggling because I overread to include the background image, and I kept getting warnings that I needed to define entities…)

Now the only Problem that remains is that the fonts are dark and so they become unreadable:

How can I adjust this ?

Here’s my ui-lovelace.yaml:

  - url: /local/custom_ui/dark-sky-weather-card.js
type: js

title: MyHome

  - title: Beispieltitel

id: BeispielID

background: radial-gradient(grey, skyblue)

#    theme: dark-mode

  - type: entities
    title: Entitiesbeispiel
    show_header_toggle: true
      - group.all_lights

  - icon: mdi:weather-cloudy
id: weather
title: Weather
#    garage_door_tilt_sensor_alarm_level: Weather
  - type: custom:dark-sky-weather-card
    entity_sun: sun.sun
    entity_daily_summary: sensor.dark_sky_daily_summary
    entity_current_conditions: sensor.dark_sky_icon  
    entity_humidity: sensor.dark_sky_humidity
    entity_pressure: sensor.dark_sky_pressure
    entity_temperature: sensor.dark_sky_temperature
    entity_visibility: sensor.dark_sky_visibility
    entity_wind_bearing: sensor.dark_sky_wind_bearing
    entity_wind_speed: sensor.dark_sky_wind_speed
    entity_forecast_high_temp_1: sensor.dark_sky_daytime_high_temperature_1
    entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2
    entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3
    entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4
    entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5
    entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature
    entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_1
    entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_2
    entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_3
    entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_4
    entity_forecast_icon_1: sensor.dark_sky_icon_1
    entity_forecast_icon_2: sensor.dark_sky_icon_2
    entity_forecast_icon_3: sensor.dark_sky_icon_3
    entity_forecast_icon_4: sensor.dark_sky_icon_4
    entity_forecast_icon_5: sensor.dark_sky_icon_5
    entity_background: Beach.jpg

Thanks for the help,


I had the same problem, and I solved it by adding:

to my entities.