基于系统设置和html中按钮单击的光明和黑暗模式

Question

我有以下的代码在我的网站上，我试图设置光或黑暗模式，根据设置的用户系统/浏览器，以及能力，改变设置的基础上按下按钮。

我想要的是：

，

1. ，它是白天，或者是用户浏览器被设置为亮灯。网站加载light.css，按钮显示月亮图标切换到灯光主题。
2. ，它是晚上的时间，或者用户的主题设置为黑暗模式。网站加载dark.css主题，按钮中的图标切换到sun.

也许我在这里遗漏了什么东西，才能让它正常运作？主要是按钮不切换。

​

function lightDark() {
  var el = document.querySelectorAll(".light, .dark")
  if (el.href.match("light.css")) {
    el.href = "dark.css";
  } else {
    el.href = "light.css";
  }
}

<
script type = "text/javascript" >
  $('#lightDarkToggle').click(function() {
      if (window.matchMedia('prefers-color-scheme: dark').matches) {
        $(this).find('i').toggleClass('fa-sun'),
          el.href = "dark.css";

      } else {
        $(this).find('i').toggleClass('fa-moon'),
          el.href = "light.css";
      }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link class="light" rel="stylesheet" href="light.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)" />
<link class="dark" rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)" />

<button id="lightDarkToggle" onclick="lightDark()"><i class="fas fa-moon"></i></button>

​

Answer 1

我认为这一行var el = document.querySelectorAll("#light, #dark")应该是var el = document.querySelectorAll(".light, .dark")，因为链接标记有一个类，而不是id。

另一件事是，在您的第二个脚本标记中，您尝试更新el.href，但是在这个函数中，从未定义过el。它是在另一个函数(lightDark())中定义的，因此在它的末尾不能再访问它了。