Dark mode on landing page / Light mode on posts

Themes
1

I’m using Casper 5.4.4. and wonder if it would be possible to be in Dark Mode on the landing page and switch articles to Light Mode (or at least have a white background with black text and links)?

I tried different code injections but couldn’t get anywhere.

Help or pointing to a proper tutorial would be much appreciated : )

2

This is a little tricky, but try adding this to your Code Injection → Site Header:

<script>
const isHome = window.location.pathname === "/";

if (!isHome) {
  document.documentElement.classList.remove("dark-mode");
}
</script>

This script checks whether we’re on the homepage (isHome). If we’re not on the homepage, then the script changes the theme to light mode by removing the dark-mode class. Everything here assumes you’re already on dark mode (as the site is now).

2 Likes
3

Genius, this works perfectly! :heart_eyes:

Where could I found other descriptors like (isHome) if I want to apply dark mode to a page or a tag page for instance?

4

In the isHome is just a variable name and arbitrary — it could’ve been called spaghetti and worked the same. It’s the window.location.pathname part that detects the homepage.

To do that for tag/pages is much harder because it’s not as easy to determine the page status. If you’re comfortable editing or customizing your theme, you can use Ghost’s is helper to do this.

You can then use to check the current context. In the example, we check if we’re on a home, tag, or page:

{{#is "home,tag,page"}} Do something... {{/is}