通过 JavaScript 为您的网站添加深色模式

Question

我是初学者，我给自己设定了一个挑战：使用 JS 函数为我的作品集创建暗模式。

HTML :

<nav class="navbar dark-mode" id="navbar">

    <ul class="navbar_links">
        <li class="navbar_link first"><a href="#">Accueil</a></li>
        <li class="navbar_link second"><a href="#">Service</a></li>
        <li class="navbar_link third"><a href="#">Mission</a></li>
        <li class="navbar_link fourth"><a href="#">Portfolio</a></li>
        <li class="navbar_link fifth"><a href="#">Contact</a></li>
    </ul>

    <img id="lightModeIcon" src="img/light-mode.png" alt="">

</nav>

JAVASCRIPT:

    function lightMode() {

      const lightModeIcon = document.getElementById('lightModeIcon');
      const navbar = document.getElementById('navbar');

      if (navbar.classList.contains("dark-mode")) {
        lightModeIcon.addEventListener('click', () => {
          navbar.classList.replace("dark-mode", "light-mode");
          lightModeIcon.src = "img/dark-mode.png";
        })
    } else {
        lightModeIcon.addEventListener('click', () => {
          navbar.classList.replace("light-mode", "dark-mode");
          lightModeIcon.src = "img/light-mode.png";
        })
    }
}

     lightMode();

但是我有一个问题。我使用“如果...esle”。

“如果”部分有效。但是“其他”部分不起作用。

通常，如果用户已经点击了暗模式按钮，我的#navbar 不包含“暗模式”class，而是“.light-mode”。所以“其他”部分应该运行.

Answer 1

想想当代码是运行。

dark-mode 被硬编码到 HTML
lightMode 在页面加载时调用。
if 语句绑定了两个事件侦听器之一

函数运行时 else 分支的条件永远不会为真。

写一个single事件监听，总是绑定到按钮上，测试里面的当前状态是什么事件侦听器。

请注意，您可以 detect the user's OS mode 基于此选择您的方案，而不是将 UI 与用户系统的其余部分完全分开。

Answer 2

你运行这个函数 once （大概是在加载页面时），它将评估一次条件并注册一个事件侦听器（将 class 设置为暗模式的一种，或将其设置为亮模式的一种）。因此，点击将对整体执行相同的操作。

相反，您应该将 if-else 检查移到事件侦听器内部，以便在单击时检查 classes。这可以像反转函数的第三行和第四行一样简单，例如：

const lightModeIcon = document.getElementById('lightModeIcon');
const navbar = document.getElementById('navbar');

// Always add this single event listener
lightModeIcon.addEventListener('click', () => {
   // Check the condition inside the listener, take action based on the current state
   if (navbar.classList.contains("dark-mode")) {
      navbar.classList.replace("dark-mode", "light-mode");
      lightModeIcon.src = "img/dark-mode.png";
   } else {
      navbar.classList.replace("light-mode", "dark-mode");
      lightModeIcon.src = "img/light-mode.png";
   }
});

通过 JavaScript 为您的网站添加深色模式

Add a darkmode to your site via JavaScript

html

javascript

darkmode