防止页面闪烁继承的正文 bg 颜色与主题切换，方法是强制正文在窗口准备就绪时使用 javascript 更改为背景

Question

我正在尝试在javascript中使主题与本地存储切换。

我的问题： 当从主题更改为深色再到白色，然后单击到新页面时。主题会很快闪烁，因为基本主题正文 bg 是黑色的。但是，我已经尝试删除两个背景并在javascript中实现它们，但是其中一个仍然会在浅色主题上出现黑色闪烁，或者白色闪烁或深色主题。

我的主题将我的网站从深色切换到白色。但是，当您刷新页面或将页面更改为白色时，它会快速闪烁身体从黑色主题继承的黑色 bg 颜色，然后再坚持白色主题。我试图做到这一点，当您在主题和页面之间过渡时，可以无缝过渡，而不会在受人尊敬的主题颜色上背景闪烁黑色或白色。

目前，我的代码是这样的：

function checkBG() {
//REDUCE FLICKER ON PAGE CHANGE
if(lightmodeON = true) {
console.log('loading white bg');
}
if(lightmodeON = false) {
console.log('loading black bg');
}
if(window.matchMedia('(prefers-color-scheme: dark)').matches && localStorage.themepref == 2 ) {
darkmode();
console.log("OS Setting DARK MODE");
}
if (window.matchMedia("(prefers-color-scheme: light)").matches && localStorage.themepref == 1 ) {
lightmode();
console.log("OS Setting LIGHT MODE");
}
if(window.matchMedia('(prefers-color-scheme: dark)').matches && localStorage.themepref == "undefined" ) {
darkmode();
console.log("OS Setting DARK MODE");
}
if (window.matchMedia("(prefers-color-scheme: light)").matches && localStorage.themepref == "undefined" ) {
lightmode();
console.log("OS Setting LIGHT MODE");
}
};
$(window).ready(function($) {
checkBG();
$(window).scrollTop( $("#top").offset().top );
$(document).scrollTop(0);
if (typeof (Storage) !=="undefined") {
if (localStorage.themepref == 1 ) {
lightmode();
}
else {
darkmode();
localStorage.themepref = 2;
}
}

在浅色模式和暗模式下，我设置了身体-bg颜色。

但是，这并不能足够快地捕获 DOM 或浏览器，并且每次页面刷新或页面单击都会闪烁黑色，因为主题最初是黑色的。我怎样才能为此做适当的工作。

谢谢。

Answer 1

一种解决方案是在head末尾设置script，而不是等待页面加载使用$(window).ready.然后它将在渲染之前准备好background样式body。

另一个细节。由于script运行时不存在body，因此您可以使用lightmode()和darkmode()在head末尾创建包含background属性的styletag，如下所示：

// you make your checkings, and call lightmode() or darkmode()
function applyBackgroundTheme(color) {
var css = "body { background: " + color + "; }",
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
head.appendChild(style);
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
lightmode() {
applyBackgroundTheme("white") // color for light mode
}
darkmode() {
applyBackgroundTheme("black") // color for light mode
}

希望它以某种方式有所帮助。