Dim the Glow by Configuring Smart Mirror Dark Mode

Why Your Smart Mirror Needs a Dark Mode at Night

Configure smart mirror dark mode to stop your display from flooding the room with harsh light when you’re trying to wind down at night.

Here’s a quick overview of how to do it:

MagicMirror² users – Install MMM-AutoDimmer or MMM-CSSswitch to schedule automatic dimming or theme switching by time of day
Home Assistant users – Set up a dark theme dashboard in kiosk mode using the HACS Kiosk Mode addon
evancohen/smart-mirror users – Use the built-in AutoTimer to put the display to sleep on a schedule
All platforms – Create a pitch-black “sleep” page to maximize mirror reflectivity when the display is idle

Smart mirrors are great — until 2 a.m., when yours is lighting up the bedroom like a lamp.

One DIY builder described going “down a rabbit hole” looking for ways to use a Home Assistant dashboard on a bathroom mirror, only to realize the display itself becomes a problem at night. It’s a common experience. You build the mirror, love it during the day, then immediately want to dim or kill it after dark.

There’s a practical reason beyond comfort, too. Mirror glass only transmits 30–40% of the light from your display. That means dark themes and subtle shadows get swallowed up — but a fully black screen actually improves reflectivity, turning your smart mirror back into a real mirror when you don’t need the info on screen.

The good news: whether you’re running MagicMirror², Home Assistant, or another platform, there are solid, well-tested ways to automate this — no advanced coding required.

Why You Should Configure Smart Mirror Dark Mode

When we build our first smart mirror, we usually aim for maximum “wow” factor. We want bright weather icons, scrolling news feeds, and vibrant colors. But once the mirror is hanging on the wall, the reality of light pollution sets in.

If your mirror is in a bedroom, a bright white interface can disrupt your circadian rhythm. Even in a bathroom, a glaring screen first thing in the morning or late at night is less than ideal. We need to configure smart mirror dark mode not just for aesthetics, but for functionality.

The community has spent a lot of time discussing this. On the MagicMirror forums, threads about time-based CSS layout changes have garnered thousands of views, proving that we aren’t alone in wanting a more subtle nighttime experience. You can read more about the community discussion here: Is it possible to change the CSS layout at a certain time? (Dark Mode) | MagicMirror Forum.

For those of us looking to dive deeper into the visual side of things, we have a great resource on More info about UI customization that covers the basics of making your mirror look exactly how you want.

Impact of Mirror Glass on Dark Themes

One thing we often forget is the physics of the mirror itself. Most two-way mirrors work on a light-ratio principle. If the screen behind the glass is bright, the light passes through. If the screen is black, the glass acts like a standard mirror.

However, “dark mode” in the traditional sense (using dark grays or subtle shadows) often fails behind mirror glass. Because mirror glass “eats” about 60–70% of the light transmission, subtle Material UI shadows and dark gray boxes often disappear entirely or look like muddy smudges.

