Dark Mode on CSS, React and Gatsby… and a Beautiful Toggle
#ExplainLikeI’m5 [1]
After running after too many bad tutorials scattered around the internet on a simple problem with a simple solution; fear me not — here is the only go-to you will ever need!
The problem: create a beautiful, light, fast, cacheable and reliable light/dark mode toggle without an extra sheet of JavaScript non-sense, on React + Gatsby using pure CSS and a simple styled checkbox.
The solution: Gatsby has become my favourite React framework as it gets rid of all the non-sense we need to become more productive and build blazing-fast React websites. If you are not familiar with Gatsby yet, you can start from here. Gatsby has an excellent documentation and community-powered plugins that will get you covered. With a simple plugin and an easy-to-set CSS property, you can have your cacheable (the user’s preferences will be saved for their next session) dark mode up and running in no time.
For this tutorial, I am assuming you are building your website using Gatsby + React — if this is not the case and you are just interested on the CSS toggle, just jump to step 5.
