Как загрузить CSS тему данных до загрузки начальной страницы, чтобы избежать мерцания между темами?

Question

У меня есть тема данных, которая содержит много модификаций оригинальной темы CSS. У меня уже работает тумблер, и я сохраняю его в localStorage, чтобы его можно было запомнить. Однако всякий раз, когда я go между страницами с уже включенной темной темой, он сначала загружает исходную тему, но применяет темную тему после загрузки всей страницы. Я хочу, чтобы этот переход между страницами был плавным.

Я использую Node.js и express для веб-приложения.

Моя модификация темы данных имеет длину около 200 строк. Вот короткий фрагмент темы данных:

[data-theme="dark"] html {
  background-color: #111111 !important;
  transition: 0.3s;
}

[data-theme="dark"] .bg-light {
  background-color: #333 !important;
  transition: 0.3s;
}

[data-theme="dark"] .bg-white {
  background-color: #000 !important;
  transition: 0.3s;
}

[data-theme="dark"] .bg-black {
  background-color: #eee !important;
  transition: 0.3s;
}

[data-theme="dark"] .topbar {
  background-color: #2196f3 !important;
  color: #2a1e37 !important;
  transition: 0.3s;
}

[data-theme="dark"] .btn {
  background-color: #2196f3 !important;
  border: 1px solid #2196f3 !important;
  color: #2a1e37 !important;
  transition: 0.3s;
}

et c. Это продолжается для большинства моих элементов.

Пример моей проблемы показан в этом коротком GIF:

https://gyazo.com/d53e12b7b5ea5215659a59a67639ba37

В настоящее время у меня есть скрипт, который определяет, применять ли темную тему или светлую тему в теге.

function initTheme() {
      console.log("initTheme() invoked!");
    var darkThemeSelected =
      localStorage.getItem("darkSwitch") !== null &&
      localStorage.getItem("darkSwitch") === "dark";

    darkThemeSelected
      ? document.body.setAttribute("data-theme", "dark") 
      : document.body.removeAttribute("data-theme");

    if (darkThemeSelected){
      document.getElementById("darkModeText").innerHTML=`Turn Lights On`;
      document.getElementById("darkModeIcon").className="zmdi zmdi-brightness-5";
    }
    else {
      document.getElementById("darkModeText").innerHTML=`Turn Lights Off`;
      document.getElementById("darkModeIcon").className="zmdi zmdi-brightness-3";
    }
  }

Как вы можете видеть, я модифицирую некоторые элементы, которые еще не существуют, поскольку они существуют в теле. Как я могу достичь темной темы до ее загрузки? Я использую node.js и express.

Answer 1

Вы можете отключить переход при инициализации страницы

var element = document.getElementById('body');

function toggleTransition() {
  element.classList.toggle('dark');
}

function toggleNoTransition() {
  element.classList.add('disabled-transition');
  element.classList.toggle('dark');
  setTimeout(function() {
    element.classList.remove('disabled-transition');
  }, 300)
}

.body {
  background: white;
  width: 100%;
  height: 100px;
  padding: 20px;
  transition: 0.3s;
}
.btn {
  background-color: black;
  border: 1px solid black;
  color: white;
  transition: 0.3s;
}

.dark.body {
  background: black;
  transition: 0.3s;
}

.dark .btn {
  background-color: #2196f3 !important;
  border: 1px solid #2196f3 !important;
  color: #2a1e37 !important;
  transition: 0.3s;
}

.disabled-transition,
.disabled-transition * {
  transition: none !important;
}

<div id="body" class="body">
  <button onClick="toggleTransition()" class="btn">toggle tranisition</button>
  <button onClick="toggleNoTransition()" class="btn">toggle no-tranisition</button>
</div>