I'm currently working on a theme toggle for my website that uses Javascript / jQuery to manipulate the Body.bg color using a lightmode()/ darkmode() function that is toggled by a button. What I want to do is create seamless transitioning between the body bg color with fade in and fade outs. I already have that made and created, but the problem is when the theme reads the storage type it will blink quickly in Chrome and Chrome Canary but in Safari, and Safari Tech Preview for Catalina it works seamlessly.
However, I keep running into an issue when the user switches to white and then clicks on the nav link which then causes a black blink of the dark mode theme. My site starts with dark mode enabled and body bg is = #0a0a0a, but when it switches to white and the storage is updated, it still inherits the black body - bg that is initially set in the style.less of my theme.
If I remove the background color, then the white flicker happens on the dark mode theme, and ideally my end goal is to create seamless page navigation without the page blinking for a quick second reading the initial bg color before the body loads so - white on white bg, black on black bg no blinking to cause visual disruption.
I've tried every work around I could come up with and can't figure out a solution. It works in Safari with no page blinking, but in Chrome it still blinks. I've included video links showing what I want to accomplish with the Safari render for Google chrome and the main.js code file.
Safari - seamless transitioning
Chrome and Chrome Canary - watch for the blink on white transition. It's quick but super frustrating.
So what's going on?! The problem is the theme is now set to white, but the initial body - bg color is black in the style.less theme and it picks that up real quick before snapping back to the white theme.
When I audit the site in Canary, and run it at slow 3G simulated there is no blink, but when it ran normally or at Fast 3G in the audit the blink occurs. My hypothesis is to set a timeout on the body before loading it, but I tried that as a work around and still got blinking.
I've tried to create key stored in local storage for my storage and to also pause the body from loading, but so far I can't find a solution to this :/
So what I want to do is to stop the body bg color from flickering white or black based off the theme colors base color without blinking.
Thanks for taking the time to read my problem!
document.addEventListener("DOMContentLoaded", function() {
document.body.style.backgroundColor = "inherit";
if (document.readyState === 'complete') {
if(lightmodeON == true) {
$('body').css({background: "#FFF"});
console.log('loading white bg');
}
if(lightmodeON == false) {
$('body').css({background: "#0a0a0a"});
console.log('loading black bg');
}
}
if (typeof (Storage) !=="undefined") {
if (localStorage.themepref == 1 ) {
lightmode();
}
else {
darkmode();
localStorage.themepref = 2;
}
if(lightmodeON == true) {
$('body').css({background: "#FFF"});
console.log('loading fffwhite bg');
}
if(lightmodeON == false) {
$('body').css({background: "#0a0a0a"});
console.log('loading black bg');
}
}
Here is my version of trying to make a work around.
var clickDelay = false;
var themeType = -1;
var lightmodeON = false;
window.onload = function() {
console.log('First');
if (event.target.readyState === 'interactive') {
$('body').css({ background: ''});
document.body.style.backgroundColor = "inherit";
if(lightmodeON == true) {
$('body').css({background: "#FFF"});
document.body.style.backgroundColor = "#FFF";
}
if(lightmodeON == false) {
$('body').css({background: "#0a0a0a"});
document.body.style.backgroundColor = "#0a0a0a";
}
}
overloadBG();
};
document.addEventListener("DOMContentLoaded", function() {
document.body.style.backgroundColor = "inherit";
if (document.readyState === 'complete') {
if(lightmodeON == true) {
$('body').css({background: "#FFF"});
console.log('loading white bg');
}
if(lightmodeON == false) {
$('body').css({background: "#0a0a0a"});
console.log('loading black bg');
}
}
if (typeof (Storage) !=="undefined") {
if (localStorage.themepref == 1 ) {
lightmode();
}
else {
darkmode();
localStorage.themepref = 2;
}
if(lightmodeON == true) {
$('body').css({background: "#FFF"});
console.log('loading fffwhite bg');
}
if(lightmodeON == false) {
$('body').css({background: "#0a0a0a"});
console.log('loading black bg');
}
}
});
window.addEventListener('beforeunload', function (e) {
$('body').css({ background: ''});
if(lightmodeON == true) {
$('body').css({background: "#FFF"});
document.body.style.backgroundColor = "#FFF";
}
if(lightmodeON == false) {
$('body').css({background: "#0a0a0a"});
document.body.style.backgroundColor = "#0a0a0a";
}
document.body.style.backgroundColor = "inherit";
overloadBG();
});
window.onbeforeunload = function () {
//FUCK YOU BLINK
//$('body').css({ background: 'none'});
$('body').css({ background: ''});
document.body.style.backgroundColor = "";
if (typeof (Storage) !=="undefined") {
if (localStorage.themepref == 1 ) {
localStorage.themepref = 1;
lightmode();
}
else {
darkmode();
localStorage.themepref = 2;
}
}
}
document.onreadystatechange = function() {
$('body').css({ background: ''});
document.body.style.backgroundColor = "transparent";
if (event.target.readyState === 'interactive') {
console.log('interactive');
if(lightmodeON === true) {
$('body').css({background: "#FFF"});
}
if(lightmodeON === false) {
$('body').css({background: "#0a0a0a"});
}
}
if (event.target.readyState === 'loading') {
$('body').css({ background: ''});
if(lightmodeON == true) {
$('body').css({background: "#FFF"});
$("body").css("cssText", "background: #FFF !important;");
}
if(lightmodeON == false) {
$('body').css({background: "#0a0a0a"});
$("body").css("cssText", "background: #0a0a0a !important;");
}
}