Casper night mode not working

Hi there,

I read that the default Casper theme automatically supports dark mode. However it always stays in light mode.

All other pages change to dark mode as expected, when my MBP changes.
I use Casper Version 4.1.0 on Ghost 4.10.2.
Tested with Brave and Safari

Anyone any idea?

Thanks in advance!
Tom

Found this thread How to enable dark mode in Casper 3.0? where @DavidDarnes mentions that it should work automatically.

Just to make sure, I am talking about the front end, not the manual switch of the admin backend.

Edit:
Now I am super confused.
I tried it with https://demo.ghost.io/ just as @DavidDarnes showed in his post. But it doesnt work as well for me.
Screen Recording 2021-08-03 at 19.13.09

Looks like the dark mode option got shifted into a theme setting. I assume this was due to people like yourself wanting more control of it. Follow these directions and you should be good to go:

1 Like

Thanks for the hint. So if I understand it correctly there is no automatic choice based on the operating, but only fixed settings via CSS injection?

I seriously have no idea if this is beautiful JS code, but it seems to work :smile:

<script>
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");

if (prefersDarkScheme.matches) {
  document.documentElement.classList.add('dark-mode');
} 
</script>

Source: A Complete Guide to Dark Mode on the Web | CSS-Tricks

Unfortunately it doesnt work as smoothly as in your video. This needs a manual refresh of the page.

Screen Recording 2021-08-03 at 20.31.14

1 Like

Looks good! Nice job, not sure why it doesn’t completely change however that shouldn’t be a problem as people will just turn up to your site with their preferred mode already set :blush:

Since the toggle is a JS based solution, you also have to track the prefers-color-scheme media query! Here’s an adapted version of what I use:

const handleColorSchemePreferenceChange = event => {
    document.body.classList.toggle('dark-mode', event.matches);
};

const systemThemeMatch = window.matchMedia('(prefers-color-scheme: dark)');
systemThemeMatch.addEventListener('change', handleColorSchemePreferenceChange);
// Set theme for first users. Since `systemThemeMatch` and `event` both have the matches property, we can reuse the preference change function
handleColorSchemePreferenceChange(systemThemeMatch);
2 Likes

Aha! Well TIL, thanks @vikaspotluri123

1 Like

Thanks for the hint @vikaspotluri123.
I adapted your code, however now it no longer works on my site.

Any idea what that would be?

<script>
const handleColorSchemePreferenceChange = event => {
    document.body.classList.toggle('dark-mode', event.matches);
};

const systemThemeMatch = window.matchMedia('(prefers-color-scheme: dark)');
systemThemeMatch.addEventListener('change', handleColorSchemePreferenceChange);
// Set theme for first users. Since `systemThemeMatch` and `event` both have the matches property, we can reuse the preference change function
handleColorSchemePreferenceChange(systemThemeMatch);
</script>
1 Like

I think document.body.classList should be document.documentElement.classList in your code. document is the very top level element, and document.body is the one below

1 Like

Right, thank you for the hint David. That did the trick.

As for my learning, do you mind to explain what @vikaspotluri123 meant with:

you also have to track the prefers-color-scheme media query

1 Like

Originally you were checking the colour scheme on load and not actively listening to the change, hence having to reload the page. @vikaspotluri123’s code listens for the change as well as checks on load. Hope this helps!

2 Likes

Makes total sense :smile: Thank you both @DavidDarnes and @vikaspotluri123 for your help here!

1 Like

Nice Job, what a solution :grinning: :grinning: :metal: