I am a huge fan and lover of dark themes which has made switching from light mode to dark mode the first thing i do when i visit a website and i feel pretty bad when that functionality is not there.

Which has also been the reason i add the functionality to toggle from light mode to dark mode in almost every of my personal projects.

In this article we'll be walking through adding the light mode and dark mode toggle functionality to our websites.

1. Firstly, create your data toggle button.

<button>Click me</button>

1. Give the the button and id of toggle

<button id="toggle">Click me</button>

1. Then add some JS

var toggle = document.getElementById('toggle');

toggle.addEventListener('click', () => {

if (document.body.style.backgroundColor === 'white') {
document.body.style.backgroundColor === 'black';
}else{
document.body.style.backgroundColor === 'white';
}
})

And then boom there you go, your dark mode and light mode functionality ready.😊

Thanks guys for reading