How To: Add colors to Forecast.io icons



  • This took me a while, so I thought I’d share. Here’s how to add color to the weather icons on for MMM-forecast.io (darksky) module. The same concept applies to other weather modules- just change the module names below:

    Edit the file ~/MagicMirror/css/custom.css
    and add the following to the bottom:

    .MMM-forecast-io .wi-sunrise {
    color: #ffd700;
    }
    .MMM-forecast-io .wi-sunset {
    color: #ffa500;
    }
    .MMM-forecast-io .wi-day-sunny {
    color: #ffff00;
    }
    .MMM-forecast-io .wi-night-showers {
    color: #55acee;
    }
    .MMM-forecast-io .wi-degrees {
    color: #415;
    }
    .MMM-forecast-io .wi-rain {
    color: #55acee;
    }
    .MMM-forecast-io .wi-showers {
    color: #55acee;
    }
    .MMM-forecast-io .wi-night-showers {
    color: #55acee;
    }
    .MMM-forecast-io .wi-night-alt-cloudy-windy {
    color: #aaa;
    }
    .MMM-forecast-io .wi-night-cloudy {
    color: #aaa;
    }
    .MMM-forecast-io .wi-cloudy {
    color: #aaa;
    }
    .MMM-forecast-io .wi-day-cloudy {
    color: #aaa;
    }
    .MMM-forecast-io .wi-cloudy {
    color: #aaa;
    }
    .MMM-forecast-io .wi-cloudy-windy {
    color: #aaa;
    }
    .MMM-forecast-io .wi-showers {
    color: #55acee;
    }
    .MMM-forecast-io .wi-thunderstorm {
    color: #ff00ff;
    }
    .MMM-forecast-io .wi-snow {
    color: #fff;
    }
    .MMM-forecast-io .wi-fog {
    color: #999;
    }
    .MMM-forecast-io .wi-night-clear {
    color: #fff;
    }
    .MMM-forecast-io .wi-night-rain {
    color: #55acee;
    }
    .MMM-forecast-io .wi-night-thunderstorm {
    color: #ff00ff;
    }
    .MMM-forecast-io .wi-night-snow {
    color: #fff;
    }

    .MMM-forecast-io .wi-sunrise {
    color: #ffd700;
    }
    .MMM-forecast-io .wi-sunset {
    color: #ffa500;
    }
    .MMM-forecast-io .wi-day-sunny {
    color: #ffff00;
    }
    .MMM-forecast-io .wi-night-showers {
    color: #55acee;
    }
    .MMM-forecast-io .wi-degrees {
    color: #415;
    }
    .MMM-forecast-io .wi-rain {
    color: #55acee;
    }
    .MMM-forecast-io .wi-showers {
    color: #55acee;
    }
    .MMM-forecast-io .wi-night-showers {
    color: #55acee;
    }
    .MMM-forecast-io .wi-night-alt-cloudy-windy {
    color: #aaa;
    }
    .MMM-forecast-io .wi-night-cloudy {
    color: #aaa;
    }
    .MMM-forecast-io .wi-cloudy {
    color: #aaa;
    }
    .MMM-forecast-io .wi-day-cloudy {
    color: #aaa;
    }
    .MMM-forecast-io .wi-cloudy {
    color: #aaa;
    }
    .MMM-forecast-io .wi-cloudy-windy {
    color: #aaa;
    }
    .MMM-forecast-io .wi-showers {
    color: #55acee;
    }
    .MMM-forecast-io .wi-thunderstorm {
    color: #ff00ff;
    }
    .MMM-forecast-io .wi-snow {
    color: #fff;
    }
    .MMM-forecast-io .wi-fog {
    color: #999;
    }
    .MMM-forecast-io .wi-night-clear {
    color: #fff;
    }
    .MMM-forecast-io .wi-night-rain {
    color: #55acee;
    }
    .MMM-forecast-io .wi-night-thunderstorm {
    color: #ff00ff;
    }
    .MMM-forecast-io .wi-night-snow {
    color: #fff;
    }


  • Module Developer

    @FlatPepsi

    That’s very nice of you, although I use WunderGround weather. I’m sure someone will thank you. I will simply applaud your kindness and generosity. :clap_tone2:


Log in to reply
 

Looks like your connection to MagicMirror Forum was lost, please wait while we try to reconnect.