The Quest for the Perfect Dark Mode (Gatsby/React)
Hey thread, author here.<p>I don&#x27;t have the energy to debunk some of these replies, but let me quickly say:<p>1. The reason that this is a hard problem has nothing to do with React, or Gatsby. It has to do with the strategy of precompiling HTML and not having a runtime server, an approach with many many benefits (described here: <a href="https:&#x2F;&#x2F;joshwcomeau.com&#x2F;gatsby&#x2F;a-static-future&#x2F;" rel="nofollow">https:&#x2F;&#x2F;joshwcomeau.com&#x2F;gatsby&#x2F;a-static-future&#x2F;</a>). If you&#x27;re wondering why anyone would put up with all this tomfoolery for a dark mode, please read that so you can understand the benefits to this approach.<p>2. &quot;React is overkill for static sites&quot; is a debate I am not trying to have, but I can say that for my blog (the site that this post is about), React has allowed me to do lots of cool things that would have been much harder otherwise. And using Gatsby means that I have first-meaningful-paint performance that beats a PHP template with no JS, since my site doesn&#x27;t have to do any database lookups or real-time HTML generation. I am not saying that this is the right approach for every website, but it was 100% the right choice for this one.<p>4. Many of these replies are making suggestions that are discussed in the article itself. CSS variables are not an alternative to this solution, they _are_ the solution (my solution wouldn&#x27;t work without them!). Please read the post before forming an opinion about it.<p>I hope that helps clarify some things! Hope you&#x27;re all doing alright and staying home.