MagicMirror² v2.7.0 is available! For more information about this release, check out this topic.

First MagicMirror


  • Project Sponsor Module Developer

    @flodus thanks for the comments, sorry for the wait in reply 🙂

    I’m using the Weather Icons class names for the DarkSky API (formerly Forecast.io), so you can add a CSS color rule for each of these icon classes (this listed taken from the API here):

    wi-forecast-io-clear-day: day-sunny
    wi-forecast-io-clear-night: night-clear
    wi-forecast-io-rain: rain
    wi-forecast-io-snow: snow
    wi-forecast-io-sleet: sleet
    wi-forecast-io-wind: strong-wind
    wi-forecast-io-fog: fog
    wi-forecast-io-cloudy: cloudy
    wi-forecast-io-partly-cloudy-day: day-cloudy
    wi-forecast-io-partly-cloudy-night: night-cloudy
    wi-forecast-io-hail: hail
    wi-forecast-io-thunderstorm: thunderstorm
    wi-forecast-io-tornado: tornado
    

    So for example, if you wanted to change the sunny day icon color you would add the following rule to your custom.css file:

    .wi-forecast-io-clear-day {
      color: #ffff00;
    }
    

    If you want to target the forecast sunny day icon specifically you would add .forecast before the icon class name like this:

    .forecast .wi-forecast-io-clear-day {
      color: #ffff00;
    }
    

    And if you want to target the current day’s sunny day icon specifically you would add .current__temperature before the icon class name like this:

    .current__temperature .wi-forecast-io-clear-day {
      color: #ffff00;
    }
    

    Hope this helps!



  • This is really nice…


  • Project Sponsor Module Developer

    @WILLIAM_WANDIE Thanks a ton 😃