javascript - 在页面加载之前使用 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 中而不是区域设置存储中可以达到目的。问题是，如果有其他解决方案，我不一定想使用 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";
    }
}