如何使用HTML、CSS和JavaScript为网站制作暗黑模式

在本文中，我们将学习如何使用HTML、CSS和JavaScript为网站制作暗黑模式，即黑色模式、深色主题或夜间模式。

在暗黑模式中，浅色文本和图标显示在深色背景上。简而言之，网页内容显示在暗色背景上。在光线不足的环境中，暗黑模式对眼睛更友好。暗黑模式的理念是通过降低设备屏幕发出的光线并保持最小颜色对比度来提高可读性。切换到暗黑模式让网站用户可以随时切换到友好于眼睛且节省资源的设计。

使用HTML、CSS和JavaScript创建暗黑模式网站的步骤：

创建一个HTML文档。
为body添加CSS属性，并在CSS中添加dark-mode类。
添加按钮以在暗黑模式和亮色模式之间切换。
使用JavaScript为按钮添加功能，使其在暗黑模式和亮色模式之间切换。

示例1： 以下示例演示了使用HTML、CSS和JavaScript代码在浅色模式和暗黑模式之间切换。它使用了两个函数：darkMode()和lightMode()来切换两种模式。

HTML

<!-- Filename:index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <title>
          How to Make Dark Mode for Websites using HTML CSS & JavaScript  ?
      </title>
    <style>
        body {
            padding: 25px;
            background-color: white;
            color: black;
            font-size: 25px;
        }
 
        .dark-mode {
            background-color: black;
            color: white;
        }
 
        .light-mode {
            background-color: white;
            color: black;
        }
    </style>
</head>
 
<body>
    <h1>GeeksForGeeks</h1>
 
    <p>
        This is a sample GeeksForGeeks Text.
        Dark Mode Websites using Html CSS &
        Javascript
    </p>
 
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png" />
 
    <h3 id="DarkModetext">Dark Mode is OFF</h3>
    <button onclick="darkMode()">Darkmode</button>
    <button onclick="lightMode()">LightMode</button>
    <script>
        function darkMode() {
            let element = document.body;
            let content = document.getElementById("DarkModetext");
            element.className = "dark-mode";
            content.innerText = "Dark Mode is ON";
        }
        function lightMode() {
            let element = document.body;
            let content = document.getElementById("DarkModetext");
            element.className = "light-mode";
            content.innerText = "Dark Mode is OFF";
        }
    </script>
</body>
</html>

输出：

如何使用HTML、CSS和JavaScript为网站制作暗黑模式

示例2： 在上面的示例中，我们使用了两个按钮来在暗黑模式和亮光模式之间切换。现在我们将使用JavaScript中的toggle()方法来在暗黑模式和亮光模式之间切换。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0" />
    <title>
          How to Make Dark Mode for Websites using HTML CSS & JavaScript  ?
      </title>
    <style>
        body {
            padding: 25px;
            background-color: white;
            color: black;
            font-size: 25px;
        }
 
        .dark-mode {
            background-color: black;
            color: white;
        }
    </style>
</head>
 
<body>
    <h1>GeeksForGeeks</h1>
    <h2>Dark Mode tutorial using HTML, CSS and JS</h2>
 
    <p>GeeksForGeeks Sample Text</p>
 
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png" />
    <div>
        <button onclick="darkMode()">Darkmode</button>
    </div>
    <script>
        function darkMode() {
            var element = document.body;
            element.classList.toggle("dark-mode");
        }
    </script>
</body>
</html>

输出:

如何使用HTML、CSS和JavaScript为网站制作暗黑模式