Yep, Dark mode for GeneratePress done minimally.

Photo by Jase Bloor on Unsplash
The grayscale filter will be applied to the image in dark mode.

I made Jot, a starter site template for GeneratePress Premium. It comes with an automatic dark mode for supported systems and browsers. This template heavily relies on  prefers-color-scheme CSS media feature. Refer to my blog post if you want to read more about that.

Key features of Jot:

  • Automatic dark mode. Follows Google’s best practices.
  • Grayscale filter while in dark mode. Applicable to img, code, kbd, pre, samp, and blockquote.

Overall, the site template would be ideal for writers and bloggers that embrace minimalism.

How to import Jot.

Step 1: Download the JSON file and import it to your GeneratePress settings. Accessible via Dashboard → Appearance → GeneratePress → Import Settings.

Step 2: Copy and paste the CSS to the Additional CSS section. Accessible via Dashboard → Appearance → Customize → Additional CSS.

Improvise the settings and style accordingly.