A Complete Guide to Dark Mode on the Web

A Complete Guide to Dark Mode on the Web

Dark mode has gained a lot of traction recently. Like Apple, for instance, has added dark mode to its iOS and MacOS operating systems. Windows and Google have done the same.  DuckDuckGo’s light and dark themes Let’s get into dark mode in the context of websites. We’ll delve into different options and approaches to implementing a dark mode design and the technical considerations they entail. We’ll also touch upon some design tips along the way. Toggling Themes The typical scenario is that you already have a light theme for your site, and you’re interested in making a darker counterpart. Or, even if you’re starting from scratch, you’ll have both themes: light and dark. One theme should be defined as the default that users get on first visit, which is the light theme in most cases (though we can let the user’s browser make that choice for us, as we’ll see). There also should be a way to switch to the other theme (which can be done automatically, as we’ll also see) — as in, the user clicks a button and the color theme changes. There several approaches to go about doing this: Using a Body Class The trick here is to swap out a class that can be a hook for changing a style anywhere on the page. Here’s a script for a button that will toggle that class, for example: // Select the button const btn = document.querySelector(‘.btn-toggle’); // Listen for a click on the button btn.addEventListener(‘click’, function() { // Then toggle (add/remove) the .dark-theme class to the body document.body.classList.toggle(‘dark-theme’); }) Here’s how we can use that idea:   Toggle Dark Mode   Hey there! This is just a title   I am just a boring text, existing here solely for the purpose of this demo   And I am just another one like the one above me, because two is better than having only one   I am a link, don’t click me! The general idea of this approach is to style things up as we normally would, call that our “default” mode, then create a complete set of color styles using a class set on the   element we can use as a “dark” mode. Let’s say our default is a light color scheme. All of those “light” styles are written exactly the same way you normally write CSS. Given our HTML, let’s apply some global styling to the body and to links. body {   color: #222;   background: #fff; } a {   color: #0033cc; } Good good. We have dark text (#222) and dark links (#0033cc) on a light background (#fff). Our “default” theme is off to a solid start. Now let’s redefine those property values, this time set on a different body class: body {   color: #222;   background: #fff; } a {   color: #0033cc; } 
 /* Dark Mode styles */ body.dark-theme {   color: #eee;   background: #121212; } body.dark-theme a {   color: #809fff; } Dark theme styles will be descendants of the same parent class — which is .dark-theme in this example — which we’ve applied to the  tag. How do we “switch” body classes to access the dark styles? We can use JavaScript! We’ll select the button class (.btn-toggle), add a listener for when it’s clicked, then add the dark theme class (.dark-theme) to the body element’s class list. That effectively overrides all of the “light” colors we set, thanks to the cascade and specificity.  Here’s the complete code working in action.  » Read More

Like to keep reading?

This article first appeared on css-tricks.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply