DEV Community

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

Collapse
 
saxxyfoxxy profile image
Jennifer M

Interesting method. I already implemented Dark Mode using a cookie and javascript (if cookie is set, insert these rules into a stylesheet) and it works well, even in IE (though you have to do an if/else to not insert certain non-IE rules or an error will stop your page from loading - easy to do for just those rules, though). The user can toggle it on or off using the same button (if it is set, delete the cookie; if it is not set, add the cookie). I also have several other site settings set up this same way (link underline choice for people who are color blind, and background choices).

I found this article when searching for how to set Dark Mode for browser preferences after seeing it as an option in the browser on my new phone. As I have my Dark Mode cookie set to delete after 24 hours (it is more meant for accessibility during a migraine than out of user preference, but of course can also be used as a preference, especially at night), I'm not planning on implementing the browser choice one after reading this article, especially since it would double up on the stylesheets. I'm not sure if one method is better than the other, but since I use the cookie/javascript writing the stylesheets for multiple purposes (and javascript writes my regular background, a random photo background, onto a body::before so it is fixed even on iOS devices), it works best for me. And yes, all the cookies are declared in my Privacy Policy 😝.