javascript - 通过在窗口就绪时使用 javascript 强制主体更改为背景，防止页面使用主题切换闪烁继承的主体 bg 颜色

Question

我正在尝试使用 javascript 中的本地存储进行主题切换。

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

我的主题将我的网站从深色切换为白色。但是，当您刷新页面或将页面更改为白色时，它会快速闪烁 body 从黑色主题继承的黑色 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;
    }
  }

在亮模式和暗模式下，我设置了 body-bg 颜色。

但是，这并不能足够快地捕获 DOM 或浏览器，并且每次刷新页面或单击页面时白色都会闪烁黑色，因为主题最初是黑色的。我该如何解决这个问题。

谢谢。

Answer 1

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

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

// 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
}

希望对你有所帮助。