Custom Dark Sky Animated Weather Card


See above for my adjustments for this problem



please note in the last card.js you use incorrect ticks around the line 217:

  'windy-variant': `cloudy-day-3`

and replace with:

'windy-variant': 'cloudy-day-3'


Thanks, now it looks great.


Well, As you say, it is the dark-sky-weather-card. It uses the value provided by dark-sky. As mentioned it works fine for me. if dark-sky is providing an incorrect value for you I would suggest trying to understand why that is happening.

Edit… Your other post got me thinking about this more… When you have his issue, what is the value from the dark-sky sensor. if it is windy-variant, it will always show cloudy-day. Let me think about how I can change that based on sun position.


when I posted yesterday night it was ‘cloudy’ and the icon showed a cloud with a sun…
in @finity post we can see a partly cloud night icon, while the condition shows Partly Cloudy. I think thats what I am trying to establish: based on the sun.sun or time show the available day/night icons that aren’t explicitly in the state.


cloudy maps to the cloudy icon which doesn’t show moon or sun (just shows clouds). The partly-cloudy-day or partly-cloudy-night states map to icons that show clouds and either a sun or moon. If you really had ‘cloudy’ as the state and you were showing an icon with clouds and sun showing, there is something wrong with your icons…

I have modified the code to correct the issue when windy-variant is the state. it should show the correct partly cloudy icon now. Note in the code below how the cloudy state links to the cloudy icon.

      'clear-day': 'day',
      'clear-night': 'night',
      'rain': 'rainy-5',
      'snow': 'snowy-6',
      'sleet': 'rainy-6',
      'wind': 'cloudy',
      'fog': 'cloudy',
      'cloudy': 'cloudy',
      'partly-cloudy-day': 'cloudy-day-3',
      'partly-cloudy-night': 'cloudy-night-3',
      'hail': 'rainy-7',
      'lightning': 'thunder',
      'thunderstorm': 'thunder',
      'windy-variant': html`cloudy-${this.dayOrNight}-3`,
      'exceptional': '!!'


I am getting this issue too, can you tell me what the suggested fix was? I cant see it in the thread. Thanks :slight_smile:



not sure what to say or look for, I have the exact same icons, only added rainy-night.svg. (can’t upload it here, svg not allowed) but here’s a screenshot:

But I’m not sure if this was for this card or for one of the other templates I use…
Any case, will see what happens after sunset today, rainy or clear :wink:

for now its alright:


Does anyone have an answer for this?

entity_daily_summary: sensor.dark_sky_daily_summary


thank you! :slightly_smiling_face:


HI Sir!

would you please consider adding the precipitation intensity to the daily forecast column:

entity_precip_intensity_1: sensor.dark_sky_forecast_precip_intensity_1
entity_precip_intensity_2: sensor.dark_sky_forecast_precip_intensity_2
entity_precip_intensity_3: sensor.dark_sky_forecast_precip_intensity_3
entity_precip_intensity_4: sensor.dark_sky_forecast_precip_intensity_4
entity_precip_intensity_5: sensor.dark_sky_forecast_precip_intensity_5

it might perfectly fill the leftover space with useful info?


@m.p.frankland is this a fix we need to make or are you going to update the card?


I am updating it… Actually changing it slightly to

'windy-variant': html`cloudy-${this.dayOrNight}-3`,

I don’t know that I have ever seen windy-variant passed by darksky but the way it is currently coded, it would map a cloudy day icon no matter whether it was day or night. This new method should map the correct icon for day or night. This is similar to the way it used to work several revisions ago. I changed it when I made entity_sun optional as the original forced entity_sun to be defined or you would get an error. This new version uses the dayOrNight getter that checks that entity_sun is defined and returns ‘day’ or ‘night’ based on sun position. If it is not defined it just returns ‘day’.

I have made the changes just working on testing it.


is sunset: true removed now? It’s not in the readme?

Also the seperator top margin is being ignored… it doesn’t matter what I use it stays the same


Yep… removed several versions ago…

See last line in the release notes posted for that version.


sorry - cross posted…

seperator margin is being ignored…


what does the line in your ui-lovelace for the flag look like ?


flag? I tried 5em - the default and 8em - no difference. It only seems to apply spacing if the show_separator is true.
I’d like that to be false but still be able to get a bit more room above the slots actually… I keep getting the text for the condition running into the temperature fiels when in landscape on my iPad if the condition is long like Partly Cloudy - that’s why I moved it up (one of the reasons) but I could put it under the icon if there was more room but I don’t like the line being displayed.