移动端适配暗黑模式最直接的方法是在css中使用 prefers-color-scheme 媒体查询，通过定义 light 和 dark 两个主题下的颜色变量来实现。只需在根节点设置默认浅色变量，并在媒体查询中覆盖深色变量，浏览器即可根据系统设置自动切换配色。
如何定义全局颜色变量以支持主题切换
实现暗黑模式的第一步是建立一套基于 CSS 自定义属性（变量）的颜色体系。将背景色、文字色等关键样式提取为变量，并赋予浅色模式下的默认值。这样做的目的是让后续的主题切换只需修改变量值，而无需改动具体的样式规则。
:root {
--bg-color: #ffffff;
--text-color: #333333;
--card-bg: #f5f5f5;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}上述代码定义了三个核心变量：--bg-color 用于页面背景，--text-color 用于主要文字，--card-bg 用于卡片或容器背景。这些变量在 :root 伪类中声明，作用域覆盖整个文档。此时页面呈现为标准的浅色模式。接下来需要引入媒体查询来响应系统的暗黑偏好。
立即学习“前端免费学习笔记（深入）”；
如何通过媒体查询覆盖变量实现暗黑模式
在定义了基础变量后，使用 @media (prefers-color-scheme: dark) 块来重新定义这些变量。当用户设备开启暗黑模式时，浏览器会自动应用这个媒体查询中的规则，从而改变变量的值，达到换肤效果。
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #e0e0e0;
--card-bg: #1e1e1e;
}
}这段代码在暗黑模式下将背景色改为深灰 #121212，文字色改为浅灰 #e0e0e0，卡片背景改为稍亮的深灰 #1e1e1e。这种层级化的变量覆盖机制确保了样式的统一性和可维护性。开发者只需关注变量值的调整，无需担心具体元素样式的遗漏。
暗黑模式下图片资源如何适配
在暗黑模式中，直接使用浅色背景的图片会导致视觉冲突。可以通过 mix-blend-mode 或提供两套图片资源来解决。对于图标类图片，推荐使用 SVG 并结合 CSS 变量控制填充色；对于照片类图片，建议提供深色版本或使用滤镜调整。
.logo {
width: 100px;
height: auto;
/* 方法一：使用SVG并控制fill */
fill: var(--text-color);
}
/* 方法二：针对特定图片提供深色版本 */
@media (prefers-color-scheme: dark) {
.hero-image {
filter: brightness(0.8) invert(1);
}
}第一种方法适用于矢量图标，通过 fill 属性绑定文字颜色变量，确保图标与文字同色。第二种方法使用 CSS 滤镜对位图进行简单处理，降低亮度并反转颜色，适用于不需要精确控制的装饰性图片。更严谨的做法是为不同主题准备不同的图片源，通过 <picture></picture> 标签或 JavaScript 动态加载，但 CSS 变量方案在大多数场景下已足够高效。
