MagicMirror² DocsMagicMirror² Docs
Donate
Discord
Forum
GitHub
Donate
Discord
Forum
GitHub
  • Getting Started

    • Introduction
    • Requirements
    • Installation & Usage
    • Upgrade Guide
  • Configuration

    • Introduction
    • Autostart your MagicMirror²
    • Raspberry Specific
  • Modules

    • Introduction
    • Module Configuration
    • Default Modules

      • Alert
      • Calendar
      • Clock
      • Compliments
      • Hello World
      • News Feed
      • Update Notification
      • Weather Module
    • Animation Guide
  • Module Development

    • Introduction
    • The Core module file
    • The Node Helper
    • MagicMirror Helper Methods
    • Logger
    • Notifications
    • Weather Module Weather Provider Development
    • How to write good documentation
  • About

    • MagicMirror² Manifesto
    • Contributing Guidelines
    • Donate
    • Support
    • License

Custom CSS

MagicMirror² comes with a default theme but it can be customized by placing a custom css-file in css/custom.css.

Example

One common request is to make the weather icons colorful, this can easily be achieved in the custom css, this makes the sunny weather icon yellow:

.wi-day-sunny {
  color: #ffff00;
}

MagicMirror² uses these weather icons: https://erikflowers.github.io/weather-icons/. On that page you can find what class name is used for the displayed icon and add it to your custom.css-file like in the example above.

Target a specific module

Each module has a class set for the div it resides in named after the module (including all the 3rd-party modules). As an example the Clock-module could be customized by using the class .clock.

Help

For questions and inspiration visit the forum category dedicated to this.

Help us improve this page!
Last Updated:: 4/30/25, 8:00 PM