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";
    }
}

在页面加载之前使用JS加载深色主题

1 个答案: