Introduction

Dark mode isn’t just a trend anymore—it’s an expectation. From Windows and macOS to iOS and Android, users want the option to switch from a blinding white background to a sleek, eye-friendly dark interface.

But here’s the good news: You don’t need to redesign your entire website. With a few smart CSS rules and a sprinkle of JavaScript, you can add dark mode to any website in under 30 minutes.

In this article, I’ll show you three methods—from quick-and-dirty to fully professional.

Method 1: The “Browser Native” Approach (Easiest)

Modern browsers now support prefers-color-scheme, a CSS media query that detects if a user has dark mode enabled in their OS settings.

Step 1: Add Dark CSS Variables

css

/* Light mode (default) */

:root {

--bg: #ffffff;

--text: #111111;

--accent: #0077cc;

}

/* Dark mode automatic */

@media (prefers-color-scheme: dark) {

:root {

--bg: #121212;

--text: #eeeeee;

--accent: #66ccff;

}

}

body {

background: var(--bg);

color: var(--text);

}

Pros: Zero…