DOM Background color propagation flickering inheriting initial bg color in Google Chrome using theme toggle to overload body bg color
By the time DOMContentLoaded will fire, the browser may already have painted your page's background.
Here is a demo which does reload the page indefinitely, be sure to click "hide results" when you're done watching it, it may make your computer use some CPU resources (but no network ones).
/*
We use an iframe to avoid making real network requests
Below is the HTML content of this iframe
*/
const content = `<!DOCTYPE html>
<html>
<head>
<style>
/* default bg color */
body { background: red; }
</style>
<script>
document.addEventListener('DOMContentLoaded', e => {
document.body.style.backgroundColor = 'green';
location.reload() // infinite reload...
});
<\/script>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit cursus orci ut maximus. Phasellus pharetra lobortis pellentesque. Pellentesque et lacus et lorem facilisis ultrices. Maecenas sed ultricies nisi. Suspendisse feugiat finibus justo, id consectetur turpis aliquam ac. Proin sit amet laoreet velit. Nullam felis lectus, commodo imperdiet mollis in, ullamcorper eget tortor. Nullam at metus non diam faucibus aliquam. Vestibulum eu maximus risus, vitae elementum justo. Fusce commodo lacus a augue lobortis, quis ornare odio gravida. Quisque ultrices tempus tellus, vitae pulvinar est rutrum in. Duis ante erat, placerat sit amet imperdiet vitae, facilisis non mauris. Integer eu ex sapien.</p>
<p>Morbi porttitor justo eu sodales efficitur. Integer ut suscipit libero, sed dapibus velit. Vestibulum laoreet neque ac odio consequat, a suscipit arcu tristique. Curabitur tempor, nisl eu porttitor feugiat, nibh lorem laoreet massa, ut porta tellus augue accumsan metus. Suspendisse sed venenatis neque. Aliquam non justo in tortor dictum suscipit. Duis eu lectus eu dui placerat luctus. Etiam et volutpat diam, nec ullamcorper tellus. Nullam nibh dui, bibendum a ipsum et, elementum tempor mi. Maecenas ut eros eu sem malesuada tincidunt. Aenean fermentum sit amet augue quis vulputate. Vivamus commodo pellentesque purus rhoncus suscipit. Proin et enim vel ipsum vulputate mollis venenatis ut enim. Curabitur eget velit mollis, luctus sem at, aliquam est. Donec quis elit erat. Nullam facilisis lorem nisl, a luctus purus tristique vel.</p>
<p>Donec in magna at ante mollis sodales ac vitae mauris. Aliquam condimentum ligula nulla, scelerisque cursus neque consequat quis. Fusce vestibulum nisi vitae ipsum venenatis, a pharetra diam tempus. Aenean maximus enim orci, quis mollis neque sollicitudin et. Quisque viverra ipsum vitae magna varius, id ornare justo dictum. Quisque eleifend magna ac congue dignissim. Duis eu volutpat quam, quis placerat tellus. Pellentesque felis mi, imperdiet eu semper vel, hendrerit sit amet ex.</p>
</div>
</body>
</html>
`;
frame.src = URL.createObjectURL(new Blob([content], {type: 'text/html'}));<iframe id="frame" widht="500" height="500"></iframe>To workaround this issue, move your scripts at the top of the <body> and set the initial <body> color from Storage as soon as possible.
You will still be able to wait for the Document is ready before attaching other events.
/*
We use an iframe to avoid making real network requests
Below is the HTML content of this iframe
*/
const content = `<!DOCTYPE html>
<html>
<head>
<style>
/* default bg color */
body { background: red; }
</style>
</head>
<body>
<!-- move inside <body> -->
<script>
// first retrieve from Storage
// const lightModeOn = locaStorage.getItem('lightmode') === "1";
// StackSnippets don't allow Storage...
const lightModeOn = true;
// set directly the body's style, we're in so we don't need to wait, it's already available
document.body.style.backgroundColor = 'green';
// then wait for DOMContentLoaded if you wish to add listeners to other events
document.addEventListener('DOMContentLoaded', e => {
// $('.toggle').on('input', switchLight);
// just to demonstrate it works
location.reload();
});
<\/script>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit cursus orci ut maximus. Phasellus pharetra lobortis pellentesque. Pellentesque et lacus et lorem facilisis ultrices. Maecenas sed ultricies nisi. Suspendisse feugiat finibus justo, id consectetur turpis aliquam ac. Proin sit amet laoreet velit. Nullam felis lectus, commodo imperdiet mollis in, ullamcorper eget tortor. Nullam at metus non diam faucibus aliquam. Vestibulum eu maximus risus, vitae elementum justo. Fusce commodo lacus a augue lobortis, quis ornare odio gravida. Quisque ultrices tempus tellus, vitae pulvinar est rutrum in. Duis ante erat, placerat sit amet imperdiet vitae, facilisis non mauris. Integer eu ex sapien.</p>
<p>Morbi porttitor justo eu sodales efficitur. Integer ut suscipit libero, sed dapibus velit. Vestibulum laoreet neque ac odio consequat, a suscipit arcu tristique. Curabitur tempor, nisl eu porttitor feugiat, nibh lorem laoreet massa, ut porta tellus augue accumsan metus. Suspendisse sed venenatis neque. Aliquam non justo in tortor dictum suscipit. Duis eu lectus eu dui placerat luctus. Etiam et volutpat diam, nec ullamcorper tellus. Nullam nibh dui, bibendum a ipsum et, elementum tempor mi. Maecenas ut eros eu sem malesuada tincidunt. Aenean fermentum sit amet augue quis vulputate. Vivamus commodo pellentesque purus rhoncus suscipit. Proin et enim vel ipsum vulputate mollis venenatis ut enim. Curabitur eget velit mollis, luctus sem at, aliquam est. Donec quis elit erat. Nullam facilisis lorem nisl, a luctus purus tristique vel.</p>
<p>Donec in magna at ante mollis sodales ac vitae mauris. Aliquam condimentum ligula nulla, scelerisque cursus neque consequat quis. Fusce vestibulum nisi vitae ipsum venenatis, a pharetra diam tempus. Aenean maximus enim orci, quis mollis neque sollicitudin et. Quisque viverra ipsum vitae magna varius, id ornare justo dictum. Quisque eleifend magna ac congue dignissim. Duis eu volutpat quam, quis placerat tellus. Pellentesque felis mi, imperdiet eu semper vel, hendrerit sit amet ex.</p>
</div>
</body>
</html>
`;
frame.src = URL.createObjectURL(new Blob([content], {type: 'text/html'}));<iframe id="frame" widht="500" height="500"></iframe><html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<header>
<nav class="menu">
<label for="darkmode"><input type="radio" name="theme" value="1" id="darkmode" class="themechange" />Dark Mode</label>
<label for="lightmode"><input type="radio" checked="checked" name="theme" value="0" class="themechange" id="lightmode" />Light Mode</label>
</nav>
</header>
<div class="content">
<p>CSS (Cascading Style Sheets) is a representation style sheet language used for describing the look and formatting of HTML (Hyper Text Markup Language), XML (Extensible Markup Language) documents and SVG elements including (but not limited to) colors, layout, fonts, and animations. It also describes how elements should be rendered on screen, on paper, in speech, or on other media.</p>
<img src="https://farm8.staticflickr.com/7632/16990947835_3894284fd8_b.jpg">
<p>CSS (Cascading Style Sheets) is a representation style sheet language used for describing the look and formatting of HTML (Hyper Text Markup Language), XML (Extensible Markup Language) documents and SVG elements including (but not limited to) colors, layout, fonts, and animations. It also describes how elements should be rendered on screen, on paper, in speech, or on other media.</p>
<p>CSS (Cascading Style Sheets) is a representation style sheet language used for describing the look and formatting of HTML (Hyper Text Markup Language), XML (Extensible Markup Language) documents and SVG elements including (but not limited to) colors, layout, fonts, and animations. It also describes how elements should be rendered on screen, on paper, in speech, or on other media.</p>
</div>
<style>
nav{background:#ddd; height:40px;}
img{width:350px}
body{margin:0px; padding:0px; color:#111; transition:all 0.5s;}
body.dark{color:#fff; background:#000;}
body.dark nav{background:#cc0000;transition:all 0.5s;}
</style>
<script>
$(function(){
$("#lightmode").click(function(){
$("body").removeClass("dark");
})
$("#darkmode").click(function(){
$("body").addClass("dark");
})
})
</script>
</body>
</html>
Toggle the class name on the selection of theme and add transition:all 0.5s in css code to make transition smooth.