无法在html网站中实现暗模式

@media (prefers-color-scheme: dark) {
  /* 暗模式下的样式规则 */
  body {
    background-color: #000;
    color: #fff;
  }
}

<button id="dark-mode-toggle">切换暗模式</button>

<script>
  const toggleButton = document.getElementById('dark-mode-toggle');
  const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');

  function toggleDarkMode() {
    if (document.body.classList.contains('dark-mode')) {
      document.body.classList.remove('dark-mode');
    } else {
      document.body.classList.add('dark-mode');
    }
  }

  toggleButton.addEventListener('click', toggleDarkMode);

  // 根据用户的系统设置自动切换暗模式
  if (prefersDarkMode.matches) {
    document.body.classList.add('dark-mode');
  }
</script>