Discussion on: Add dark mode to your website with just a few lines of code

[Taufik Nurrohman]

Another idea: use single theme file and just toggle a global class name…

button.addEventListener('click', () => {
    document.body.classList.toggle('dark');
    localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
});

if (localStorage.getItem('theme') === 'dark') {
    document.body.classList.add('dark');
}

/* Light mode */
body {
  background: #fff;
  color: #000;
}

/* Dark mode */
body.dark {
  background: #000;
  color: #fff;
}

[AlbertoM]

Yes you are right, I might add it to the article for completion.

[Maxime Moreau]

And even better, define some css variables to change everything in just a few lines of css (variables declaration).

[Anjali Chauhan]

i have more than 1 page whom i want to add dark theme. how to do that?

[Arsen Ibragimov]

Good one! Thanks!

[Anjali Chauhan]

i have more than 1 page whom i want to add dark theme. how to do that?