Как предотвратить мигание страницы в исходном стиле светлого режима между переходами страницы, когда темный режим активен

Question

Мой код ниже работает 99% пути. Когда переключатель темы включен, веб-сайт меняет все связанные элементы на мои стили темного режима. Darkmode может сохранять свои стили при переходе на разные страницы с помощью файлов cookie.

Проблема, с которой я сталкиваюсь, заключается в том, что при переходе на другую страницу стиль светового режима для страницы мигает в течение доли секунды, прежде чем стиль темного режима снова вступает в силу автоматически. Я считаю, что это проблема загрузки страницы, но у меня проблемы с ее исправлением с помощью кода, который у меня уже есть.

Я пытаюсь сделать так, чтобы темный режим оставался активным от страницы к странице. Чистый переход без fla sh белого или оригинального стиля страницы, который является световым режимом между страницами.

<!-- DARK MODE TOGGLE SWITCH -->

                <div class="theme-switch" id="index-theme-switch">
                  <div class="switch"></div>
                </div>

<!-- /DARK MODE TOGGLE SWITCH -->

Следующий скрипт размещен в моем файле заголовка. php, так что он влияет на все страницы соответственно. Когда переключатель тем переключается, все страницы стилей темного режима применяются к страницам:

<script>


jQuery(document).ready(function($) {
  $(".theme-switch").click(function() {
    $(".theme-switch").toggleClass("active");
    $("body, div#margin-min, ul.menu, .sidenav").toggleClass("dark-theme");
    $.cookie("toggle", $(".theme-switch").hasClass('active'));
  });

  if ($.cookie("toggle") == "true") {
    $(".theme-switch").addClass("active");
    $("body, div#margin-min, ul.menu, .sidenav").addClass("dark-theme");
  }
});



jQuery(document).ready(function($) {
  $(".theme-switch").click(function() {
    $(".theme-switch").toggleClass("active");
    $("div#margin-min").toggleClass("dark-theme-marginmin");
    $.cookie("toggle", $(".theme-switch").hasClass('active'));
  });

  if ($.cookie("toggle") == "true") {
    $(".theme-switch").addClass("active");
    $("div#margin-min").addClass("dark-theme-marginmin");
  }
});



jQuery(document).ready(function($) {
  $(".theme-switch").click(function() {
    $(".theme-switch").toggleClass("active");
    $("p.uppercase, .page-id-536 li p, .page-id-91 p").toggleClass("dark-theme-description");
    $.cookie("toggle", $(".theme-switch").hasClass('active'));
  });

  if ($.cookie("toggle") == "true") {
    $(".theme-switch").addClass("active");
    $("p.uppercase, .page-id-536 li p, .page-id-91 p").addClass("dark-theme-description");
  }
});



jQuery(document).ready(function($) {
  $(".theme-switch").click(function() {
    $(".theme-switch").toggleClass("active");
    $("i.sf-icon-star-full, .page-id-536 i.sf-icon-star-full").toggleClass("dark-theme-star");
    $.cookie("toggle", $(".theme-switch").hasClass('active'));
  });

  if ($.cookie("toggle") == "true") {
    $(".theme-switch").addClass("active");
    $("i.sf-icon-star-full, .page-id-536 i.sf-icon-star-full").addClass("dark-theme-star");
  }
});


jQuery(document).ready(function($) {
  $(".theme-switch").click(function() {
    $(".theme-switch").toggleClass("active");
    $("div.cell").toggleClass("dark-theme-cellborder");
    $.cookie("toggle", $(".theme-switch").hasClass('active'));
  });

  if ($.cookie("toggle") == "true") {
    $(".theme-switch").addClass("active");
    $("div.cell").addClass("dark-theme-cellborder");
  }
});



jQuery(document).ready(function($) {
  $(".theme-switch").click(function() {
    $(".theme-switch").toggleClass("active");
    $("li.menu-item").toggleClass("dark-theme-sitenavborder");
    $.cookie("toggle", $(".theme-switch").hasClass('active'));
  });

  if ($.cookie("toggle") == "true") {
    $(".theme-switch").addClass("active");
    $("li.menu-item").addClass("dark-theme-sitenavborder");
  }
});



jQuery(document).ready(function($) {
  $(".theme-switch").click(function() {
    $(".theme-switch").toggleClass("active");
    $(".left a, ul.menu").toggleClass("dark-theme-navlinks");
    $.cookie("toggle", $(".theme-switch").hasClass('active'));
  });

  if ($.cookie("toggle") == "true") {
    $(".theme-switch").addClass("active");
    $(".left a, ul.menu").addClass("dark-theme-navlinks");
  }
});



jQuery(document).ready(function($) {
  $(".theme-switch").click(function() {
    $(".theme-switch").toggleClass("active");
    $("span.btn-bg, span.inner").toggleClass("dark-theme-buttons");
    $.cookie("toggle", $(".theme-switch").hasClass('active'));
  });

  if ($.cookie("toggle") == "true") {
    $(".theme-switch").addClass("active");
    $("span.btn-bg, span.inner").addClass("dark-theme-buttons");
  }
});



jQuery(document).ready(function($) {
  $(".theme-switch").click(function() {
    $(".theme-switch").toggleClass("active");
    $(".navbar").toggleClass("dark-theme-mobile-navbar");
    $.cookie("toggle", $(".theme-switch").hasClass('active'));
  });

  if ($.cookie("toggle") == "true") {
    $(".theme-switch").addClass("active");
    $(".navbar").addClass("dark-theme-mobile-navbar");
  }
});



