实现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样式表。
解决方案
-
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背景会变成黑色，文字会变成白色。
-
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来保存用户的偏好，这样用户下次访问网站时，主题会自动切换到上次使用的模式。
如何处理图片和其他资源的暗黑模式适配？
图片的暗黑模式适配比较麻烦，通常有几种方法：
-
使用CSS滤镜： Filter: invert(1); 可以反转图片的颜色，但效果可能不理想，尤其是对于色彩丰富的图片。
body.dark-mode img { filter: invert(1); } -
使用不同的图片： 为浅色和深色模式准备不同的图片。可以使用
元素或者CSS的background-image，根据不同的媒体查询加载不同的图片。 <picture> <source srcset="image-dark.png" media="(prefers-color-scheme: dark)"> @@##@@ </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监听主题切换事件，然后动态地修改
标签的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。这些库通常提供多种主题，包括暗黑主题。
-
引入不同的主题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)'; // 恢复媒体查询 } }); -
使用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的功能，但这通常比较复杂，而且效果可能不如原生支持好。
