The default setup for the BajanThings website is Light mode.

BajanThings have now implemented a Dark mode toggle switch in the header and footer. Initially it was only provided in the footer. You can try it out the toggle switch below:

One of our readers reached out with a request: Was there a way to force BajanThings into Dark mode? She explaining that her eyes had deteriorated and had become extremely sensitive to light and that she now relies on dark mode when browsing websites.

The toggle switch in the header and footer does two things, it:

• detects if your browser is by default set to Dark mode and if so will automatically swap BajanThings into Dark mode and
• allows you to manually swap from the default Light mode into Dark mode. Simply click on the toggle switch to swap to Dark mode. To swap back to Light mode click on the switch again. It’s as simple as that.

Initially the Dark Mode magic was provided by the Dracula Dark Mode plugin by SoftLab. We have now swapped to WP Dark Mode By WPPOOL.

There was a clash with Dracula Dark Mode and Meow Lightbox. There is still a clash with WP Dark Mode and Meow Lightbox, however, it’s not as severe.

The issue is that Meow Lightbox displays individual images from a gallery on a dark background. This did not work with Dracula Dark Mode where the dark Meow Lightbox background was made light so the white text and forward and backward navigation icons merged into the background and became invisible. With WP Dark Mode when in Light mode the Meow Lightbox dark background is retained as are the forward and backward icons merge. However, when in Dark mode using WP Dark Mode, the forward and backward icons merge into the dark background on both desktop and mobile view. This is unfortunately a limitation of the free version of WP Dark Mode. Our work-around for this is making the Meow Lightbox .mwl__navigation__previous, and .mwl__navigation__next buttons visible in Dark Mode has been a snippet (written with the help of ChatGPT):

/**
 * Fix Meow Lightbox navigation buttons visibility in WP Dark Mode (free version)
 */
function fix_meow_lightbox_nav_dark_mode() {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {

      function fixLightboxNav() {
        document.querySelectorAll('.mwl__navigation__previous, .mwl__navigation__next').forEach(function(btn) {
          if (!btn.dataset.fixed) {
            // Force strong background and shadow
            btn.style.backgroundColor = '#ffffff';
            btn.style.borderRadius = '50%';
            btn.style.padding = '12px';
            btn.style.boxShadow = '0 6px 20px rgba(0,0,0,0.7)';
            btn.style.filter = 'none';
            btn.style.mixBlendMode = 'normal';
            btn.style.opacity = '1';
            btn.style.position = 'absolute';
            btn.style.top = '50%';
            btn.style.transform = 'translateY(-50%)';
            btn.style.zIndex = '9999';
            
            // Anchor left/right
            if (btn.classList.contains('mwl__navigation__previous')) {
              btn.style.left = '0';
            } else {
              btn.style.right = '0';
            }

            // Force SVG path color
            const svgPath = btn.querySelector('svg path');
            if (svgPath) {
              svgPath.style.fill = '#000000';
              svgPath.style.stroke = 'none';
            }

            btn.dataset.fixed = '1'; // mark as fixed so we don’t repeatedly apply
          }
        });
      }

      // Run on load
      fixLightboxNav();

      // Observe for dynamically added nav elements
      const observer = new MutationObserver(fixLightboxNav);
      observer.observe(document.body, { childList: true, subtree: true });
    });
    </script>
    <?php
}
add_action('wp_footer', 'fix_meow_lightbox_nav_dark_mode');