在现代 Web 开发中，前端开发人员需要在不同设备和浏览器上实现一致的外观和体验。随着暗黑模式的流行，许多浏览器开始支持媒体查询 prefers-color-scheme。这个特性可以检测用户系统是否开启了暗黑模式，并根据检测结果加载相应的 CSS 文件。
在这篇文章中，我们将介绍一个 npm 包 css-prefers-color-scheme，它可以帮助我们轻松地实现前端暗黑模式主题的切换。
安装
首先，我们需要在项目中安装 css-prefers-color-scheme。
可以使用以下命令：
npm install css-prefers-color-scheme
使用
css-prefers-color-scheme 支持使用 JavaScript 或 CSS 自定义变量实现暗黑模式的切换。
JavaScript 方式
在要切换主题的 DOM 元素上，我们可以添加一个切换样式的类。然后，我们可以使用以下代码来切换主题：
import prefersColorScheme from 'css-prefers-color-scheme'; if (prefersColorScheme.dark) { document.getElementById('my-element').classList.add('dark-theme'); } else { document.getElementById('my-element').classList.remove('dark-theme'); }
我们可以使用 prefersColorScheme.dark 属性来检测用户是否启用了暗黑模式。如果启用了暗黑模式，我们就在元素上添加一个 dark-theme 类。否则，我们就从元素上移除 dark-theme 类。
CSS 自定义变量方式
可以使用 CSS 自定义变量来切换主题。
首先，在根元素上定义主题相关的 CSS 变量：
-- -------------------- ---- ------- ----- - ------------------- -------- ------------- -------- - ------ ---------------------- ----- - ----- - ------------------- -------- ------------- -------- - -展开代码
在上述代码中，我们定义了两个 CSS 自定义变量 --background-color 和 --text-color，分别对应了浅色主题和暗色主题下的背景和文字颜色。在 @media (prefers-color-scheme: dark) 中，我们通过检测 prefers-color-scheme 属性来判断浏览器是否使用了暗色主题。
然后，在应用样式的元素上使用这些变量：
.my-element { background-color: var(--background-color); color: var(--text-color); }
这段代码将根据 --background-color 和 --text-color 变量的值自动切换为浅色主题和暗色主题的颜色。
总结
通过深入学习 css-prefers-color-scheme，在前端实现暗黑模式主题切换变得更容易。无论是使用 JavaScript 自定义变量还是使用 CSS 自定义变量，都可以轻松地完成主题的切换。这意味着我们可以为用户提供更好的外观和体验，提高用户满意度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc836b5cbfe1ea06122e5
