如何使用JavaScript/jQuery为网站创建深色/浅色模式

深色模式 ，也称为暗黑模式，是一种使用颜色方案将网页内容显示在深色背景上的补充模式。这种颜色方案减少了屏幕发出的光线，并增强了可读性。切换到深色模式可以使网站用户在任何时候都可以使用友好于眼睛和节约资源的设计。

创建深色/浅色模式的步骤：

创建一个HTML文档。
为文档文件以及深色模式创建CSS样式。
添加一个开关/切换按钮，用于切换浅色和深色模式。
使用JavaScript或jQuery代码为开关/切换按钮添加切换浅色和深色模式的功能。

示例1

下面的示例演示了如何使用jQuery代码在浅色和深色模式之间切换。它基本上通过使用hasClass()、addClass()和removeClass()方法执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <title>Dark Mode</title> 
     
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
     
    <style>
        body{
        padding:10% 3% 10% 3%;
        text-align:center;
        }
        img{
            height:140px;
                width:140px; 
        }
        h1{
        color: #32a852;
        }
        .mode {
            float:right;
        }
        .change {
            cursor: pointer;
            border: 1px solid #555;
            border-radius: 40%;
            width: 20px;
            text-align: center;
            padding: 5px;
            margin-left: 8px;
        }
        .dark{
            background-color: #222;
            color: #e6e6e6;
        }
    </style>
</head>
 
<body>
    <div class="mode">
        Dark mode:             
        <span class="change">OFF</span>
    </div>
     
    <div>
        <h1>GeeksforGeeks</h1>
        <p><i>A Computer Science Portal for Geeks</i></p>
 
        <h3>Light and Dark Mode</h3>
         
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png">
        <p>
            Click on the switch on top-right
            to move to dark mode.
        </p>
 
    </div>
     
    <script>
         $( ".change" ).on("click", function() { if($ ( "body" ).hasClass( "dark" )) {
                 $( "body" ).removeClass( "dark" );$ ( ".change" ).text( "OFF" );
            } else {
                 $( "body" ).addClass( "dark" );$ ( ".change" ).text( "ON" );
            }
        });
    </script>
</body>
</html>

输出：

如何使用JavaScript/jQuery为网站创建深色/浅色模式

示例2

下面的示例演示了通过使用toggle()函数在JavaScript代码中切换明亮模式和暗黑模式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>Dark Mode</title> 
     
    <style>
        body{
        padding:0% 3% 10% 3%;
        text-align:center;
        }
        h1{
        color: #32a852;
        margin-top:30px;
        }
     
        button{
            cursor: pointer;
            border: 1px solid #555;
            text-align: center;
            padding: 5px;
            margin-left: 8px; 
        }
        .dark{
            background-color: #222;
            color: #e6e6e6;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <p><i>A Computer Science Portal for Geeks</i></p>
 
    <h3>Light and Dark Mode</h3>
    <button onclick="myFunction()">Switch mode</button> 
     
    <script>
        function myFunction() {
            let element = document.body;
            element.classList.toggle("dark");
        }
    </script>
</body>
</html>

输出：

如何使用JavaScript/jQuery为网站创建深色/浅色模式