How to make a dark mode in a web page

By far now we all know what Dark Mode means, but if you are new this just click below this toggle button.

In this article I will be discussing different ways of implementing Dark Mode in your Website.

Why Dark Mode??

Dark Mode is a revolutionary change in UI/UX designing. Dark Mode enables users to switch between two different interfaces for a web page. Dark Mode presents the background colour in some dark color and presents the text in some Light color. Dark Mode is now been used in mobile apps also. Twitter, Facebook, YouTube, Visual Studio etc gives user option of enabling dark theme for the app and also for their web page.

Dark mode is preferred by programmers/coders as it gives a better feel while coding. With that said, dark mode is also proven to be helpful for the eyes. Dark mode is also helpful for night readers. It is also said that Dark Mode uses less battery (in some devices), as the device don't have to produce colour spectrums. Read this: Does dark mode save battery life

Ways of implementing Dark Mode

By System color scheme

In This approach your web page will automatically detects user's system color scheme and theme/Mode. This is done using Media Queries in the CSS. You have to define different color set for the background and the foreground in the Classes/IDs. You can do this by
@media(prefers-color-scheme: dark)

Just add different css that you want to acheive when you have dark mode in the media query like this.

See the demo File

By Toggling class using Javascript/Jquery

You can create a different css class having different CSS properties for dark theme and then add/remove or toggle the class on click of the button.

Define your Dark theme CSS classes in the stylesheet or tag.

Add the Dark theme classes on click of the button.

See the demo

By Adding only one line of CSS statement using Javascript/Jquery

Here is one of the most easiest approach to acheive dark/light mode. You can add filter:invert(1); in the style property to the whole body or particularly to the element that you want to be of different colour. Invert will put the exact opposite color to the element. E.g. White will turn to Black on inverting.

Add the style filter:invert(1); using JavaScript like this.

One of the problem with inverting is that, it inverts every child element, that you might not wanted to be inverted. Every element including images gets inverted in color which makes it looks really bad. So for that you will have to select every image/element that you need not to inverted and then re-inverse it.

See the example here.

Use of LocalStorage to store user preference

When you have lots of visitor on your website/blog, it is better to use Local Storage to store the user's preference of using Dark or Light mode. It's because your user might be your daily visitor and from the user's point of view changing the theme on every visit is such a hassle. Local Storage will the user's preference locally in the browser until the value is not cleared. Whenever the page/website is loaded, it will get the values from the Localstorage to check the values and set the mode automatically. Best thing about this is, it is based on JavaScript and no server side is required.

Here is how you can implement it.

See the demo File. If you set Dark Mode 'ON' and close the file, then open it again, you will see that it will automatically changes the mode to dark mode on its own.

If you want to have the Code you can Download all the working demo files from my GitHub.

Download