CSS如何实现深色模式自动适配_利用prefers-color-scheme与变量定义

最稳妥写法是同时声明 light 和 dark 媒体查询避免嵌套复合条件CSS 变量应分层定义主题色在 :root 中用媒体查询覆盖JS 切换主题需同步更新变量与 class 并以 localStorage 为准。prefers-color-scheme 媒体查询怎么写才可靠直接用 media (prefers-color-scheme: dark) 是最稳妥的起点但要注意它只在支持该特性的浏览器里生效Chrome 76、Firefox 67、Safari 12.1老版本 Safari 会完全忽略——别指望它兜底。常见错误是把它当“开关”用比如只在 dark 分支里定义颜色结果 light 模式下变量没初始化页面一片黑或白。必须保证两套逻辑都完整。始终同时写出 media (prefers-color-scheme: light) 和 media (prefers-color-scheme: dark)哪怕 light 分支只是重置不要嵌套在其他媒体查询里比如 media (max-width: 768px) and (prefers-color-scheme: dark)部分旧版 Safari 不识别复合条件如果用 CSS-in-JS 或构建工具注入样式确认生成的 CSS 里 media query 没被误删或转义CSS 变量定义顺序和作用域怎么安排CSS 变量--color-bg 这类不是全局常量它们依赖声明位置和选择器作用域。把所有变量塞进 :root 看起来省事但一换主题就容易漏覆盖或冲突。推荐分层定义基础变量放 :root主题变量用 class 控制再通过 prefers-color-scheme 触发切换。立即学习“前端免费学习笔记深入”:root 里只定义默认值比如 --color-bg: #fff不带媒体查询给 html 或 body 加 class如 theme-dark用 .theme-dark { --color-bg: #1e1e1e; } 覆盖再用 media (prefers-color-scheme: dark) { html { class: theme-dark; } }不行——CSS 不能操作 class。得靠 JS 注入 class或直接在 media query 里写变量覆盖更稳的做法在 media (prefers-color-scheme: dark) { :root { --color-bg: #1e1e1e; } }确保变量在根作用域更新JS 主动切换时如何避免闪屏和状态错位用户点按钮切深色模式如果只改 document.documentElement.classList而 CSS 变量没同步更新就会先闪一下系统偏好色再跳到目标色——尤其在慢设备上明显。 稿定AI 拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能