html怎么实现暗黑模式 暗黑主题切换功能教程

实现html暗黑模式的核心是使用css的prefers-color-scheme媒体查询和javascript动态切换类名。1. 使用prefers-color-scheme媒体查询根据系统主题自动应用暗色样式；2. 通过javascript监听切换按钮事件，手动切换.dark-mode类并用localstorage保存用户偏好；3. 图片适配可通过css滤镜、不同图片资源、svg颜色控制或javascript动态替换实现；4. 代码高亮适配可引入不同主题css文件或使用css变量控制颜色；5. 对于不支持prefers-color-scheme的浏览器，依靠javascript检查localstorage并应用之前保存的主题设置，默认情况下设定浅色主题以确保兼容性。

实现HTML暗黑模式，核心在于利用CSS的prefers-color-scheme媒体查询，以及JavaScript动态切换CSS类名。简单来说，就是根据用户的系统偏好或者手动切换，应用不同的CSS样式表。

解决方案

1. CSS媒体查询：prefers-color-scheme

   立即学习“前端免费学习笔记（深入）”；

   

   这是实现暗黑模式的基础。prefers-color-scheme允许你根据用户的系统主题（浅色或深色）应用不同的CSS规则。

   body {
       background-color: white;
       color: black;
   }
   
   @media (prefers-color-scheme: dark) {
       body {
           background-color: black;
           color: white;
       }
   }

   登录后复制

   这段代码的意思是，默认情况下，body背景是白色，文字是黑色。但如果用户的系统设置了暗黑模式，那么body背景会变成黑色，文字会变成白色。

2. JavaScript手动切换：

   仅仅依靠prefers-color-scheme是不够的，因为用户可能希望手动切换主题，或者在不支持prefers-color-scheme的浏览器上也能使用暗黑模式。

   首先，你需要一个切换按钮（例如一个checkbox）：

   <label class="switch">
     <input type="checkbox" id="darkModeToggle">
     <span class="slider round"></span>
   </label>

   登录后复制

   然后，使用JavaScript监听这个按钮的点击事件，并动态地给body添加或移除一个CSS类名，例如dark-mode。

   const darkModeToggle = document.getElementById('darkModeToggle');
   const body = document.body;
   
   darkModeToggle.addEventListener('change', () => {
     body.classList.toggle('dark-mode');
   
     // 可选：保存用户的偏好到localStorage
     if (body.classList.contains('dark-mode')) {
       localStorage.setItem('darkMode', 'enabled');
     } else {
       localStorage.setItem('darkMode', 'disabled');
     }
   });
   
   // 页面加载时，检查localStorage，应用之前的偏好
   if (localStorage.getItem('darkMode') === 'enabled') {
     body.classList.add('dark-mode');
     darkModeToggle.checked = true;
   }

   登录后复制

   对应的CSS：

   body {
       background-color: white;
       color: black;
   }
   
   body.dark-mode {
       background-color: black;
       color: white;
   }
   
   @media (prefers-color-scheme: dark) {
       body:not(.dark-mode) { /* 避免和手动切换冲突 */
           background-color: black;
           color: white;
       }
   }

   登录后复制

   这里，.dark-mode类名覆盖了默认的样式，也覆盖了prefers-color-scheme的样式（除非你使用了:not(.dark-mode)）。同时，我们使用了localStorage来保存用户的偏好，这样用户下次访问网站时，主题会自动切换到上次使用的模式。

如何处理图片和其他资源的暗黑模式适配？

图片的暗黑模式适配比较麻烦，通常有几种方法：

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

• 使用CSS滤镜： filter: invert(1); 可以反转图片的颜色，但效果可能不理想，尤其是对于色彩丰富的图片。

  body.dark-mode img {
      filter: invert(1);
  }

  登录后复制

