时间戳

首页 > 解决方案 > 如何在所有页面上设置暗模式

javascript - 如何在所有页面上设置暗模式

问题描述

我怎样才能正确？

每次我切换到不同的页面或刷新它时，它都会切换回我网站中的浅色主题：

https://github.com/elasticalva/elasticalva.github.io

这是我的按钮（root/_includes/navigation.html）：

<li><div id="btn-light-dark"></div></li>

这是我的 CSS (root/_sass/_layout.scss)：

body {
    background-color: #edf2f7;
    color: #333333;
}

.oscuro {
  background-color: #333333;
  color: #edf2f7;
}

#btn-light-dark::after {
  content: '';
}

body.oscuro #btn-light-dark::after {
  content: '';
}

@media (prefers-color-scheme: dark) {
  body {
      color:#333333;
      background:#edf2f7
  }}

这是我的 JS (root/assets/dark.js)：

const btnDarkLight = (btn) => {
    const btnElem = document.querySelector(btn);
  
    const setText = () => {
      const text = document.body.classList.contains('oscuro') ? '' : '☀️';
      btnElem.textContent = text;
    }
  
    document.addEventListener("click", (e) => {
      if (e.target.matches(btn)) {
        document.body.classList.toggle('oscuro');
        setText();
      }
    });
  
    setText();
  
  }
  
  btnDarkLight("#btn-light-dark");

它给了我很多错误：

未捕获的类型错误：无法读取 null 的属性“classList”

它应该很简单，但我不明白。提前致谢！

标签： javascripthtmlcss

解决方案

您可以使用 JS 将当前主题模式放在跨页面和会话保存的“本地存储”中，像这样使用它：

// set dark mode
localStorage.setItem('theme', 'dark');

// set light mode
localStorage.setItem('theme', 'light');

// check if darkmode:
if (localStorage.getItem('theme') == 'dark') {

}

然后您可以在每次加载页面时检查当前主题

推荐阅读