This blog uses GeneratePress for its theme, and I’ve been very happy with it for many years. However, I’ve been wanting to add a dark mode version of the theme for a long, long time—and, with some cribbing from other sites and about 147,000 tokens burned on Claude Code, I’ve finally got one!
I started out with this neat light/dark toggle created for GeneratePress from Trading Notions, which is available in this repo right here. Then I fired up Claude Code, turned on planning mode, and let the thing get busy:
The actual mechanism of placing the toggle on the site was the easiest part and worked exactly per the repo’s instructions, using GeneratePress elements with hooks. Zero problems there, though I did change the toggle around so that it appears on the navbar rather than at the bottom of the (infinitely scrolling) homepage:
Almost all the actual implementation time was spent running down the right CSS elements to target. There were a lot of initial issues with this, because LLMs can’t think and will do exactly what you tell them to do:
The temptation is there to just be lazy and not think about stuff, because the LLM can do it for you:
After going back and forth for a bit, we had something that worked, which meant it was time to clean things up:
And that was….kinda it. Now my blog has dark mode! Though I didn’t really learn anything from the experience—other than that the lazy way once again carries the day, and for a sysadmin, that’s the most valuable lesson of all.