jQuery(document).ready(function($) {
  $(".theme-switch").click(function() {
    $(".theme-switch").toggleClass("active");
    $(".site-searchform input").toggleClass("dark-theme-search-input");
    $.cookie("toggle", $(".theme-switch").hasClass('active'));
  });

  if ($.cookie("toggle") == "true") {
    $(".theme-switch").addClass("active");
    $(".site-searchform input").addClass("dark-theme-search-input");
  }
});



jQuery(document).ready(function($) {
  $(".theme-switch").click(function() {
    $(".theme-switch").toggleClass("active");
    $(".color-cat0 a, .color-cat01 a, .color-cat2 a, .color-cat3 a, .color-cat4 a, .color-cat5 a, .color-cat6 a, .color-cat7 a, .color-cat8 a, .color-cat9 , .color-cat10 a, .color-cat11 a, .color-cat12 a, .color-cat13 a, .color-cat14 a, .color-cat15 a, .color-cat16 a").toggleClass("dark-theme-nav-pointer");
    $.cookie("toggle", $(".theme-switch").hasClass('active'));
  });

  if ($.cookie("toggle") == "true") {
    $(".theme-switch").addClass("active");
    $(".color-cat0 a, .color-cat01 a, .color-cat2 a, .color-cat3 a, .color-cat4 a, .color-cat5 a, .color-cat6 a, .color-cat7 a, .color-cat8 a, .color-cat9 , .color-cat10 a, .color-cat11 a, .color-cat12 a, .color-cat13 a, .color-cat14 a, .color-cat15 a, .color-cat16 a").addClass("dark-theme-nav-pointer");
  }
});



</script>

CSS для темного режима:

 .theme-switch .switch {
   background: white;
   width: 15px;
   height: 15px;
   background: var(--background);
   border-radius: 100%;
   position: absolute;
   top: 3px;
   left: 3px;
   transition: 0.5s all ease;
}

 .dark-theme {
   --background: #fff;
   --text: #000;
   background-color: var(--darkbackground) !important;
}

.dark-theme-marginmin {
   --background: #fff;
   --text: #000;
   border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
   background-color: var(--darkbackground) !important;
}

 .dark-theme-description {
 color: #d1d1d1 !important;
}

 .dark-theme-cellborder {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.2) !important;
 }

 .dark-theme-sitenavborder {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
 }

 .dark-theme-navlinks {

 }

 .dark-theme-buttons {
   --background: #fff;
   --text: #000;
   background-color: var(--darkbackground) !important;
   color: grey !important;
   border-color: grey !important;
}

 .dark-theme .theme-switch {
   background: var(--text);
}

 .dark-theme .theme-switch .switch {
   transform: translateX(14px);
}

 .dark-theme-star {
color: grey !important;
}

@media screen and (max-width: 768px) {
.dark-theme-mobile-navbar {
   --background: #fff;
   --text: #000;
   background-color: var(--darkbackground) !important;
}
}

.dark-theme-search-input[type=text]:focus {
    background-color: #d1d1d1 !important;
}

.dark-theme-nav-pointer:hover:after {           /* Nav Hover Pointer*/
      border-right-color: var(--darkbackground) !important;
}

.dark-theme-nav-pointer:after {           /* Nav Hover Pointer*/
      border-right-color: var(--darkbackground) !important;
}

Answer 1

Я считаю, что это проблема загрузки страницы

Вы частично правы. Да, это связано с загрузкой страницы, и JavaScript не запускается до начального рисования страницы. Однако вы не можете надежно решить эту проблему с помощью внешнего кода. Так как начальное рисование экрана может произойти до того, как ваш javascript сможет выполнить из-за подробностей реализации браузера c.

Я бы рекомендовал ввести необходимые стили для каждой темы. на вашем сервере и отправьте стили вашей темы как встроенные css. Предпочтительно со свойством background, установленным на фактическом теле, чтобы позволить браузеру закрасить фон на первоначальном макете соответствующим цветом. Таким образом, когда пользователь нажимает на тумблер, вы отправляете HTTP-запрос на сервер, сообщая ему об обновленной настройке темы. Затем вы можете использовать JavaScript для немедленного применения темы (так же, как вы это делаете сейчас), но сервер (если вы ее реализовали) будет проверять правильность применения темы по умолчанию при следующей загрузке страницы.

Примечание: Если вы используете кэш браузера для ускорения загрузки страницы, вам может понадобиться отсканировать файл html, чтобы убедиться, что он обновляется при обновлении темы изменения.

Применение темы в JavaScript

document.body.style.backgroundColor = "black";
document.querySelectorAll('h1').forEach(el => {
  el.style.color = 'white';
});

<document>
  <body>
    <h1>Dark theme applied with js</h1>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!--Above import are for simluated load times of vendor libraries-->
  <script src="#">/*pretend inport for our script*/</script>
</document>

Применение встроенной темы в качестве стилей, отображаемых на сервере

<document>
  <head>
    <style>
    body {
      background: black;
    }
    h1 {
      color: white;
    }
    </style>
  </head>
  <body>
    <h1>Dark theme applied with inline styles</h1>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!--Above import are for simluated load times of vendor libraries-->
  <script src="#">/*pretend inport for our script*/</script>
</document>