必须直接在 :root 中声明变量并设置 color-scheme: light，才能强制浅色主题；@media (prefers-color-scheme: light) 仅响应系统偏好，无法覆盖暗黑模式。
不能靠 @media (prefers-color-scheme: light) “覆盖”暗黑模式——它只响应系统偏好，不支持“强制设为浅色”。真要写死浅色主题，得绕过媒体查询逻辑，直接声明变量、重置继承、切断系统感知链。
为什么 @media (prefers-color-scheme: dark) 无法被“反向覆盖”
浏览器只按系统设置触发一次匹配，@media (prefers-color-scheme: light) 不是“开关”，而是“监听器”。你加再多层 !important 或后置规则，只要系统设了暗黑，这段媒体查询压根不生效，变量根本不会加载。
常见错误现象：
— 在 CSS 里写 @media (prefers-color-scheme: light) { :root { --bg: #fff; } }，但用户开了暗黑模式，页面还是黑底
— 试图用 JS 动态切换 prefers-color-scheme 媒体查询（做不到，该值只读）
- 真正起效的是：直接在顶层
:root中定义变量，不依赖媒体查询 - 必须手动重置所有可能被暗黑主题 CSS 库（如 Tailwind 的
dark:、或第三方 theme.css）污染的属性 - 如果用了
CSS Custom Properties层级继承，得确保父级没带color-scheme: dark声明（它会强制子元素尊重系统）
写死浅色变量的三步实操（不碰 media query）
目标是让 --bg、--text 等变量彻底脱离系统判断，哪怕用户开了暗黑模式、装了深色插件、甚至系统级反转颜色，也保持浅色。
立即学习“前端免费学习笔记（深入）”；
- 第一步：在最外层
:root直接赋值，不包任何@media:root {<br> --bg: #ffffff;<br> --text: #1a1a1a;<br> --border: #e0e0e0;<br>} - 第二步：显式关闭
color-scheme的自动适配（关键！）:root {<br> color-scheme: light;<br>}否则某些浏览器（如 Safari）仍会按系统暗黑模式调整表单控件、滚动条等原生元素 - 第三步：覆盖可能存在的暗黑主题 class 干扰（比如你引入了
dark-mode.css）body.dark, body[data-theme="dark"] {<br> --bg: #ffffff !important;<br> --text: #1a1a1a !important;<br>}注意：这里用!important是合理且必要的，用来压制外部样式表的同名变量
警惕 CSS-in-JS 和框架的隐式暗黑逻辑
像 Next.js 的 useTheme、Remix 的 theme loader、或者 Emotion 的 css 函数，常会悄悄注入 @media (prefers-color-scheme: dark) 规则。它们不写在你源码里，但运行时存在。
- 检查 DevTools 的
Styles面板，搜索prefers-color-scheme，确认有没有框架自动生成的暗黑规则 - Tailwind 用户：禁用
darkMode: 'class'或'media'，并在tailwind.config.js中删掉darkMode字段，否则dark:bg-gray-900类仍会生效 - 如果用了
system-ui字体栈或color-scheme: normal，改回明确值：font-family: -apple-system, BlinkMacSystemFont, sans-serif;，避免字体渲染受暗黑模式影响
最麻烦的不是写变量，是打断所有“自动适配”的路径——从 HTML 的 color-scheme 声明、到框架的 theme hook、再到构建时注入的 CSS，每一层都可能偷偷把暗黑逻辑塞回来。盯紧 DevTools 的 computed styles，看 --bg 最终来源是不是你写的 :root，而不是某个媒体查询块。
