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?
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:
- Create two pre-loader elements: One with a white background for the light theme and another with a dark background for the dark theme.
- 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);
Awesome Ben! I will give this a spin!
Ok, I'm attempting to get this to work and am running into issues. Ie not working lol. So I put all of that code in script tag in the head section of the page. Is that correct? Or do I need to call the whole script on page load? Or are there several scripts there that need to be separate? Ie certain parts called on page load and other when detected change of dark/light?
Do I need to name the preloaders as light /dark or how does it tell the differences?
I created a test page to take out other variables. My other pages are more complex and have user authentication so I just built a quick isolated test page. Just a switch to switch between light/dark modes:https://bandboozle.me/preloadertest.aspx
Here is my actual page source.
<!doctype html>
<html>
<head>
<base href="/">
<script src="dmxAppConnect/dmxAppConnect.js"></script>
<meta charset="UTF-8">
<title>Pre-Loader Test</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap/5/yeti/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="dmxAppConnect/dmxBootstrap5Theme/dmxBootstrap5Theme.js" defer></script>
<link rel="stylesheet" href="dmxAppConnect/dmxPreloader/dmxPreloader.css" />
<script src="dmxAppConnect/dmxPreloader/dmxPreloader.js" defer></script>
<script>
// 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);
</script>
</head>
<body is="dmx-app" id="preloadertest" dmx-on:load="">
<section id="Components">
<dmx-preloader id="preloader1" color="#000000" bgcolor="#ffffff" size="200" spinner="wave"></dmx-preloader>
<dmx-preloader id="preloader2" color="#ffffff" bgcolor="#000000" size="200" spinner="wave"></dmx-preloader>
<div is="dmx-bs5-theme" id="bs5theme1"></div>
</section>
<div class="container mt-2">
<div class="row">
<div class="col">
<h1>Pre-Loader dark/light test page</h1>
</div>
</div>
<div class="row">
<div class="col">
<div is="dmx-bs5-theme-switch" id="bs5themeswitch1" manager="bs5theme1"></div>
<p>Dark/Light Theme Switch</p>
</div>
</div>
</div>
<script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
My apologies @baub, I did not test the earlier version. Try this instead:
<!doctype html>
<html>
<head>
<base href="/">
<script src="/dmxAppConnect/dmxAppConnect.js"></script>
<meta charset="UTF-8">
<title>Pre-Loader Test</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="/bootstrap/5/yeti/bootstrap.min.css" />
<link rel="stylesheet" href="/css/style.css" />
<script src="/dmxAppConnect/dmxBootstrap5Theme/dmxBootstrap5Theme.js" defer></script>
<link rel="stylesheet" href="/dmxAppConnect/dmxPreloader/dmxPreloader.css" />
<script src="/dmxAppConnect/dmxPreloader/dmxPreloader.js" defer></script>
<script>
// Function to check the current theme mode
function getCurrentTheme() {
return document.body.classList.contains('dark-mode') ? 'dark' : 'light';
}
// Function to set the pre-loader based on the theme
function setPreLoader(theme) {
if (theme === 'dark') {
document.getElementById('light-preloader').style.display = 'none';
document.getElementById('dark-preloader').style.display = 'block';
} else {
document.getElementById('light-preloader').style.display = 'block';
document.getElementById('dark-preloader').style.display = 'none';
}
}
// Detect the current theme and set the pre-loader
window.onload = function() {
const currentTheme = document.documentElement.getAttribute('data-bs-theme');
setPreLoader(currentTheme);
};
// Update the pre-loader when the theme changes
document.documentElement.addEventListener('change', function(event) {
if (event.target.getAttribute('data-bs-theme')) {
setPreLoader(event.target.getAttribute('data-bs-theme'));
}
});
</script>
</head>
<body is="dmx-app" id="preloadertest" dmx-on:load="">
<div is="dmx-bs5-theme" id="bs5theme1" theme="dark"></div>
<section id="Components">
<dmx-preloader id="light-preloader" color="#000000" bgcolor="#ffffff" size="200" spinner="wave"></dmx-preloader>
<dmx-preloader id="dark-preloader" color="#ffffff" bgcolor="#000000" size="200" spinner="wave"></dmx-preloader>
</section>
<div class="container mt-2">
<div class="row">
<div class="col">
<h1>Pre-Loader dark/light test page</h1>
</div>
</div>
<div class="row">
<div class="col">
<div is="dmx-bs5-theme-switch" id="bs5themeswitch1" manager="bs5theme1"></div>
<p>Dark/Light Theme Switch</p>
</div>
</div>
</div>
<script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
1 Like
That did the trick! Thanks!
1 Like