Website Dark Mode: How to Give Your Site a Dark Mode Toggle

I recently launched an updated version of one of my clients’ sites (you can check out the site here). One of the biggest undertakings in that process was the implementation of a website “dark mode”. This implementation would allow users to manually toggle between dark and light mode on a website. The feature of a manual light/dark mode toggle switch is something that has become a pretty popular web design feature in 2023 and for good reason. Let’s explore a bit of what it is and how you can implement it on your own site.

What is Dark Mode?

Dark Mode, also known as Night Mode or Dark Theme, is a design option that shifts the color scheme of a website to predominantly dark tones. Instead of white backgrounds, text, and images, the user is presented with dark backgrounds and light-colored elements. Dark Mode was widely adopted in mobile apps but has since made its way into web design.

1. Reduced Eye Strain and Fatigue

One of the most compelling reasons to implement Dark Mode is its positive impact on user health. Traditional bright interfaces, especially in low-light environments, can cause eye strain and discomfort, leading to eye fatigue and headaches. Dark Mode, with its darker color palette, reduces the overall glare and blue light exposure, which is known to disrupt sleep patterns. Users who spend prolonged periods on your website will appreciate the option to switch to Dark Mode, making it more accessible and comfortable for everyone.

2. Increased Battery Life

There are few things as annoying as draining your phones battery. Well, maybe that’s a bit of an overstatement. Either way, a phone with a depleted battery is wildly inconvenient and the implementation of a Dark Mode on a website can help combat against that.

For users who access your website through mobile devices or laptops, Dark Mode can offer an unexpected yet practical benefit – improved battery life. OLED and AMOLED screens, which are commonly used in smartphones and some laptops, consume less power when displaying darker colors. By utilizing Dark Mode, your website visitors can save energy and extend their device’s battery life, which enhances their overall browsing experience.

3. Visual Appeal and Elegance

Realistically, I think this is the main impetus that drives web developers to implement a Dark Theme on their sites: Dark Mode just looks really freakin’ cool.

Dark Mode can significantly impact the aesthetic appeal of your website. When implemented thoughtfully, it can exude a sense of sophistication and elegance, drawing users in and fostering a memorable experience. In certain contexts, such as showcasing creative portfolios, photography, or video content, Dark Mode can make the visuals stand out more vividly, creating an immersive atmosphere for users.

4. Accessibility and Inclusivity

Web accessibility is a critical aspect of modern web design. By providing Dark Mode as an option, you cater to users with different preferences, including those with visual impairments or light sensitivity. Some users may find it challenging to read content on bright backgrounds, and offering Dark Mode ensures that your website is inclusive and user-friendly for a broader audience.

This is honestly incredibly important as companies in the past have been subject to lawsuits brought about due to being not ADA-compliant.

5. Branding and Differentiation

Dark Mode isn’t just a technical feature; it can also serve as a branding opportunity for your website. By customizing the color scheme in Dark Mode to match your brand’s colors or style, you reinforce brand recognition and create a consistent experience across both light and dark versions of your site. This visual differentiation can set your website apart from competitors and leave a lasting impression on users.

Incorporating Dark Mode: Best Practices

While Dark Mode has undeniable benefits, its implementation requires careful consideration and attention to detail. Here are some best practices to keep in mind:

User Choice: Allow users to toggle between Dark Mode and Light Mode based on their preferences. Avoid forcing Dark Mode on users, as it might not suit everyone’s taste.

Consistency: Maintain a consistent experience between the two modes. Ensure that the content, layout, and functionality remain the same, irrespective of the chosen mode.

Contrast: Pay attention to contrast ratios to ensure that text and other elements are easily readable in both Dark and Light Modes.

Testing: Thoroughly test your website in different modes and across various devices to identify and address any issues that may arise.

How to Install a Manual Dark Mode Toggle on Your Site

Alright, so now you know all about Dark Mode and you’re ready to get your hands dirty by implementing it on your own site! The problem: you have no clue where to begin.

