Make Your Website Dark Mode Ready in 15 Minutes

With over 80% of users wanting dark mode in apps, there’s never been a better time to implement it in your web application...

But don’t worry – you won’t need to do much to rewrite your CSS or go through various hard learning processes.

I’m going to share with you how to incorporate dark mode support for your site in just under 15 minutes (yes really).

By the end of this tutorial you should be able to have an elegant dark mode that is system aware and can impress your users.

Understanding System-Level Dark Mode

The highly impressive thing about dark modes in recent years is that you do not have to create a complicated theme switcher from the ground up.

Modern OS already take care of the user's needs and browsers make these easy with CSS.

The magic here happens through a media query called prefers-color-scheme. It looks like this:

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

  /* Your dark mode styles go here */

}

So whenever a user activates the dreaded dark mode switch on their system, by default this media query gets activated.

This allows your website's style to automatically adjust depending on the user’s preference.

The good thing is that most modern browsers support this out of the box. We're talking Chrome, Firefox, Safari, Edge – they're all on board...

This means you can tap into system-level preferences without any extra JavaScript or complicated logic.

Let's get to the fun part – actually implementing this in your code.

The Quick Implementation Method

Let's get straight to it - first thing you need to do is setup your color variables in your CSS. Here's how:

/* In your root CSS file */
:root {
  /* Light mode colors (default) */
  --background: #ffffff;
  --text: #333333;
  --surface: #f5f5f5;
  --accent: #0066cc;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode colors */
    --background: #1a1a1a;
    --text: #ffffff;
    --surface: #2d2d2d;
    --accent: #66b3ff;
  }
}

Now instead of hard coding the colors, you'll use those variables. Like this:

body {
  background-color: var(--background);
  color: var(--text);
}

.card {
  background-color: var(--surface);
}

.button {
  background-color: var(--accent);
}

That's literally it! Your website will now automatically switch between light and dark mode based on your users system preferences. No JavaScript needed, no messy logic – clean and simple CSS.

Quick tip: Just get started with the basic colours and adjust according to your brand. Don't worry too much in the beginning, you can always come back and tweak it later.

Advanced Touches

With the above codes your website should be working perfectly but let's add some extra polish to make your dark mode implementation really professional.

These tweaks take just a few minutes but make a huge difference:

First, add smooth transitions so the mode switch doesn't jarring:

:root {
  --background: #ffffff;
  --text: #333333;
  /* Add this line */
  transition: background-color 0.3s ease, color 0.3s ease;
}

For images, especially logos, add this media query to handle them elegantly:

@media (prefers-color-scheme: dark) {
  img {
    /* Slightly dim non-essential images */
    opacity: 0.8;
  }

  /* But keep logos crisp */
  .logo {
    opacity: 1;
    filter: brightness(1.2);
  }
}

Adding a Theme Toggle Button

Let's add a manual theme switcher for users who want to override their system preferences.

Here's the complete implementation:

First, add this HTML for your toggle button:

<button id="theme-toggle" aria-label="Toggle dark mode">
  <span class="light-icon">🌞</span>
  <span class="dark-icon">🌙</span>
</button>

Here's the CSS to style it nicely:

:root {
  /* Add these theme state variables */
  --light-icon-display: block;
  --dark-icon-display: none;
}

/* Dark mode specific styles */
[data-theme="dark"] {
  --light-icon-display: none;
  --dark-icon-display: block;
}

#theme-toggle {
  background: var(--surface);
  border: 1px solid var(--text);
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  position: fixed;
  top: 20px;
  right: 20px;
}

.light-icon {
  display: var(--light-icon-display);
}

.dark-icon {
  display: var(--dark-icon-display);
}

And here's the JavaScript that makes it all work:

// Theme toggle functionality
const themeToggle = document.getElementById('theme-toggle');
const rootElement = document.documentElement;

// Check for saved theme preference, otherwise use system preference
const getPreferredTheme = () => {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) return savedTheme;

  return window.matchMedia('(prefers-color-scheme: dark)').matches 
    ? 'dark' 
    : 'light';
}

// Set theme on page load
document.addEventListener('DOMContentLoaded', () => {
  rootElement.setAttribute('data-theme', getPreferredTheme());
});

// Handle toggle button click
themeToggle.addEventListener('click', () => {
  const currentTheme = rootElement.getAttribute('data-theme');
  const newTheme = currentTheme === 'light' ? 'dark' : 'light';

  rootElement.setAttribute('data-theme', newTheme);
  localStorage.setItem('theme', newTheme);
});

This code gives you a toggleable button that:

• Respects the user's system preferences by default
• Saves their manual preference in localStorage
• Persists across page reloads
• Shows a sun/moon icon based on the current theme
• Smoothly transitions between modes

Pro tip: Feel free to customize the icons - you could use SVGs or even create a more elaborate switch design. Just make sure it's obvious what the current theme is!

Conclusion

So, here you go — your site now has a fully working dark mode feature that is professionally crafted!

You have system-aware theming, smooth animations, correct image rendering and even a nice toggle button.

You don’t need to have everything perfect on the first day, remember that.

Do the bare-naked implementation, push it, and make changes as you go and as people use the site.

Your users will be glad receiving dark mode even when it is not fully working.