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

【问题标题】：Load dark theme with JS before page load在页面加载之前使用 JS 加载深色主题
【发布时间】：2019-10-11 06:32:46
【问题描述】：

我正在为我的网站开发暗光模式切换器，但遇到了问题。老实说：我对 JS 了解不多，所以你在这里看到的代码可能超级丑陋和凌乱。我只是复制粘贴了一些我在网上找到的sn-ps。

所以，我的问题是，当我打开暗模式并单击另一个页面时，它会闪烁。在页面加载时，它仍然以浅色主题开始，然后切换到深色主题。我不知道为什么会这样。任何反馈将不胜感激。

这里有一个代码：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。

【问题讨论】：

您忘记关闭@media (min-width: 12em) { 括号。然后最后在 body CSS 添加一些转换，如 transition: all 0.4s ease;
谢谢，但不幸的是这些并不能解决这个问题

标签： javascript jquery

【解决方案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";
    }
}

【讨论】：