• 使用不同的图片： 为浅色和深色模式准备不同的图片。可以使用<picture>元素或者CSS的background-image，根据不同的媒体查询加载不同的图片。

  <picture>
    <source srcset="image-dark.png" media="(prefers-color-scheme: dark)">
    <img src="image-light.png" alt="My Image">
  </picture>

  登录后复制

  或者：

  .my-image {
      background-image: url('image-light.png');
  }
  
  @media (prefers-color-scheme: dark) {
      .my-image {
          background-image: url('image-dark.png');
      }
  }

  登录后复制

• 使用SVG图片： SVG图片可以很容易地通过CSS修改颜色。

  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="black" class="my-circle" />
  </svg>

  登录后复制

  body.dark-mode .my-circle {
      fill: white;
  }

  登录后复制

• JavaScript动态替换图片： 和切换类名类似，你可以使用JavaScript监听主题切换事件，然后动态地修改<img>标签的src属性。

  const image = document.getElementById('myImage');
  
  darkModeToggle.addEventListener('change', () => {
    if (body.classList.contains('dark-mode')) {
      image.src = 'image-dark.png';
    } else {
      image.src = 'image-light.png';
    }
  });

  登录后复制

代码高亮如何适配暗黑模式？

代码高亮通常使用第三方库，例如Prism.js或Highlight.js。这些库通常提供多种主题，包括暗黑主题。

1. 引入不同的主题CSS： 在HTML中引入浅色和深色主题的CSS文件，然后使用prefers-color-scheme或JavaScript动态切换CSS文件。

   <link rel="stylesheet" href="prism-light.css">
   <link rel="stylesheet" href="prism-dark.css" media="(prefers-color-scheme: dark)">

   登录后复制

   或者，使用JavaScript：

   const prismLight = document.createElement('link');
   prismLight.rel = 'stylesheet';
   prismLight.href = 'prism-light.css';
   
   const prismDark = document.createElement('link');
   prismDark.rel = 'stylesheet';
   prismDark.href = 'prism-dark.css';
   prismDark.media = '(prefers-color-scheme: dark)';
   
   document.head.appendChild(prismLight);
   document.head.appendChild(prismDark);
   
   darkModeToggle.addEventListener('change', () => {
     if (body.classList.contains('dark-mode')) {
       prismLight.disabled = true;
       prismDark.media = 'all'; // 启用暗黑主题
     } else {
       prismLight.disabled = false;
       prismDark.media = '(prefers-color-scheme: dark)'; // 恢复媒体查询
     }
   });

   登录后复制

2. 使用CSS变量： 某些代码高亮库允许你通过CSS变量自定义颜色。你可以定义浅色和深色主题的CSS变量，然后根据主题切换CSS变量的值。

   :root {
     --code-background: #f0f0f0;
     --code-text: #333;
   }
   
   body.dark-mode {
     --code-background: #222;
     --code-text: #eee;
   }
   
   .code-block {
     background-color: var(--code-background);
     color: var(--code-text);
   }

   登录后复制

如何处理不支持prefers-color-scheme的浏览器？

对于不支持prefers-color-scheme的浏览器，只能依靠JavaScript手动切换主题。你需要确保JavaScript代码在页面加载时检查localStorage，并应用之前保存的偏好。如果localStorage中没有保存任何偏好，你可以设置一个默认主题（例如浅色主题）。

// 页面加载时，检查localStorage
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
} else if (localStorage.getItem('darkMode') === null) {
  // 如果localStorage中没有保存任何偏好，设置默认主题
  // 可以根据用户系统的语言设置默认主题
  // 例如，如果用户系统的语言是中文，可以默认使用浅色主题
  // 如果用户系统的语言是英文，可以默认使用深色主题
  // 这里简单地设置一个浅色主题
  body.classList.remove('dark-mode');
  darkModeToggle.checked = false;
}

另外，你可以考虑使用polyfill来模拟prefers-color-scheme的功能，但这通常比较复杂，而且效果可能不如原生支持好。

以上就是html怎么实现暗黑模式 暗黑主题切换功能教程的详细内容，更多请关注php中文网其它相关文章！