Загрузите темную тему с JS перед загрузкой страницы

Question

Я работаю над переключателем темного освещения для моего сайта, но столкнулся с проблемой. Я должен быть честным: я не знаю много о JS, поэтому код, который вы здесь увидите, вероятно, очень уродливый и грязный. Я просто скопировал несколько фрагментов, которые нашел в Интернете.

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

Вот скрипка с кодом: https://jsfiddle.net/zsoltszilvai/qctpyo2s/3/

console.clear();

let trans = () => {
  document.documentElement.classList.add('transition');
  window.setTimeout(() => {
    document.documentElement.classList.remove('transition');
  }, 1000)
}

var checkbox = document.querySelector('input');

var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {};

$checkboxes = $(":checkbox");

$checkboxes.on("change", function() {
  $checkboxes.each(function() {
    checkboxValues[this.id] = this.checked;
    //console.log(this.checked);
  });
  localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
});

$.each(checkboxValues, function(key, value) {
  $("#" + key).prop('checked', value);
  if ($('#' + key).attr('name') == 'mode') {
    if (value) {
      trans();
      document.documentElement.setAttribute('data-theme', 'dark')
    } else {
      trans();
      document.documentElement.setAttribute('data-theme', 'light')
    }
  }
});



/* DARK MODE */


var checkbox = document.querySelector('input[name=mode]');

checkbox.addEventListener('change', function() {
  if (this.checked) {
    trans()
    document.documentElement.setAttribute('data-theme', 'dark')
  } else {
    trans()
    document.documentElement.setAttribute('data-theme', 'light')
  }
})

Кто-то упомянул, что я мог бы попытаться вставить JS-код в голову - что считаетсябыть плохой практикойЯ все равно попробовал, но по какой-то причине это не сработало.

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

Answer 1

Я нашел этот урок, который решает проблему: https://derekkedziora.com/blog/dark-mode

В заголовке:

const theme = localStorage.getItem('theme');
if (theme === "dark") {
document.documentElement.setAttribute('data-theme', 'dark');
}

В нижней части страницы:

const userPrefers = getComputedStyle(document.documentElement).getPropertyValue('content'); 

if (theme === "dark") {
    document.getElementById("theme-toggle").innerHTML = "Light Mode";
} else if (theme === "light") {
    document.getElementById("theme-toggle").innerHTML = "Dark Mode";
} else if  (userPrefers === "dark") {
    document.documentElement.setAttribute('data-theme', 'dark');
    window.localStorage.setItem('theme', 'dark');
    document.getElementById("theme-toggle").innerHTML = "Light Mode";
} else {
    document.documentElement.setAttribute('data-theme', 'light');
    window.localStorage.setItem('theme', 'light');
    document.getElementById("theme-toggle").innerHTML = "Dark Mode";
}

function modeSwitcher() {
    let currentMode = document.documentElement.getAttribute('data-theme');
    if (currentMode === "dark") {
        document.documentElement.setAttribute('data-theme', 'light');
        window.localStorage.setItem('theme', 'light');
        document.getElementById("theme-toggle").innerHTML = "Dark Mode";
    } else {
        document.documentElement.setAttribute('data-theme', 'dark');
        window.localStorage.setItem('theme', 'dark');
        document.getElementById("theme-toggle").innerHTML = "Light Mode";
    }
}