I’ve finally added support for dark mode 😎 This has been on my TODO list for a while, especially since adding dark mode support on both cadizm.com and dev.cadizm.com.
Both of those sites were previously migrated to Next.js which made the job much easier.
This blog is still using Jekyll and tbh it’s working just fine. My needs are quite simple with my main requirements being:
- Uncluttered repo that is easy to understand
- Simple and fast static site generation
- Support for writing posts/code in Markdown
- Ability to typeset mathematics using LaTeX
- Support for dark mode!
After adding MathJax, the only thing that was missing was dark mode.
But no more! Now that most modern browsers have prefers-color-scheme media query support, adding
dark mode to this site was much easier than expected!
Because my frontend skills can be described (nicely) as lacking, I was googling (and asking ChatGPT) all sorts of questions about how to migrate Jekyll sites and very old Bootstrap sites to use dark mode. Most of the answers involved upgrading to the latest Bootstrap which was something I was not particularly interested in doing.
After initially trying those routes and being unhappy with the results, I went for the manual approach
which ended up being much nicer~ The PR only needed
the addition of a few media queries for body, anchor, and code elements. As well as choosing more
appropriate syntax highlighting scheme css classes. I learned how easy this is to do using rouge
$ rougify style molokai | pbcopy