如何使用 JavaScript/jQuery 为网站创建暗/亮模式？

Light-on-dark 配色方案，也称为深色模式，是一种补充模式，它使用一种配色方案，其中网页的内容显示在深色背景上。这种配色方案减少了屏幕发出的光并增强了可读性。切换到深色模式可以让网站用户随时切换到对眼睛友好且节省资源的设计。
创建暗/亮模式的步骤：

• 创建一个 HTML 文档。
• 为文档文件和暗模式创建 CSS。
• 添加一个开关/切换器以在明暗模式之间切换。
• 向开关/切换器添加功能，以使用 javascript 或 jQuery 代码在明暗模式之间切换。

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

html

    
    
    Dark Mode
     
    
    
     
    
        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;
        }
    

 

    
        Dark mode:            
        OFF
    
     
    
        GeeksforGeeks
         
A Computer Science Portal for Geeks
 
        Light and Dark Mode
         
        
         

            Click on the switch on top-right
            to move to dark mode.
        
 
    
     
    
        $( ".change" ).on("click", function() {
            if( $( "body" ).hasClass( "dark" )) {
                $( "body" ).removeClass( "dark" );
                $( ".change" ).text( "OFF" );
            } else {
                $( "body" ).addClass( "dark" );
                $( ".change" ).text( "ON" );
            }
        });
    

 

输出：

• 灯光模式：
  

• 黑暗模式：
  

示例 2：以下示例演示了在 javascript 代码中使用 toggle()函数在明暗模式之间切换。

html

    
    
    Dark Mode
     
    
        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;
        }
    

 

    GeeksforGeeks
     
A Computer Science Portal for Geeks
 
    Light and Dark Mode
    Switch mode
     
    
        function myFunction() {
        var element = document.body;
        element.classList.toggle("dark");
        }
    

 

输出：

• 灯光模式：
  

• 黑暗模式：
  

夜间模式/黑暗模式除了为网站添加额外功能外，还增强了用户体验和可访问性。对于发布长内容并需要用户在屏幕上长时间集中注意力的网站很有用。