Custom Dark Sky Animated Weather Card

Also have the same problem and can’t find a solution?

  1. I made the changes to the .js suggested above, i.e.

    const getUnit = function (measure) {
    const lengthUnit = hass.config.unit_system.length;
    switch (measure) {
    case ‘air_pressure’:
    return lengthUnit === ‘km’ ? ‘hPa’ : ‘inHg’;
    case ‘length’:
    return lengthUnit;
    case ‘precipitation’:
    return lengthUnit === ‘km’ ? ‘mm’ : ‘in’;
    return hass.config.unit_system[measure] || ‘’;

  2. I increased the version number in ui-lovelace.yaml.

  3. I took away all history/cookies related to home assistant.

This was enough to solve the problem in Safari on Mac, iPhone and iPad.

after a update i receive this error: Uncaught TypeError: Cannot read property 'unit_system' of undefined

anybody have a idea?

make the change from:

and update the version im lovelace.yaml
now it’s work, thx!

Hi all,

I’ve been trying to get this card work but seams that is a quite difficult.
I already created all files like in the tutorial:


.forecast {
  width: 100%;
  margin: 0 auto;
  height: 10em;


class DarkSkyWeatherCard extends HTMLElement {
  set hass(hass) {
if (!this.content) {
  const card = document.createElement('ha-card');
  const link = document.createElement('link');
  link.type = 'text/css';
  link.rel = 'stylesheet';
  link.href = '/local/custom_ui/dark-sky-weather-card.css';
  this.content = document.createElement('div');
  this.content.className = 'card';

const getUnit = function(measure) {
  const lengthUnit = hass.config.core.unit_system.length;
  switch (measure) {
    case 'air_pressure':
      return lengthUnit === 'km' ? 'hPa' : 'mbar';
    case 'length':
      return lengthUnit;
    case 'precipitation':
      return lengthUnit === 'km' ? 'mm' : 'in';
      return hass.config.core.unit_system[measure] || '';

const transformDayNight = {
  "below_horizon": "night",
  "above_horizon": "day",
const sunLocation = transformDayNight[hass.states[this.config.entity_sun].state];
const weatherIcons = {
  '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': `cloudy-${sunLocation}-3`,
  'exceptional': '!!',

const windDirections = [

var forecastDate1 = new Date();
forecastDate1.setDate(forecastDate1.getDate() + 1);
var forecastDate2 = new Date();
forecastDate2.setDate(forecastDate2.getDate() + 2);
var forecastDate3 = new Date();
forecastDate3.setDate(forecastDate3.getDate() + 3);
var forecastDate4 = new Date();
forecastDate4.setDate(forecastDate4.getDate() + 4);
var forecastDate5 = new Date();
forecastDate5.setDate(forecastDate5.getDate() + 5);

const currentConditions = hass.states[this.config.entity_current_conditions].state;
const humidity = hass.states[this.config.entity_humidity].state;
const pressure = Math.round(hass.states[this.config.entity_pressure].state);
const temperature = Math.round(hass.states[this.config.entity_temperature].state);
const visibility = hass.states[this.config.entity_visibility].state;
const windBearing = windDirections[(Math.round((hass.states[this.config.entity_wind_bearing].state / 360) * 16))];
const windSpeed = Math.round(hass.states[this.config.entity_wind_speed].state);
const forecast1 = {
  date: forecastDate1,
  condition: this.config.entity_forecast_icon_1,
  temphigh: this.config.entity_forecast_high_temp_1,
  templow: this.config.entity_forecast_low_temp_1,
const forecast2 = {
  date: forecastDate2,
  condition: this.config.entity_forecast_icon_2,
  temphigh: this.config.entity_forecast_high_temp_2,
  templow: this.config.entity_forecast_low_temp_2,
const forecast3 = {
  date: forecastDate3,
  condition: this.config.entity_forecast_icon_3,
  temphigh: this.config.entity_forecast_high_temp_3,
  templow: this.config.entity_forecast_low_temp_3,
const forecast4 = {
  date: forecastDate4,
  condition: this.config.entity_forecast_icon_4,
  temphigh: this.config.entity_forecast_high_temp_4,
  templow: this.config.entity_forecast_low_temp_4,
const forecast5 = {
  date: forecastDate5,
  condition: this.config.entity_forecast_icon_5,
  temphigh: this.config.entity_forecast_high_temp_5,
  templow: this.config.entity_forecast_low_temp_5,

const forecast = [forecast1, forecast2, forecast3, forecast4, forecast5];

this.content.innerHTML = `
  <span class="icon bigger" style="background: none, url(/local/icons/weather_icons/animated/${weatherIcons[currentConditions]}.svg) no-repeat; background-size: contain;">${currentConditions}</span>
  <span class="temp">${temperature}</span><span class="tempc"> ${getUnit('temperature')}</span>
    <ul class="variations right">
        <li><span class="ha-icon"><ha-icon icon="mdi:water-percent"></ha-icon></span>${humidity}<span class="unit"> %</span></li>
        <li><span class="ha-icon"><ha-icon icon="mdi:gauge"></ha-icon></span>${pressure}<span class="unit"> ${getUnit('air_pressure')}</span></li>
    <ul class="variations">
        <li><span class="ha-icon"><ha-icon icon="mdi:weather-windy"></ha-icon></span>${windBearing} ${windSpeed}<span class="unit"> ${getUnit('length')}/h</span></li>
        <li><span class="ha-icon"><ha-icon icon="mdi:weather-fog"></ha-icon></span>${visibility}<span class="unit"> ${getUnit('length')}</span></li>
  <div class="forecast clear">
      ${ => `
          <div class="day">
              <span class="dayname">${(' ')[0]}</span>
              <br><i class="icon" style="background: none, url(/local/icons/weather_icons/animated/${weatherIcons[hass.states[daily.condition].state]}.svg) no-repeat; background-size: contain;"></i>
              <br><span class="highTemp">${Math.round(hass.states[daily.temphigh].state)}${getUnit('temperature')}</span>
              <br><span class="lowTemp">${Math.round(hass.states[daily.templow].state)}${getUnit('temperature')}</span>

  setConfig(config) {
if (!config.entity_current_conditions ||
  !config.entity_humidity ||
  !config.entity_pressure ||
  !config.entity_temperature ||
  !config.entity_visibility ||
  !config.entity_wind_bearing ||
  !config.entity_wind_speed) {
  throw new Error('Please define entities');
this.config = config;

  // @TODO: This requires more intelligent logic
  getCardSize() {
return 3;

customElements.define('dark-sky-weather-card', DarkSkyWeatherCard);

ui-lovelace.yaml code:

  - url: /local/custom_ui/dark-sky-weather-card.js?v=5
type: js

title: Home

  - 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

sensors.yaml code

   platform: darksky
api_key: <MY_API_CODE>
  - 1
  - 2
  - 3
  - 4
  - 5
language: pt
  - icon
  - summary
  - nearest_storm_distance
  - nearest_storm_bearing
  - humidity
  - temperature
  - temperature_high
  - temperature_low
  - apparent_temperature
  - apparent_temperature_high
  - apparent_temperature_low
  - wind_speed
  - wind_bearing
  - precip_type
  - precip_probability
  - precip_accumulation
  - precip_intensity
  - precip_intensity_max
  - uv_index
  - daily_summary
  - pressure
  - visibility  
  minutes: 5 

After i restart HA appears like this:

Can any one help me pls?

You need to use the CSS from here: Custom animated weather card for Lovelace with the adjustment from the first post of this topic.

It looks like you are only using the CSS posted in this topic ?

Forget, just a noob problem.
I’m not using Lovelace…i must study more from how i can transform what i have now into new code for lovelace.
Just other question, can i have iframes without using lovelace? meaning, i want to include into my dashboard.


Sorry last reply, didn’t read without since I’m all into lovelace now

My problem is that it doesn’t show the icons. I have them under /local/www/weather_icons/animated

any help?


forget it, just noticed the “icons” that i didn’t have in my path!


I realize a lot of the dark sky sensors are not used in the card. Is there any reason not to remove those sensors if I do not intend to use them?

Go to and select the area, zoom and preferences of what you want as your initial view: capture that url. In your configuration.yaml put something like this into your frontend stuff:

    title: Radar
    icon: mdi:weather-cloudy

(the stuff at the end of the url is my own zooming, area and preferences… your results may vary)


I don’t have any problem, card is working fine. Great job.

I just have a quick question, is there any way to modify the language used to show the day of the forecast ?

Edit: Just found out i have blurry images on iOS, does anyone else have it ? From the app and Chrome.

1 Like

This looks like Darksky. If so, it’s not documented in the //darksky but is in the //darksky sensor… try adding the configuration variable “language: (your language code)” in your configuration.yaml

Unfortunately i already set the language option in my sensor, but it didn’t change anything.

Edit: Found my answer in another post, replaced

<span class="dayname">${(' ')[0]}</span>

<span class="dayname">${(new Date("fr-FR", {weekday: 'short'})).toString().split(' ')[0]}</span>


Hi my friend,
It’s working for you? i tried change to “pt-PT” but still in English…

Working fine for me :

Did you clear your cache ?

Yes i did. But wont change… I try with “fr-FR” but still the same.
This is parte of my dark-sky-weather-card.js:

  <div class="forecast clear">
      ${ => `
          <div class="day">
              <span class="dayname">${(new Date("fr-FR", {weekday: 'short'})).toString().split(' ')[0]}</span>
              <br><i class="icon" style="background: none, url(/local/icons/weather_icons/animated/${weatherIcons[hass.states[daily.condition].state]}.svg) no-repeat; background-size: contain;"></i>
              <br><span class="highTemp">${Math.round(hass.states[daily.temphigh].state)}${getUnit('temperature')}</span>
              <br><span class="lowTemp">${Math.round(hass.states[daily.templow].state)}${getUnit('temperature')}</span>

Did you reboot or incremented the version of your js file in the ressources ?

Thanks @Kaostral. I already did clear cache but on the pc in chrome it has not changed. but in chrome by iphone is already pt-pt


I have tried to get this dark sky weather card to work and i managed to get passed some errors but im stucked getting this error in home assistant lovelace gui:

Please define entities

“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”