DarkSky icon not visible in dark theme (how to set icon to current weather)

Tags: #<Tag:0x00007f7398a376a0>

Everyone,

I am trying to embed weather information next to the date as shown in the picture below using the darksky_summary sensor which works great although I cannot to find a way to change the icon color, can anybody point me in the right direction here?

I have googled and read all possible threads on how to use sensor templates but this does not seem to apply to this case, am I missing something?

Thanks in advance

Alright folks I came up with the following workaround hopefully someone will find it useful.

  1. Downloaded all the weather icons from mdi icon here (thanks Austin for making this available to the community) in .svg format and moved them to config/www/images folder. Also renamed the weather-sunny.svg icon to weather-clear-day.svg (as that is the nomenclature used by Dark Sky).

  2. Modified their fill color to white (as I have a dark background) with Inkscape.

  3. Created the following sensor template (in sensor.yaml, if you haven’t split the config.yaml file this code goes into config.yaml file):

# Dark Sky weather icon
  - platform: template
    sensors:
      weather_icon_template:
        friendly_name: 'weather icon'
        value_template: >
          {{states('sensor.dark_sky_icon')|capitalize|replace('-',' ')}}
        entity_picture_template: >-
          {{ '/local/images/' ~ 'weather-' ~ states('sensor.dark_sky_icon') ~ '.svg'}}
        entity_id:
        - sensor.dark_sky_icon
  1. Checked the config file to get the final all-clear.

  2. Restarted Home Assistant and added the following picture-elements card to my raw configurator:

type: picture-elements
aspect_ratio: 8%
elements:
  - entity: sensor.weather_icon_template
    style:
      left: 50%
      top: 50%
    type: state-icon
image: /local/images/Clock-bg.png

Result (the icon will change according to the Dark Sky icon):