How To: Add colors to Forecast.io icons

FlatPepsi

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;
}

Mykle1

@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.