Add Dark Mode toggle + Automatic Dark Mode based on prefs + Set Cookie for Casper v4

I created a tutorial on my Ghost blog on how to create the ultimate dark mode experience for Casper v4.

  1. Create a dark mode toggle
  2. Automatic dark mode based on browser preferences
  3. Dark mode “theme” cookie

I have included a “Lazy Guide” for code injection and a “Hard Coded” guide to add to your theme.
Enjoy :slight_smile:


Many thanks for this. I followed the ‘Lazy Guide’ for code injection and it works very well! :slightly_smiling_face:

Nice tutorial :ok_hand: thanks for sharing!

This is one of the main reasons for why I am here instead of anywhere else. Thank you for sharing and thank you for taking the time to write that post / article. I truly appreciate it. Lots of appreciation and love goes out to all the people who take the time to help.

Still being new to Ghost, I am just now (about 15-20 days in) starting to fully understand the code and handlebars and what not. I just wrote an article about using Gmail as the transactional email provider (old subject, I know… still though) and how to work around the portal – changing texts and buttons and what not.

I’m getting there.

1 Like

Thanks a lot :smiley:
Keep up the good work!