This is why high contrast is king. For a smart mirror, “Dark Mode” usually means a true black background (#000000) with high-contrast white or light gray text. Some developers have experimented with custom displays to combat this, such as the GitHub – DrewJohnsonGT/mirror: Fully custom Smart Mirror display project, which uses public APIs to create a high-visibility dynamic display.

Benefits for Bedroom and Bathroom Installs

Installing a mirror in a bedroom brings specific challenges. An iPad 2 used as a mirror display, for example, can emit enough light to illuminate an entire room at night even on low brightness. This “light leak” is a common complaint in the community.

By implementing a scheduled dark mode, we achieve several goals:

Reduced Eye Strain: No more being blinded by the weather forecast at 11 p.m.
Energy Savings: While LCDs still use backlighting, dimming the pixels or using a black screen can reduce overall power draw slightly, and for OLED screens, it significantly increases longevity.
Better Reflectivity: A black screen makes the mirror more functional as a… well, a mirror!

If you’re interested in more advanced ways to tweak your mirror’s appearance, check out our guide on More info about advanced UI tweaks.

Step-by-Step Guide to Configure Smart Mirror Dark Mode

Ready to get your hands dirty? Most smart mirror setups run on a Raspberry Pi using the MagicMirror² framework. To configure smart mirror dark mode, we primarily work with two files: config.js and custom.css.

Before you start, make sure you’re comfortable using the terminal. If you need a refresher on the coding side, we have a More info about Magic Mirror coding guide that will walk you through the basics.

Using MMM-CSSswitch to Configure Smart Mirror Dark Mode

One of the most elegant ways to handle theme switching is the MMM-CSSswitch module. Created by community member Piranha1605, this module allows you to swap between a “Bright UI” and a “Dark UI” based on a schedule.

Install the module: Navigate to your modules folder and clone the repository.
Configure the schedule: In your config.js, you define when the “dark” CSS should take over.
Define your styles: In your custom.css, you create classes for .bright and .dark.

This is much cleaner than manually editing files every day. It allows for a smooth transition where the mirror stays on but changes its “skin” to match the ambient light of the room. For more on how to structure these layouts, visit More info about UI layouts.

Manual CSS Swapping via Cron Jobs

If you prefer a “hackier” but very functional approach, you can use a Linux cron job to rename your CSS files.

We can write a simple bash script that:

Renames custom.css to bright.css.
Renames dark.css to custom.css.
Triggers a mirror restart or a page reload.

While not as “elegant” as a dedicated module, it’s a great learning opportunity for those new to Raspberry Pi. You can find more details on how to manage these system-level changes in the guide for Configuring the Raspberry Pi | Mirror.

Automating Nighttime Dimming with MMM-AutoDimmer

Sometimes, we don’t want to change the theme; we just want to turn down the “volume” of the light. This is where MMM-AutoDimmer comes in. This module (a popular fork with dozens of stars on GitHub) allows you to dim the entire screen on a schedule.

You can find the source code and installation instructions here: GitHub – Fifteen15Studios/MMM-AutoDimmer: Magic Mirror Module to dim the screen on a schedule.

Setting Up Scheduled Dimming Cycles

The beauty of MMM-AutoDimmer is its flexibility. You don’t just get an “on/off” switch; you get a schedule.

maxDim: This setting determines how dark the screen gets (0 is fully visible, 1 is fully black).
Schedules: You can set different dimming levels for weekdays versus weekends. For example, maybe you want the mirror bright until 11 p.m. on Fridays but dimmed by 9 p.m. on Mondays.
Transition Duration: The module can slowly fade the brightness over 10 minutes so you don’t even notice the change happening.

To make this work, you’ll need to add the module to your config.js file. If you’re new to working with JavaScript in this context, our More info about JavaScript setup is a perfect starting point.

Triggering Dark Mode via Notifications

For the advanced users among us, we can trigger dark mode based on events in our smart home.

By using modules like MMM-Remote or MMM-SleepWake, we can send a notification to the mirror. Imagine this: you turn on your TV in the living room, and your smart mirror in the hallway automatically dims so it doesn’t distract you. Or, when your “Home” status changes to “Night” in your automation hub, the mirror switches to its black sleep page.

This level of integration is what makes a mirror truly “smart.” You can learn more about handling these secondary configurations at More info about secondary JS configurations.

Integrating Home Assistant for a Dark Mode Dashboard

Many of us are moving away from standalone MagicMirror setups and toward Home Assistant (HA) integrations. This allows us to use one unified software stack for our whole home.

Using Home Assistant to configure smart mirror dark mode is actually quite straightforward because HA has built-in theme support.

Feature	MagicMirror² Modules	Home Assistant Kiosk Mode
Theme Switching	Requires CSS modules	Built-in Theme Picker
Automation	Cron jobs / Node helpers	Native HA Automations
Layout Control	`custom.css`	Drag-and-drop Dashboards
Ease of Use	Moderate (Coding required)	Easy (UI-based)

To get started with the official smart mirror documentation, check out Configure the smart-mirror | Smart Mirror Documentation.

Creating a Dedicated Nighttime Dashboard

One pro tip for HA users: don’t just dim your main dashboard. Create a second dashboard specifically for nighttime.

Markdown Cards: Use these for large, simple text (like just the time and the next morning’s alarm).
Conditional Visibility: Set cards to only appear if it’s after sunset.
Pitch Black Page: Create a view with no cards at all. When this view is active, the mirror becomes 100% reflective.

This setup requires some Pi-level configuration to ensure the browser stays in kiosk mode. See Configure the Pi | Smart Mirror Documentation for the exact steps to hide the mouse cursor and disable the screensaver.

Automating Brightness with PIR Sensors

The ultimate “dark mode” is a screen that is off until you need it. By wiring a PIR (Passive Infrared) motion sensor to the Raspberry Pi’s GPIO pins, we can trigger the monitor to wake up only when someone is standing in front of it.

We use scripts like monitor_on_off to send xset commands to the display. This ensures that at 3 a.m., the mirror is a dark, silent piece of glass—but if you walk up to it for a glass of water, it gently wakes up to show you the time.

Advanced Hardware Tweaks for Low-Light Performance

Hardware matters just as much as software. If you’re struggling with light leakage, it might be time to look at your Pi’s configuration.

For instance, rotating your monitor can sometimes affect how the backlight bleeds through the edges of the mirror. You can adjust this in your /boot/config.txt file using display_rotate. More hardware-specific tips can be found at Configure the smart-mirror | Smart Mirror Documentation.

Troubleshooting Your Configure Smart Mirror Dark Mode Setup

If you’ve followed the steps but your mirror isn’t dimming, here are a few things to check:

PM2 Logs: If you use PM2 to manage your mirror, check pm2 logs to see if a module is crashing the system.
Graphics Drivers: On newer Raspberry Pi OS versions, the “Full KMS” driver can sometimes interfere with older dimming scripts. You may need to switch to “Fake KMS” in raspi-config.
HDMI Rotation: Ensure your rotation settings in config.txt match your CSS layout, or your “dark mode” might only cover half the screen!

Optimizing Reflectivity with Black ‘Sleep’ Pages

If you are using an older device, like an iPad 2, as your mirror’s screen, you might find that even a “black” screen still glows slightly due to the backlight.

In this case, the best “dark mode” is a dedicated page module that hides all elements. Some users have found success using the MMM-Remote module to remotely trigger a “Hide All” command. This doesn’t turn the pixels off, but it minimizes the light output to the absolute lowest possible level for that specific hardware.

Frequently Asked Questions about Smart Mirror Dark Mode

How do I stop my smart mirror from lighting up the whole room at night?

The most effective way is to use a combination of a PIR sensor for motion detection and a dimming module like MMM-AutoDimmer. This ensures the mirror is completely dark when no one is around and only uses a low-brightness theme during late-night interactions.

Can I use a motion sensor to toggle dark mode?

Yes! You can configure your Raspberry Pi to listen for a signal from a PIR sensor. When motion is detected, it can send a notification to MagicMirror to switch from a “Sleep” profile to a “Night” profile.

Why do dark colors look washed out behind my mirror glass?

This is due to the 30–40% light transmission rate of standard two-way mirrors. To fix this, avoid using dark grays or complex shadows. Stick to pure black (#000000) for backgrounds and high-contrast colors (white, neon green, or bright amber) for text and icons.

Conclusion

At Foco Finanças, we love DIY projects that make our homes smarter and more comfortable. Learning how to configure smart mirror dark mode is a rite of passage for any mirror builder. It moves your project from a “cool gadget” to a seamless part of your home’s environment.

By using modules like MMM-AutoDimmer, integrating with Home Assistant, or simply mastering your custom.css, you can ensure your mirror is helpful by day and invisible by night.

If you’re looking for more tips on smart home integration or want to see how we can help with your next big project, check out More info about our services. Happy building, and may your nights be dim and your mirrors be bright!