Building a Dark Mode Toggle in AngularJS: Step-by-Step Guide

In recent years, dark mode has become more than just a trendy design choice—it’s a feature that enhances user experience by reducing eye strain and extending battery life on devices with OLED screens. Offering visitors a dark mode toggle on your website can make your site more accessible and appealing. If you’re wondering how to add a dark mode toggle to your site, this step-by-step guide will walk you through the process in a clear, straightforward way.

Why Add a Dark Mode Toggle?

Before diving in, it’s good to understand why implementing dark mode is beneficial:

• Improves readability in low-light environments
• Reduces eye fatigue during extended reading sessions
• Extends battery life on some mobile devices
• Provides user control and personalization
• Keeps your site modern and trendy

Step 1: Set Up Your CSS for Dark Mode

The first step is to design the styles for both light and dark themes using CSS. You’ll want to create a CSS class (e.g., .dark-mode) that defines colors suitable for dark mode.

css
/ Default light theme /
body {
background-color: #ffffff;
color: #121212;
transition: background-color 0.3s ease, color 0.3s ease;
}

/ Dark theme styles /
body.dark-mode {
background-color: #121212;
color: #f0f0f0;
}

/ Additional elements /
header, footer {
background-color: #f8f8f8;
}

body.dark-mode header,
body.dark-mode footer {
background-color: #1e1e1e;
}

The transition ensures the color change feels smooth.

Step 2: Add the Toggle Button to Your HTML

Next, add a button or switch element to your webpage that users will click to toggle dark mode.

🌙

This button can be customized with icons or text to improve user experience.

Step 3: Write JavaScript to Handle the Toggle

Your toggle button needs JavaScript to switch between modes dynamically. The logic involves:

• Toggling the .dark-mode class on the body
• Saving the user’s preference in localStorage so it persists across visits

Here’s a simple script:

javascript
const toggleButton = document.getElementById(‘dark-mode-toggle’);
const body = document.body;

// Load saved theme from localStorage
if (localStorage.getItem(‘theme’) === ‘dark’) {
body.classList.add(‘dark-mode’);
}

toggleButton.addEventListener(‘click’, () => {
body.classList.toggle(‘dark-mode’);

// Save preference
if (body.classList.contains(‘dark-mode’)) {
localStorage.setItem(‘theme’, ‘dark’);
} else {
localStorage.setItem(‘theme’, ‘light’);
}
});

This ensures the user’s choice remains even after refreshing or returning to the site.

Step 4: Enhance Accessibility

To make your toggle accessible:

• Add aria-label to describe the button function
• Consider keyboard navigability — users should be able to toggle via Tab and Enter keys
• Use sufficient contrast ratios for both modes according to WCAG guidelines

Step 5: Optional — Detect System Preferences Automatically

You can enhance user experience by detecting if the user’s system prefers dark mode initially. Use CSS media queries or JavaScript.

Example — CSS media query:

css
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #f0f0f0;
}
}

Or with JavaScript:

javascript
if (!localStorage.getItem(‘theme’)) {
if (window.matchMedia && window.matchMedia(‘(prefers-color-scheme: dark)’).matches) {
body.classList.add(‘dark-mode’);
}
}

Final Thoughts

Adding a dark mode toggle is easier than you might think and delivers real value to your users. This small enhancement not only modernizes your website but also shows attention to user comfort. Whether you are building a personal blog or a business site, dark mode is a feature worth considering.

By following the steps outlined here, you can implement a smooth, accessible dark mode toggle that remembers your visitor’s preference and adapts beautifully to their environment.

Happy coding and enjoy illuminating your site in style!