How to add Dark Mode to any website?

Dark Mode toggle for Websites is the most demanding feature these days. Dark pixels help save energy in OLED displays while decreasing energy consumption in the case of other displays. It is mild on the eyes and puts less strain as compared to bright white light from the monitor.

Implementing Dark Mode is as easy as it works. Click on the toggle button, and there you are presented with dark colors. I have shared the code for the easiest Dark Mode checkbox which can be used on any website.

HTML:

We would need a simple checkbox that will act as a toggle for Modes. toggleTheme function is defined below in the JavaScript file.

<input
type="checkbox"
onclick="toggleTheme()"
/>
view raw index.html hosted with ❤ by GitHub

CSS:

A dark class is created in CSS with dark colors for the background-color property and light color for text.

.dark {
background-color: hsl(199.2,89.8%,11.6%);
color: hsl(0,0%,94.9%);
}
view raw style.css hosted with ❤ by GitHub

JS:

toggleTheme function toggles the CSS properties of the body to the properties present in the dark class.

function toggleTheme() {
var element = document.body;
element.classList.toggle("dark");
}
view raw script.js hosted with ❤ by GitHub

Find CODE here – https://github.com/JayeshTiwari03/Dark-Mode-Demo

See the DEMO here – https://dark-mode-demo-delta.vercel.app/

Dark Mode Off
Dark Mode On

Another great example of implementation can be found here in this DEV article – https://dev.to/akhilarjun/one-line-dark-mode-using-css-24li

Published by Jayesh Tiwari

I code and energize, loves sharing my journey.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s