Стили на короткое время исчезают при переключении с таблицы стилей на другую

Question

У меня есть 3 таблицы стилей: - глобальная для позиционирования и прочего - цветовые стили темного режима - цветовые стили светлого режима

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

Моим первым методом была прямая загрузка двух таблиц стилей и присвоение атрибута disabled второму.

<link rel="stylesheet" type="text/css" href="dark.css">
<link rel="stylesheet" type="text/css" href="light.css" disabled>

Но по неизвестным причинам он не переключался при добавленииили удалив этот атрибут.

Итак, я изменил эту технику:

<link rel="stylesheet" type="text/css" href="dark.css" id="theme">
<link rel="preload" href="light.css" as="style">

document.getElementById("toggle_button").addEventListener("click",function(){
  if(e.href.match("dark\.css")) {
    e.href = "light.css";
    this.innerText = "☾ Invert contrasts";
    this.setAttribute("aria-label", "Invert contrasts - White text, black background");
  } else {
    e.href = "dark.css";
    this.innerText = "☼ Invert contrasts";
    this.setAttribute("aria-label", "Invert contrasts - Black text, white backround");
  }
},false);

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

Что мне делать?

Спасибо :))