Hello,
that is the main issue and i will try to solve it as soon as possible.
I’ll let you know as soon as I solve this problem.
Best regards
Same problem here :(. Have you found a solution by any chance? Otherwise it’s a great plugin!
I think I’ve found the culprit.
The JavaScript file public/js/wp-night-mode-public.js has a function, wp_night_mode_load_cookie() that loads the cookie and if WP Night Mode is enabled, it adds the class ‘wp-night-mode-on’ to the body.
It seems this script is loading deferred and the ‘wp-night-mode-on’ class is sometimes added to the body after the whole page has loaded. This causes the dark mode to activate too late.
I think I solved it (well, it’s a hacky solution) by adding the following JavaScript after the <body> tag in the header.php (find it in your theme editor):
<script>
var nmCookie=document.cookie.match(“(^|;) ?wpNightMode=([^;]*)(;|$)”);nmEnabled=nmCookie?nmCookie[2]:null,”true”===nmEnabled?document.body.classList.add(“wp-night-mode-on”):document.body.classList.remove(“wp-night-mode-on”);
</script>
This is minified code. What it does: the cookie is loaded, and if WP Night Mode is ‘true’, then directly add ‘wp-night-mode-on’ to the classes of the body. Not sure if this is right, but it solved my problem.
Hi,
Thank you @ivarvanwooning for your fix proposal, but it does not work here: https://www.jtmartelli.com/. In my case, the problem appeared when I installed another plugin (LoftLoader) whose cookie is cached (by WP Fastest Cache) before WP Night Mode. Because it is cached first, it defers the loading of the JavaScript of “WP Night Mode”, hence creating the flashing issue. Excluding one of the two cookies from caching solves the flashing issue, but slows down any return to the homepage by at least 2-3s.
Does anyone know how to force the WP Night Mode cookie to be cached first?
Best regards from Delhi,
JT
@markoarula did you found a fix for flashing content?
@jtmartelli The solution I proposed does not rely on the WP Night Mode JavaScript. It’s vanilla JavaScript, placed directly under the <body> tag, so it’s executed immediately I think?
<script>
var nmCookie=document.cookie.match(“(^|;) ?wpNightMode=([^;]*)(;|$)”);nmEnabled=nmCookie?nmCookie[2]:null,”true”===nmEnabled?document.body.classList.add(“wp-night-mode-on”):document.body.classList.remove(“wp-night-mode-on”);
</script>
So it completely ignores WP Night Mode and adds the wp-night-mode-on class to the body if a cookie is found. You can edit your header.php and paste this below <body>. It fixed the problem for me, but not sure if it works for everyone.
@vadikcoma
Try adding this below the <body> tag in your header.php file (most of the time it can be found in your template folder):
<script>
var nmCookie=document.cookie.match(“(^|;) ?wpNightMode=([^;]*)(;|$)”);nmEnabled=nmCookie?nmCookie[2]:null,”true”===nmEnabled?document.body.classList.add(“wp-night-mode-on”):document.body.classList.remove(“wp-night-mode-on”);
</script>
Your WP Night Mode plugin does the exact same, but by adding it in vanilla JS below the body tag, it’s executed immediately on loading the page and you shouldn’t have any FUOC because the plugin doesn’t need to be loaded first. It will only flash the first time the page is loaded, because a cookie needs to be created the first time.
Thank you @ivarvanwooning but we are getting
Uncaught SyntaxError: Invalid or unexpected token
We are using Oxygen, which is not really a theme, but a builder. There is no theme with Oxygen
Maybe there is another way of trying this?
