blockifywp/theme

Dark Mode enabling even though default is light mode

Opened this issue · 5 comments

In the editor it shows up as light mode which is the correct depiction. User preference settings are also light mode.

When deployed: default shows as dark mode. When i toggle the button once it stays dark mode but when i toggle it again it goes back to light mode.

This only became an issue after I did an update yesterday, did something recently change?

Alternetively how can I remove dark mode entirely the existing instructions don't seem to work

Adding my two cents: after a theme update on a website I help manage, Dark Mode was suddenly enabled. The docs claim that Dark Mode can be disable easily sitewide, but the settings are nowhere to be found. Not even in the post or page editor.

@leonmelein Same issue. Can't find any settings on how to disable dark mode..

From what I can tell, all the dark / light mode toggle does , is add / remove a class name from the body, along with setting and updating a cookie in your browser. Check to see if that cookie is present , if so , remove it and it should always default to light mode

Screenshot 2024-05-21 at 10 52 03 AM
Screenshot 2024-05-21 at 10 51 01 AM

could we please find a solution to this for the free theme? The edit-on-click event won't solve this because the theme is responsive to device settings?

I found a way. Added a custom html block to the header with the following:

<script type="text/javascript"> document.addEventListener('DOMContentLoaded', function() { // Function to delete a cookie by name function deleteCookie(name) { document.cookie = name + '=; Max-Age=0; path=/; domain=' + window.location.hostname; } // Check if the dark mode cookie exists var cookies = document.cookie.split('; '); for (var i = 0; i < cookies.length; i++) { var cookie = cookies[i]; if (cookie.indexOf('blockifyDarkMode=') === 0) { // Remove the dark mode cookie deleteCookie('blockifyDarkMode'); break; } } // Add 'is-style-light' class to the body document.body.classList.add('is-style-light'); }); </script>