Don’t worry – we’ve made this process pretty simple for you. We’ve already written the code here for a basic dark mode toggle switch! Below is the HTML, CSS, and Javascript for the dark mode toggle. And here is a link to view the switch on CodePen for you to customize before implementing on your site: https://codepen.io/semdeck/pen/rNQQWMR

HTML

Here’s the HTML for the switch. When on your site, you can remove the H1 as it probably will no longer be necessary. This implements the “checkbox hack” that we’ll leverage with CSS to make the toggle transition as seamless as possible as well as triggering the actually dark-theme with Javascript.

<h1>Light/Dark Toggle<br> Button</h1>

<div class="theme-toggle">
  <input type="checkbox" id="toggle-button" aria-label="Toggle Dark Mode">
  <label for="toggle-button">
    <i class="fas fa-moon" id="moon-icon"></i>
    <i class="fas fa-sun" id="sun-icon"></i>
  </label>
</div>

CSS

The CSS here serves to do a few things but most significantly, it’s doing the following:

• • Using the “checkbox” hack with this CSS code, when you click on the label, it will automatically toggle the checkbox state, and the CSS transitions will fade out the moon icon and fade in the sun icon when the checkbox is checked (i.e., when the dark theme is active).

• • Changing the color of the icons to match the theme (dark icons on white background, visa-versa)

• • Turning the cursor into a pointer when hovering on the toggle

• • Applying the CSS that is specific to the Dark Mode (with the “body.dark-theme” qualifier)

* {box-sizing: border-box;}

body {
  font-family: montserrat;
  text-align: center;
  transition: background 0.2s linear;
  height: 100vh; /* Added to ensure the body takes the full viewport height */
  display: flex; /* Added to create a flex container */
  flex-direction: column; /* Added to arrange content in a column */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  margin: 0; /* Added to remove default margin */
}

/* Hide the input checkbox */
#toggle-button {
  display: none;
}

/* Style for the moon and sun icons */
#moon-icon {
	color:black;
  transition: opacity 0.3s ease;
  font-size:50px;
  transform:translateX(25px);
}

#sun-icon {
	color:orange;
  transition: opacity 0.3s ease;
  opacity: 0;
  font-size:50px;
  transform:translateX(-25px);
}

/* When the checkbox is checked (i.e., dark theme is active), show the sun icon and hide the moon icon */
#toggle-button:checked + label #moon-icon {
  opacity: 0;
}

#toggle-button:checked + label #sun-icon {
  opacity: 1;
}

/* Optional: Style for the label itself (the clickable area) */
label {
  cursor: pointer;
}

/* Dark Theme Variants*/
body.dark-theme {
  background-color:black;
}

body.dark-theme h1 {
  color:white;
}

Javascript

Essentially, what the Javascript is doing here is storing the user’s preferences for the dark mode. This prevents a user from toggling dark mode on one page of your site, navigating to another page, and then having their preferences reset every time the website reloads. I mean, after all, how obnoxious would that be? At that point, dark mode would just become more of a massive irritant than a benefit.

With this Javascript applied, the website will remember the user’s previously set preferences for dark mode and will load the page accordingly.

In addition to that, it’s also trigging the “body.dark-theme” trigger we are referenced in the CSS.

const toggleButton = document.getElementById('toggle-button');
const body = document.body;

// Check if a dark mode preference is stored in LocalStorage
const isDarkMode = localStorage.getItem('darkMode');

// Set the initial toggle state based on the stored preference
toggleButton.checked = isDarkMode === 'true';
body.classList.toggle('dark-theme', toggleButton.checked);

toggleButton.addEventListener('click', () => {
  const isDarkModeActive = body.classList.contains('dark-theme');
  
  // Toggle the class and store the dark mode preference in LocalStorage
  body.classList.toggle('dark-theme', !isDarkModeActive);
  localStorage.setItem('darkMode', !isDarkModeActive);
});

Dark Mode has evolved from being a mere trend to a valuable feature that significantly impacts user experience on websites. By reducing eye strain, enhancing aesthetics, and improving accessibility, Dark Mode provides a night-friendly option for users to browse content comfortably. Moreover, it aligns your website with current design trends and demonstrates your commitment to meeting the diverse needs of your audience.