How to Automatically Adapt to Dark Mode in Framer

I get it. You’ve probably used Framer’s built-in dark mode toggle, right? It’s a neat feature, but it’s just scratching the surface of what you can do.

Here’s a hidden gem I’ve uncovered that automatically adapts your site to the user’s preferred system theme, no toggle needed. Yes, it’s as smooth as it sounds. Let me show you how to unlock this feature and why it matters. But before that, let’s talk about the problem…

The Problem:

Most of us use Framer’s dark mode toggle, Most of us do not even know how to use the dark mode toggle, but it’s not really personalized for the user. You’re just giving them the option to switch. what if your site automatically knew what the user preferred?

The Solution:

I was working on a client’s website when he asked for a dark mode version.
At first, I thought, “Okay, I’ll just add a toggle so users can switch between light and dark modes.”

But then I thought again—what if the site could automatically change based on the user’s system settings? That would save time and feel way smoother.

So I did a bit of research and found a better way.
Using Framer’s Code Component, I created a small custom code that detects the system’s dark mode and updates the website theme in real-time.

No toggle needed.
It just works - automatically.

It’s a cleaner, more modern way to handle dark mode, and it makes your site feel more polished and professional.

How it Works:

You can achieve this with a small piece of JavaScript in Framer’s Code Component. By detecting the user's system theme (dark or light), you can automatically adjust your website’s styles - without needing any manual toggles.

Here's the code snippet that does it all: https://claude.site/artifacts/348f03a5-9ac0-4fc8-a4bf-59a00905822a