Implementing Dark Mode in Your Website with CSS

Dark mode has become increasingly popular, providing users with an alternative color scheme that’s easier on the eyes in low-light conditions. Beyond aesthetics, offering both light and dark themes enhances accessibility, reduces eye strain, and can even prolong battery life on devices with OLED screens. Implementing dark mode doesn’t have to be complicated, by leveraging CSS variables, media queries, and JavaScript for toggles, you can smoothly incorporate this feature into existing or new web projects.

This article explores practical strategies to detect a user’s color scheme preference, define your color palettes with CSS, and allow visitors to switch between light and dark modes seamlessly. Whether you’re building a personal blog or a corporate site, adding dark mode fosters a more customizable and inclusive user experience.

1. Why Offer Dark Mode?

User Comfort – Many users find darker backgrounds help reduce glare, especially at night or in dimly lit rooms.
Personalization – Some visitors prefer dark interfaces simply as an aesthetic choice, and offering that flexibility can boost satisfaction.
Battery Efficiency – On OLED or AMOLED screens, darker pixels consume less power, potentially extending battery life on mobile devices.

By acknowledging these advantages, adopting dark mode shows responsiveness to diverse user needs and device contexts.

2. Setting Up Your Color Palettes

A. Using CSS Variables

Defining a set of CSS variables (also known as custom properties) in your :root selector allows you to store all your key colors in one place. For example:

:root {
  --bg-color: #ffffff;
  --text-color: #111111;
  --accent-color: #3a86ff;
}

These variables keep your site easy to update: if you change --bg-color, every part of the layout referencing it will update automatically.

B. Creating a Dark Mode Palette

Add an alternate set of variables for dark mode. You can either define them all under a separate rule (e.g., .dark-mode) or rely on a media query. Let’s look at the media query approach:

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #111111;
    --text-color: #ffffff;
    --accent-color: #ffafcc;
  }
}

If a user’s OS or browser is set to dark mode, the browser automatically applies this palette unless you override it with a manual toggle (discussed below).

3. Structuring Your HTML and Classes

A. Basic HTML Setup

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Dark Mode Example</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header>
    <h1>My Awesome Site</h1>
    <button id="theme-toggle">Toggle Theme</button>
  </header>
  <main>
    <p>Welcome to my website! This text changes color based on your theme.</p>
  </main>
  <script src="script.js"></script>
</body>
</html>

Notice the toggle button in the header. We’ll use JavaScript to switch themes.

B. Applying CSS Variables

In your styles.css, reference your custom properties for backgrounds, text, and other color-dependent elements:

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

button {
  background-color: var(--accent-color);
  color: var(--text-color);
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

Any time the variables switch (due to media queries or a class toggle), your site’s colors adapt instantly.

4. Adding a Manual Dark Mode Toggle

Not everyone wants to rely on the system preference for color scheme. You can give visitors a manual toggle by hooking a .dark-mode class to your html or body element:

script.js:

const toggleButton = document.getElementById("theme-toggle");

toggleButton.addEventListener("click", () => {
  document.body.classList.toggle("dark-mode");
});

Then define a .dark-mode override for your custom properties:

.dark-mode {
  --bg-color: #111111;
  --text-color: #ffffff;
  --accent-color: #ffafcc;
}

When the user clicks the button, the .dark-mode class toggles, and the site’s color scheme changes. For an even better user experience, you can store their preference in localStorage so it persists across page reloads.

5. Best Practices for a Smooth Dark Mode Experience

Test Readability → Ensure text remains legible on dark backgrounds. Aim for good contrast ratios (WCAG recommends at least 4.5:1 for normal text).
Include Images or Logos → If your site has images with white backgrounds or logos, consider providing a dark-friendly version or use transparent PNGs or SVGs that adapt well.
Mind Third-Party Widgets → External components might not follow your color variables. If possible, select or style them to match your light/dark themes.
Gradual Color Transitions → Add mild transitions (0.2–0.4s) so background color changes don’t jar users. Something like transition: background-color 0.3s ease on body can be pleasing.

Conclusion

Implementing dark mode not only demonstrates consideration for user preferences and comfort but also aligns with modern web standards and accessible design. By defining flexible CSS variables for your color palette, leveraging media queries for system-wide dark mode detection, and providing a manual toggle for user choice, you can efficiently incorporate a second theme without complex rewrites.

Remember to test thoroughly, from text readability and brand images to the overall user flow, to confirm that your dark mode offers the same coherence and polish as the default light theme. As web development continues to emphasize personalized user experiences, adopting dark mode is a small but valuable improvement that stands to enhance both aesthetics and functionality for your audience.

Disclaimer

Article written with the help of AI.

Read the full Disclaimer HERE

—