How to implement Dark Mode on your websites

Written by
Published on
Modified on

I'll start by saying that there is no native method for dark mode in HTML and CSS just yet. So whatever method you end up using will have to be a custom approach. The following are 2 of the most common ways that I have seen and used in order to get a Dark Mode layout on a webpage. Starting with the quickest method, and ending with probably the most efficient method.

Using an invert filter

This is a quick one-line effect that can be accomplished with the CSS filter property. You can set the filter to invert the current element, in which the browser will then perform a color inversion on the given element. You might see this used online, but I would not recommend it for a variety of reasons.

- The browser controls the inversion algorithm
- You have to explicitly set background colors in order for them to be inverted
- Child elements cannot be un-inverted
- You get what you pay for

Here's a quick live example of what an invert "Dark Mode" would look like. Take the following element with default styling to match this page.

Hello World Button Button 2

The following filter will be applied to this element.

filter: invert(1);

Which will look like the following on your particular browser.

Hello World Again Button Button 2

If you notice, the color of the text inside the element isn't quite right. There's almost like a slight shadow on it making it difficult to read. And the inverse of the blue-ish color in the original converts to a bright reddish orange color. This will also much depend on the browser and device that you are using and how they implement their filter algorithms.

There is a way to control to level of inversion on each element however and that is modifying the inverts argument, which can either be a percentage value from 0% (no inversion) to 100% (full inversion) or a numeric value from 0 to 1.

filter: invert(1);
filter: invert(.5);
filter: invert(0%);

In the same example above, we can lower the inversion level to adjust the overall brightness.

Hello World Again Button Button 2

Maybe if you need a quick dark mode implementation and are willing to deal with the random inversions (temporarily) this might be a way to go.

But the next method is more in line with an actual implementation.

Creating a Dark Mode stylesheet

The most precise method of controlling the dark mode styling is to simply just do it yourself. And you can start by creating a default dark theme for any element with the class name of 'darkmode'.

.darkmode *{
	background:#111;
	color:#fff;
}

With this declaration, you can add the 'dark' class to any parent, such as the body tag, and have every child element inherit the default style.

Hello World

This is a paragraph

You can target individual elements with their dark theme by targeting them directly in CSS.

<body class='darkmode'>
<header class="header"> Header </header>
</body>
.darkmode .header{
	background: #444;
	color:white;
}

.darkmode .footer{
background:gold;
color:#000;
}

Creating this hierarchy makes it simpler to manage the original theme as well.

.header{
	background: dodgerblue;
	color:white;
}

.footer{
background:#eee;
color:#000;
}

This makes it much easier to design both themes independently as needed.

Header

Paragraph

Footer

Switch theme

This gives you much more precise control over the actual dark theme that you are looking to achieve. And you can turn it on or off by removing the 'darkmode' class from the parent element, which you can toggle with jQuery or Vanilla JS.

$('body').toggleClass('darkmode');  // jQuery

document.getElementsByTagName('body')[0].classList.toggle('darkmode');  // vanilla JS

It's possible that some users will mainly use your websites in the dark mode theme that you provide. Depending on the type of screen, it could improve battery life overall and frankly, it just makes sense to have at night time.

Remembering a users selection

By remembering a users preference, you give them a much more personalized experience overall. And you definitely don't want a user to have to click on a 'Dark Mode' icon on every pageload.

Assuming that a user hasn't blocked it on their browsers, then localStorage is a good way to store these sitewide user preferences.

localStorage.setItem('darkmode', 'true');

When the page loads for the first time you can check the value in localStorage and toggle the 'darkmode' class as needed.

window.addEventListener('load', function(){
    if (localStorage.getItem('darkmode')=='true')
        $('body').addClass('darkmode');
});

Note that adding the class in JavaScript will create a quick transition effect from the default mode to the darkmode. In order to bypass that you would need to add the 'darkmode' class before the page is actually rendered through server-side code.

This will entirely depend on the framework and language that you are using however.

And there you have it. My personal favorite way to implement darkmode currently and also coming to this site really soon.

Leave a comment

No messages posted yet

Add a comment

Send me your weekly newsletter filled with awesome ideas
Post