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

Using Ghost
1

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 :)

https://docs.kenjibailly.xyz/ghost-v4-dark-mode-toggle-combined-with-cookie/

6 Likes
2

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

3

Nice tutorial :ok_hand: thanks for sharing!

4

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
5

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