The Most Stylish Magic Mirror Themes for Your Home

Discover the top magic mirror themes like WallberryTheme and MirrorDashboard. Install, customize with CSS, and elevate your smart home mirror today!

Written by: Beatriz Nunes

Published on: March 31, 2026

Why Magic Mirror Themes Transform Your Smart Home Display

Magic mirror themes are visual styles and module configurations that change how your MagicMirror² smart display looks and feels. Here are the most popular options to get you started:

  • WallberryTheme – Dynamic Unsplash photo backgrounds with auto-dimming and weather/clock companions
  • MirrorDashboard – Clean quadrant layout with Google Calendar, Fit, and Tasks integration
  • Default MagicMirror² styles – Minimal black background, transparent modules, white text
  • Custom CSS themes – Hand-crafted looks using custom.css for full control over colors, icons, and layouts
  • Multi-page themed setups – Organized module “pages” using MMM-pages or MMM-Carousel for rotating displays

MagicMirror² is an open-source smart mirror platform built on a modular architecture. That means your display is made up of individual modules — clock, weather, calendar, news — each of which can be styled independently.

The problem most DIYers run into? The default look is pretty bare. A plain black background with white text works, but it’s a long way from the sleek, modern smart display you probably had in mind.

That’s where themes come in.

A good theme does more than change colors. It controls font choices, background images, icon styles, module transparency, and even how readable your text stays when a bright photo is behind it. With over 310 contributors to the MagicMirror² core and a thriving community building third-party modules, there’s no shortage of ways to make your mirror look exactly how you want.

Diagram showing relationship between MagicMirror² modules, config.js, and CSS theme layers - magic mirror themes infographic

Top Magic Mirror Themes for a Modern Look

When we talk about magic mirror themes, we aren’t just talking about a single file you click to “install.” Because MagicMirror² is modular, a “theme” is often a collection of CSS rules, background modules, and specific font choices that work together to create a cohesive aesthetic.

Whether you want a mirror that looks like a high-end art piece or a data-heavy cockpit for your morning routine, there is a community-built solution waiting for you. Let’s look at the heavy hitters that have defined the visual landscape of smart mirrors.

A modern living room featuring a smart mirror running WallberryTheme with a high-resolution nature background - magic mirror

WallberryTheme: The Ultimate Photo-Box Magic Mirror Themes

If you want your mirror to look like a professional digital art frame, the WallberryTheme repository is the gold standard. It has earned 96 stars and 19 forks on GitHub for a reason: it completely reimagines the MagicMirror² interface.

Instead of the classic “floating text on black” look, WallberryTheme pulls high-quality photography from the Unsplash API to create a “photo-box” effect. It’s perfect for those who want their mirror to be a piece of decor when they aren’t actively checking the news.

One of the cleverest things about this theme is how it handles text readability. We’ve all tried putting white text over a bright photo only to find it’s impossible to read. WallberryTheme uses “auto-dimming” and “background fade” gradients. If an image is too bright, the system automatically lowers the opacity or adds a soft dark gradient to the top and bottom regions where your modules live.

It also comes with its own “companion modules” like WB-clock and WB-weather, which are styled specifically to match the thin, elegant fonts of the theme. If you’re interested in diving deeper into how to tweak these visual elements, check out our guide on how to customize-magicmirror-ui/.

Functional Magic Mirror Themes for Productivity

While some people want art, others want an information hub. This is where the MirrorDashboard repository shines. It’s designed as a “quadrant UI,” meaning the screen is divided into four clean sections.

MirrorDashboard is heavily integrated with the Google ecosystem. It’s the go-to choice if your life runs on:

  • Google Calendar (to see your daily schedule at a glance)
  • Google Fit (using beautiful donut charts to track your fitness goals)
  • Google Tasks (to keep your to-do list front and center)

This theme is particularly popular for desk displays. In fact, some users have built elaborate “Mirror Desk Displays” that use 10 different themed pages and over 20 modules. By using a module like MMM-pages, you can swipe between a “Work Mode” page and a “Health Mode” page. You can find more inspiration for these complex setups in our article on customize-magicmirror-ui-2/.

Another notable mention is Kuvastin, a project developed by Finnish students. It’s a great example of a theme built for a specific hardware setup, including motion sensors that wake the mirror up when you walk into the room. You can explore their work at the heikkima/kuvastin repository.

How to Install and Configure Custom Themes

Installing magic mirror themes usually involves a bit of command-line magic. Don’t worry, though—we’ll walk you through it. Most themes are hosted on GitHub, and you’ll need a Raspberry Pi (or similar computer) running the magicmirror v2.34.0 software.

  1. Navigate to your modules folder: Open your terminal and type cd ~/MagicMirror/modules.
  2. Clone the repository: Use the git clone command followed by the URL of the theme. For example: git clone https://github.com/delightedCrow/WallberryTheme.
  3. Install dependencies: Move into the new folder (cd WallberryTheme) and run npm install.
  4. Edit your config file: This is the most important step. You need to tell MagicMirror² to use the new theme by adding it to config/config.js.

