Implementing Dark Mode with User System Settings in JavaScript

Dark mode has become a popular feature for websites and applications. It offers a more eye-friendly experience in low-light environments and can even reduce battery consumption on mobile devices. But wouldn’t it be great if your website automatically adapts to the user’s system-wide dark mode preference?

This blog post will guide you through creating a future-proof JavaScript solution that achieves just that. We’ll leverage the powerful prefers-color-scheme media query to detect the user’s system preference and apply the appropriate theme seamlessly. We’ll also explore options for user overrides and storing preferences for a delightful user experience.

 

Setting the Stage: CSS Custom Properties

Before diving into JavaScript, let’s establish our visual styles using CSS Custom Properties (variables). This allows for centralized control over theme colors and makes our JavaScript code cleaner. Here’s an example:

:root {
–background-color: #fff; /* Light theme background */
–text-color: #000; /* Light theme text */
–toggle-color: #ddd; /* Toggle color (adapts to theme) */
}

/* Dark theme styles */
@media (prefers-color-scheme: dark) {
:root {
–background-color: #000;
–text-color: #fff;
–toggle-color: #333;
}
}

.dark {
background-color: var(–background-color); /* Use the defined variable */
color: var(–text-color);
}

.dark body{background:#000;color:#fff}
.dark a, .dark h1,.dark h2, .dark h3{color:#fff}

 

In this example, we define variables for background-color, text-color, and toggle-color. The @media query applies dark theme styles when the system preference is set to dark mode.

 

JavaScript: Modern Approach

Now, let’s leverage JavaScript to detect system preference and apply the theme in a modern way:

<script>/*<![CDATA[*/”dark”===localStorage.theme||!(“theme”in localStorage)&&window.matchMedia(“(prefers-color-scheme: dark)”).matches?document.documentElement.classList.add(“dark”):document.documentElement.classList.remove(“dark”);/*]]>*/</script>

 

Understanding the Code:

This code snippet, cleverly wrapped in a Conditional Comment (CDATA) for compatibility with older browsers, performs the following actions:

1. Checks Local Storage: It first checks if a key named “theme” exists in the browser’s local storage. Local storage allows websites to store data locally on the user’s device.
2. Prioritizes User Preference: If “theme” exists in local storage and its value is “dark”, it applies the dark theme. This prioritizes the user’s previous choice.
3. Falls Back to System Preference: If “theme” doesn’t exist in local storage, it uses the window.matchMedia method to check the user’s system preference for color scheme using the (prefers-color-scheme: dark) media query. If the system prefers dark mode, it applies the dark theme.
4. Applies or Removes Dark Theme Class: Based on the conditions above, the code dynamically adds or removes the CSS class “dark” from the document.documentElement element. This class likely controls the styles for dark mode in your CSS.

 

By implementing these techniques, you can create a user-friendly dark mode experience that adapts seamlessly to system preferences while offering customization options.

This is a basic implementation, and you can customize it further to fit your specific needs. With a bit of JavaScript magic, you can ensure your website provides a comfortable viewing experience for all users, day or night.