Technicalarticles

如何使用JavaScript / jQuery为网站创夜间/高亮模式？
作者：赵刘伟 时间：2020-05-27 浏览量：

浅色深色配色方案（也称为深色模式）是一种补充模式，它使用一种配色方案，其中网页的内容显示在深色背景上。这种配色方案减少了屏幕发出的光并增强了可读性。切换为夜间模式可让网站用户随时随地转向外观友好且节省资源的设计。

创建夜间/高亮模式的步骤：

  • 创建一个HTML文档。

  • 为文档文件以及黑暗模式创建CSS。

  • 添加一个开关转换器按钮，以在明暗模式之间进行切换。

  • 使用javascript或jQuery代码向开关转换器添加功能，以在明暗模式之间切换。

示例1：以下示例演示了使用JQuery代码在明暗模式之间进行切换。它基本上通过使用函数hasClass（），addClass（）和removeClass（）方法来工作。


<!DOCTYPE html> <html> <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>         Dark mode:                      <span>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>
输出：
高亮模式：
001.png

夜间模式：

002.png

示例2：以下示例演示了通过在JavaScript代码中使用toggle（）函数在高亮模式和夜间模式之间进行切换。


<!DOCTYPE html> <html> <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() {         var element = document.body;         element.classList.toggle("dark");         } </script> </body>
</html>
输出：
高亮模式：


003.png

夜间模式：

004.png

夜间模式或者说黑暗模式除了为网站添加额外功能之外，还可以增强用户体验和可访问性。对于发布较长内容且需要用户长时间关注屏幕的网站而言，此功能非常有用。


返回列表

想和你做个朋友

DO U LIKE?