Page pre-loader with light/dark mode

Wappler General Need Help
1

I have a site setup with the theme manager. The pre-loader has a white background. But that doesn't work on the dark pages, how do you queue the logic so that it loads two different pre-loaders pending on which mode it in?

3

You can use JavaScript to dynamically load the appropriate pre-loader based on the current theme mode (light or dark). Here's a general approach:

  1. Create two pre-loader elements: One with a white background for the light theme and another with a dark background for the dark theme.
  2. Add JavaScript logic: Use JavaScript to detect the current theme mode and load the appropriate pre-loader.

The JS:

// Function to check the current theme mode
function getCurrentTheme() {
    return document.body.classList.contains('dark-mode') ? 'dark' : 'light';
}

// Function to load the appropriate pre-loader
function loadPreLoader() {
    const theme = getCurrentTheme();
    const preLoader = document.getElementById('pre-loader');
    
    if (theme === 'dark') {
        preLoader.classList.add('dark-theme');
        preLoader.classList.remove('light-theme');
    } else {
        preLoader.classList.add('light-theme');
        preLoader.classList.remove('dark-theme');
    }
}

// Call the function on page load and theme change
document.addEventListener('DOMContentLoaded', loadPreLoader);
window.addEventListener('themeChange', loadPreLoader);
4

Awesome Ben! I will give this a spin!