#深色模式

通过在 classList 在 html 添加 dark 类触发原生开启 dark 主题

/* 深色模式 */
.dark {
  color-scheme: dark;
}

function addDark() {
  const classList = document.documentElement.classList

  classList.add('dark')
  localStorage.setItem(DARK_KEY, 'true')
}

function removeDark() {
  const classList = document.documentElement.classList

  classList.remove('dark')
  localStorage.setItem(DARK_KEY, 'false')
}

可以在 localStorage 中存并监听 storage 事件同步 tab 页

function initDark() {
  const init = () => {
    // 读取storage状态初始化
    if (localStorage.getItem(DARK_KEY) === 'true') {
      const classList = document.documentElement.classList

      classList.add('dark')
    }
  }

  // 监听storage改变同步tab页
  window.addEventListener('storage', init)
}

通过媒体查询修改原生 dark 主题的样式

@media (prefers-color-scheme: dark) {
  body {
    color-scheme: dark;
    background-color: #333; /* 可以设置背景色为深色 */
    color: #fff; /* 可以设置文字颜色为浅色 */
  }
}