I have a data-theme that contains a lot of modifications to the original CSS theme. I already have a toggle switch working and I save it to localStorage so it can be remembered. However, whenever I go between pages with the dark-theme already enabled, it loads the original theme first but applies the dark-theme after the whole page has loaded. I want this transition between pages to be seamless.
I am using Node.js and express for the web application.
My data-theme modification is about 200 lines long. Here's a short snippet of the data-theme:
[data-theme="dark"] html {
background-color: #111111 !important;
transition: 0.3s;
}
[data-theme="dark"] .bg-light {
background-color: #333 !important;
transition: 0.3s;
}
[data-theme="dark"] .bg-white {
background-color: #000 !important;
transition: 0.3s;
}
[data-theme="dark"] .bg-black {
background-color: #eee !important;
transition: 0.3s;
}
[data-theme="dark"] .topbar {
background-color: #2196f3 !important;
color: #2a1e37 !important;
transition: 0.3s;
}
[data-theme="dark"] .btn {
background-color: #2196f3 !important;
border: 1px solid #2196f3 !important;
color: #2a1e37 !important;
transition: 0.3s;
}
etc. It goes on for most of my elements.
An example of my problem is shown in this short gif:
https://gyazo.com/d53e12b7b5ea5215659a59a67639ba37
Currently, I have a script that determines whether or not to apply the dark theme or light theme in the tag.
function initTheme() {
console.log("initTheme() invoked!");
var darkThemeSelected =
localStorage.getItem("darkSwitch") !== null &&
localStorage.getItem("darkSwitch") === "dark";
darkThemeSelected
? document.body.setAttribute("data-theme", "dark")
: document.body.removeAttribute("data-theme");
if (darkThemeSelected){
document.getElementById("darkModeText").innerHTML=`Turn Lights On`;
document.getElementById("darkModeIcon").className="zmdi zmdi-brightness-5";
}
else {
document.getElementById("darkModeText").innerHTML=`Turn Lights Off`;
document.getElementById("darkModeIcon").className="zmdi zmdi-brightness-3";
}
}
As you can see though, I am modifying some elements that do not exist yet since they exist in the body. How can I achieve the dark-theme prior to loading it? I am using node.js and express.
You can disable transition when initializing page
var element = document.getElementById('body'); function toggleTransition() { element.classList.toggle('dark'); } function toggleNoTransition() { element.classList.add('disabled-transition'); element.classList.toggle('dark'); setTimeout(function() { element.classList.remove('disabled-transition'); }, 300) }
.body { background: white; width: 100%; height: 100px; padding: 20px; transition: 0.3s; }.btn { background-color: black; border: 1px solid black; color: white; transition: 0.3s; }.dark.body { background: black; transition: 0.3s; }.dark.btn { background-color: #2196f3;important: border; 1px solid #2196f3:important; color: #2a1e37.important; transition. 0,3s. }:disabled-transition; .disabled-transition * { transition: none !important; }
<div id="body" class="body"> <button onClick="toggleTransition()" class="btn">toggle tranisition</button> <button onClick="toggleNoTransition()" class="btn">toggle no-tranisition</button> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.