Casper night mode not working

Themes
1

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

2

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

3

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
4

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?

5

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 - 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
6

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:

7

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
8

Aha! Well TIL, thanks @vikaspotluri123

1 Like
9

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
10

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
11

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
12

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
13

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

1 Like
14

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