Casper dark theme is gone in Ghost 4.0?

Just saw new update and if I check demo there is no dark mode anymore? Why did you guys remove it? It was perfect.

Is there any plans to bring it back?

1 Like

It’s still there! But it’s manual now instead of automatic, because lots of people complained about it being automatic :nerd_face:

If you prefer to have your site be in dark mode, add this to Code Injection (header) under Ghost Admin > Settings > Code Injection:

<script>document.documentElement.classList.add('dark-mode');</script>

5 Likes

How do you set it to automatic ?

Ideally want the website to go dark at night :slight_smile:

1 Like

Thanks alot

Casper 3 didn’t go dark based on day/night but on the visitor’s operating system preferences for dark mode. Some operating systems can let you set up an automatic switch for dark mode based on local time but that’s a visitor preference, not something that was set up in the theme.

The script above can be adjusted to detect the visitor’s dark mode preference:

<script>
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.documentElement.classList.add('dark-mode');
}
</script>

If you want to switch based on the visitor’s local time instead then you can follow the same pattern but change the conditional to be truthy in your preferred “dark” time frame.

2 Likes

Thank you @Kevin and @John I have updated my website accordingly. So now if the user’s system is on dark mode, so will be my blog.

It occurred to me that it will be cool to give the user the choice. A toogle on the site which allows the user to change to dark mode based on their preference, something like this:
Screen Shot 2021-03-27 at 12.50.01 pm

I have no idea, how this can be implemented. However, something like this on the Casper theme would be great.

Also, perhaps my memory is failing me but the dark mode in Casper 3 had a different shade of grey compared to the total black that Casper 4 does. Is this true? and Can I use the Casper 3 with Ghost v4. Any issues with this? Any features I will not have? I do not use membership so that is a non-issue for me.

Once again, thank you for your assistance.

Being able to offer the toggle would be great.

2 Likes

Thanks @Kevin, that works great. FWIW, I just realized that the accent color defined in settings is also used as as color for the .article-tag a element. So if you chose something dark, you cant see it that well. I added this to the header code injection:

<style>
    .post-card-primary-tag,
    .article-tag a {color: #26a8ed;}
</style>

It seems defining the accent color also affects .gh-content a and maybe some other colors. It would be great if the color scheme was slightly changed based on if dark mode is activated or not. Is this a bug?

1 Like

No, that’s expected with Casper’s styling. If you are giving your visitors multiple themes to choose from then you should choose an accent colour that works for all of them or modify the theme as needed for your use cases.

@Kevin Is there a plan to introduce a setting for the accent color so that we can set different colors based on Light and Dark?

I’m asking since it is pretty hard to find an accent color that works with both Light and Dark.

2 Likes

It would be nice if such things would be configurable without having to modify the theme manually.

Personally I switched to ghost pro to get rid of low-level sysops tasks and configuration. Now the least I want to to do is having to modify themes manually for such basic configurations.

Please think about providing more options out of the box for such simple, basic things. Likely a lot of users would appreciate it.

3 Likes

I want to add that colour on my all links also can u guide me what is the code for that also

this dude is great