JavaScript/jQuery 如何为网站创建黑暗/光明模式

黑暗模式对任何网站都非常重要。有不同兴趣的用户访问网站。他们中有些人喜欢黑暗模式，有些人喜欢光明模式。

根据一项调查，大约70-80%的人喜欢黑暗模式，只有20-30%喜欢光明模式。因此，有必要为任何网站创建一个黑暗模式，允许用户在黑暗和光明模式之间切换。

下面，我们将使用HTML、CSS和JavaScript创建一个简单的网页。此外，我们还将学习如何使用JavaScript和CSS实现明暗模式。

语法

用户可以按照下面的语法，在深色和浅色主题之间进行切换。

body.classList.toggle("dark-theme");

在上面的语法中，我们把dark-theme类的名称作为toggle方法的一个参数传给了它。它在一个特定的HTML元素上添加和删除该类。

算法

用户可以按照下面的算法在深色和浅色主题之间切换。

第1步– 为一个网页编写HTML代码，像往常一样为浅色主题应用CSS。
第2步 – 使用CSS创建一个暗色主题的样式。
第 3步 – 创建一个按钮，并在按钮中添加一个onclick事件。当用户点击该按钮时，它应该在深色和浅色主题之间切换。
第4步 – 为了在深色和浅色主题之间切换，我们可以从元素中添加和删除特定的类。例如，创建一个黑暗主题的类和黑暗主题的CSS。当我们在正文中添加暗色主题类时，暗色主题应该应用于整个网站，而当我们删除它时，它应该是正常的。

例子1

在下面的例子中，当用户点击按钮时，我们调用了changeMode()函数。changeMode()函数根据主题来改变按钮的文字。

同时，我们使用document.body访问了整个网页，并使用JavaScript将dark-theme类添加到整个主体中，将主题改为黑暗模式。

<html>
<head>
   <style>
      body {
         color: black;
         background-color: rgb(241, 241, 241);
         text-align: center;
         justify-content: center;
      }
      .dark-theme {
         color: white;
         background-color: rgb(26, 20, 20);
      }
      button {
         width: 13rem;
         height: 2rem;
         font-size: 1.5rem;
         background-color: aqua;
         border: none;
         border-radius: 12px;
      }
      p {
         font-size: 1.2rem;
      }
   </style>
</head>
<body>
   <h2>Using the <i> toggle method to </i> toggle between light and dark mode in JavaScript. </h2>
   <p>This is the content of the webpage. </p>
   <button onclick = "changeMode()" id = "button"> Dark Mode </button>
   <script>
      function changeMode() {
         var body = document.body;

         // toggle the theme
         body.classList.toggle("dark-theme");
         let button = document.getElementById('button');

         // change the button text
         if (button.innerHTML == "Dark Mode") {
            button.innerHTML = "Normal Mode";
         } else {
            button.innerHTML = "Dark Mode"
         }
      }
   </script>
</body>
</html>

例子2

在下面的例子中，我们用HTML和CSS创建了一个切换开关按钮。我们使用了复选框作为切换开关。所以，只要用户选中复选框，开关就会打开。所以，我们可以根据复选框是否被选中，为黑暗主题添加和删除类。

此外，我们使用了JQuery的addClass()和removeClass()方法来添加和删除主体中的类。

<html>
<head>
   <style>
      body {
         color: black;
         background-color: rgb(241, 241, 241);
         text-align: center;
         justify-content: center;
      }
      .dark-class {
         color: white;
         background-color: rgb(12, 10, 10);
      }
      p {
         font-size: 1.2rem;
      }
      .toggleButton {
         width: 5rem;
         height: 2rem;
         position: relative;
         display: inline-block;
      }
      .toggleButton input {
         opacity: 0;
      }
      .roundButton {
         background-color: black;
         top: 0;
         left: 0;
         position: absolute;
         right: 0;
         bottom: 0;
         cursor: pointer;
      }
      .roundButton:before {
         left: 0;
         bottom: 0;
         position: absolute;
         content: "";
         background-color: grey;
         transition: 1s;
         height: 2rem;
         width: 2rem;
      }
      input:checked+.roundButton {
         background-color: white;
      }
      input:checked+.roundButton:before {
         transform: translateX(3rem);
      }
      .roundButton.circle {
         border-radius: 2rem;
      }
      .roundButton.circle:before {
         border-radius: 50%;
      }
   </style>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
   Integrity = "sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
   crossorigin = "anonymous" referrerpolicy = "no-referrer"> </script>
</head>
<body>
   <h2>Using the <i> JQuery </i> to toggle between light and dark modes in JavaScript.</h2>
   <p>This is the content of the webpage.</p>
   <label class = "toggleButton">
      <input type = "checkbox" id = "toggle">
      <div class = "roundButton circle" ></div>
   </label>
   <script>
      // If the input checkbox is checked, activate dark mode by adding dark-class to the body
      ('#toggle').change(() => {
         if (('#toggle').is(":checked")) {
            ("body").addClass("dark-class");
         } else {("body").removeClass("dark-class")
         }
      })
   </script>
</body>
</html>