If you’re new to the coding side of things, our magic-mirror-coding-guide/ is a lifesaver for understanding the syntax of these configuration files.

Setting Up API Keys and Companion Modules

Most high-end themes require “keys” to talk to the internet. For example, WallberryTheme needs an Unsplash API key to fetch those gorgeous photos.

  • Unsplash: Go to the Unsplash Developer portal to get a free key. Free accounts are usually limited to 50 requests per hour—plenty for a home mirror!
  • Weather Data: Many themes use OpenWeatherMap or AccuWeather. For modules like MMM-AccuWeatherForecastDeluxe, you’ll need a “Location Key.” You can find this by using their search API with your city name.

The free tier of AccuWeather often limits you to 50 requests per day. To avoid hitting this limit, we recommend setting your updateInterval to at least 10 minutes. If you have multiple weather modules, use the listenerOnly setting so only one module actually calls the API, and the others just “listen” for the data.

Advanced CSS Customization for Your Mirror

Sometimes, a pre-made theme gets you 90% of the way there, but you want to change the color of the clock or make the weather icons bigger. This is where custom.css comes in. This file acts as an “override” sheet. Whatever you put in here will take priority over the default styles.

One of the most common requests is changing the background. While MagicMirror² defaults to black (to make the mirror effect work), some users building “dashboards” prefer a white background. This requires you to adjust module transparency, as most user-developed modules are designed to sit on black.

For more advanced styling tips, we have a dedicated guide on customize-magicmirror-ui-3/.

Differentiating Weather Displays with CSS Classes

A pro tip for magic mirror themes is to use specific CSS classes to differentiate your modules. For example, if you have two weather modules—one for “Current Weather” and one for “Forecast”—they might look identical by default.

In your config.js, you can add a custom class:

{
  module: "weather",
  position: "top_right",
  classes: "weather_current", // This is your secret weapon
  config: { ... }
}

Now, in your custom.css, you can target that specific module:

  • .weather_current .wi { font-size: 50px; } (Makes current weather icons huge)
  • .weather_forecast .wi { font-size: 20px; } (Keeps the forecast icons small and tidy)

Using relative URLs for your icons (like /css/icons/sunny.png) is also a best practice. It ensures that if you move your MagicMirror folder or update the software, your icons don’t suddenly disappear. You can see how others handle these paths in the heikkima/kuvastin repository.

Frequently Asked Questions about Magic Mirror Themes

Where can I find more 3rd-party magic mirror themes?

The best place to start is the official MagicMirror² GitHub wiki, which lists hundreds of community-contributed modules. You should also join the MagicMirror forum and the Discord community. These are great places to see “Show Your Mirror” threads where users share their custom.css configurations.

If you want a solid starting point for a modular setup, take a look at the Methodical101/MV-MagicMirror repository, which is a popular fork maintained by the community.

How do I fix broken weather icons in my theme?

Broken icons are usually caused by one of three things:

  1. Incorrect Paths: Ensure your CSS is pointing to the right folder. Use relative paths!
  2. CSS Specificity: If your changes aren’t showing up, your CSS might not be “strong” enough. Instead of using !important (which is a bit of a “nuclear option”), try using more specific classes like .region.top.right .weather .wi.
  3. API Issues: If the icons are missing entirely, check your terminal for “401 Unauthorized” errors, which means your API key is invalid or expired.

Pro tip: Use the “Dev Tools” by running npm start dev. This opens a browser-like inspector where you can click on an icon and see exactly which CSS rule is hiding it.

What hardware works best with high-resolution themes?

While the original MagicMirror could run on a Raspberry Pi Zero, modern magic mirror themes like WallberryTheme are quite “heavy” because of the high-res images and transitions.

  • Raspberry Pi 4 (4GB or 8GB): This is our top recommendation. It handles the Electron wrapper and CSS animations smoothly.
  • Display: Use an LED display for the best contrast through the mirror glass.
  • Touch Screens: If you’re using MirrorDashboard, a 10.1″ touch screen allows you to actually interact with your Google Tasks.
  • Sensors: Consider adding an Arduino with an infrared distance sensor to turn the monitor off when no one is in the room. This saves power and extends the life of your screen!

Conclusion

Building a smart mirror is a journey of personal expression. Whether you choose the artistic flair of WallberryTheme or the productivity-focused layout of MirrorDashboard, the right magic mirror themes turn a simple DIY project into a centerpiece of your smart home.

The MagicMirror² community is one of the most creative and helpful in the tech world. Don’t be afraid to experiment with your own custom.css or try out a new module from a GitHub repository. If you’re looking for more advice on the physical build, such as which glass to buy or how to mount your display, visit our category page for More info about hardware setups.

Happy building, and may your mirror always reflect your best self (and the weather)!

Previous

Secure your heaviest glass with heavy duty mirror clips

Next

The Ultimate Guide to Fog Prevention Mirror Fan Installation