如何使用 HTML CSS 和 JavaScript 为网站制作深色模式？

明暗配色方案，也称为黑色模式、暗模式、暗主题或夜间模式。在此模式下，浅色文本、图标显示在深色背景上。简而言之，网页的内容显示在深色背景上。在弱光环境中，暗模式更适合您的眼睛。暗模式背后的想法是通过减少设备屏幕发出的光来提高可读性，同时保持最小的色彩对比度。切换到暗模式允许网站用户随时切换到对眼睛友好且节省资源的设计。

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

1. 创建一个 HTML 文档。
2. 向主体添加 CSS 属性并在 CSS 中添加暗模式类属性。
3. 添加按钮以在暗模式和亮模式之间切换。
4. 为按钮添加功能，以使用 JavaScript 在暗模式和亮模式之间切换。

示例 1：以下示例演示如何使用 HTML、CSS 和 JavaScript 代码在明暗模式之间切换。它使用 2 个函数，即：darkMode() 和 lightMode() 在两种模式之间切换。

index.html

  
    
    
    
    Document
    
      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;
      }
    
  
  
    GeeksForGeeks
  
    
      This is a sample GeeksForGeeks Text. 
      Dark Mode Websites using Html CSS &
      Javascript
    
  
    
  
    Dark Mode is OFF
    Darkmode
    LightMode
    
      function darkMode() {
        var element = document.body;
        var content = document.getElementById("DarkModetext");
        element.className = "dark-mode";
        content.innerText = "Dark Mode is ON";
      }
      function lightMode() {
        var element = document.body;
        var content = document.getElementById("DarkModetext");
        element.className = "light-mode";
        content.innerText = "Dark Mode is OFF";
      }
    
  

输出：

使用 HTML、CSS 和 Javascript 的暗模式

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

索引.html

  
    
    
    
    Document
    
      body {
        padding: 25px;
        background-color: white;
        color: black;
        font-size: 25px;
      }
      .dark-mode {
        background-color: black;
        color: white;
      }
    
  
  
    GeeksForGeeks
    Dark Mode tutorial using HTML, CSS and JS
  
    GeeksForGeeks Sample Text
  
    
    
      Darkmode
    
    
      function darkMode() {
        var element = document.body;
        element.classList.toggle("dark-mode");
      }
    
  

输出：

使用 HTML、CSS 和 JavaScript 在深色和浅色模式之间切换