MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    How To: Add colors to Forecast.io icons

    Scheduled Pinned Locked Moved Troubleshooting
    2 Posts 2 Posters 3.1k Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • FlatPepsiF Offline
      FlatPepsi
      last edited by

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

      Mykle1M 1 Reply Last reply Reply Quote 3
      • Mykle1M Offline
        Mykle1 Project Sponsor Module Developer @FlatPepsi
        last edited by

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

        Create a working config
        How to add modules

        1 Reply Last reply Reply Quote 0
        • 1 / 1
        • First post
          Last post
        Enjoying MagicMirror? Please consider a donation!
        MagicMirror created by Michael Teeuw.
        Forum managed by Sam, technical setup by Karsten.
        This forum is using NodeBB as its core | Contributors
        Contact | Privacy Policy