Last year I made it a point to redesign my website from scratch. I wanted something simple and minimalist looking that clearly stated what this was - a portfolio website.
After I rebuilt my website from the ground up it seemed like everywhere I turned there was another article about adding a dark mode to your website.
At first I didn't think it would make that big of a difference because, while I am partial to darker colors, I felt like my website was a good balance between bright, fun colors and darker fonts.
I read some of the articles I mentioned earlier and the more I thought about it the more I decided to go for it.
I took some inspiration from Flavio Copes who wrote a terrific article on this very subject. Unlike what Flavio decided to do with his site, I didn't add the user's choice to local storage.
This is due, in part, to the differences between our sites. I have a static site and there are no redirects/separate pages aside from the blog which is on a different platform so users generally won't be refreshing the page. It is a cool option and one that I may add in later on.
The Code
The code to achieve this was fairly simple. I took the same approach as Flavio did and added the style changes through CSS. I had to take a few more steps because I have an image on my landing page.
I had to use the !important flag on some of the rules because they were not being applied properly. This was the easiest approach to implement and I know it's not advised to use this flag so I'll be looking for an alternative in the near future.
Here is the JavaScript I used to get my toggle switch working correctly:
I start by selecting my div with an id of light-dark-mode-container and adding an event listener to it.
Next, I set my variables of everything, which selects all content on the page, and projectTiles because this class belongs to a particular set of overlays I do not want to have a background of a solid color.
Next, since I'm using querySelectorAll which returns a static NodeList, I loop over all of the elements within both NodeLists and either toggle the class dark or completely remove it from the elements returned by the variable projectTiles.
What I'm left with is a container at the top of my website with a toggle switch that allows the user to toggle between light and dark mode.
I hope you enjoyed this post and maybe you learned something too! If you decide to implement this on your own website or your next project please share it with me (leave me a comment or shout at me on Twitter). I'm always happy to see the work that others create.
This post was originally posted on my blog where I write articles related to front end web development. I also cross post my articles on Medium, so you can find my work on that platform as well!
While you're there why not sign up for my Newsletter? I promise I'll never spam your inbox and your information will not be shared with anyone else.
Have an awesome day filled with love, joy, and coding!
Top comments (5)
Can you please help me.i'm a beginner.
I'm trying to implement dark mode in my website. so I Made a function where if I click a button it will switch to dark theme which worked but only for a single page even though I used the script source tag in other html files where I want to happen.
what I want to do is when a user goes to setting and clicks the dark button the dark theme should apply to every html files.
Ok, I have tried to implement this but I have failed miserably!
It would be nice if Cloudflare creates an app for that so that we can enable dark mode with one click.
Hi Marco,
You have already an extension for darkmode for differents browsers thats is very cool and easy to use.
darkreader.org/
Cheers!
this is for the browsers! I need to turn my own websites into dark mode with a button that the user will click on my site.
Yes, that's true. I see these other post kooslooijesteijn.net/blog/add-dark... , that it seems he modify all the elemente one by one to change the colors.
I am in a similar situation, and I was thinking of taking all the css that generate dark mode extension and applying it to my website.