DEV Community

Discussion on: Easy way to add a dark theme on your website.

Collapse
 
shafiemoji profile image
Shafi

I am no expert, but this is far from what you call a dark theme. What if your webpage have thousands of elements? Are you going to handpick each element one by one? Just think about how the JS file would look like, changing class on every element, you'll get shivers.
And what about saving user specific preferences? Would they have to switch to it every time they visit your site?

Collapse
 
ishanbagchi profile image
Ishan Bagchi

Thanks for the question. Actually, if I had plenty of elements on my webpage, still my JS file would be of the same length. Here in the JS is just adding the class dark-mode to the body tag when the button with the class myBtn is pressed. If more element is there our CSS file will increase. For eg: if I add a div tag with background color blue by default, and want to change it to yellow in the dark-mode, we just had to add the code below in the CSS file:

.dark-mode > div {
    background: yellow;
}

May this example help. :-)