forced-color-adjust 不能用于适配暗黑模式，它仅在windows高对比度的强制颜色模式下生效，作用是让元素退出系统强制重绘并保留原css颜色；暗黑模式需用@media (prefers-color-scheme: dark)和html.dark类配合css变量实现。
forced-color-adjust 不能用来适配暗黑模式
forced-color-adjust 和暗黑模式（prefers-color-scheme）完全无关。它只在「强制颜色模式」（Forced Colors Mode）下起作用——这是 Windows 高对比度设置或某些辅助技术启用的独立功能，不是 macOS/iOS/Android 的深色主题。浏览器检测到系统开启高对比度时，会重绘所有元素为有限调色板（如纯黑、纯白、高亮蓝），此时 forced-color-adjust: none 的作用是：**让某个元素“退出”这个强制重绘，保留你写的 CSS 颜色**。
为什么有人误以为它能切暗色模式
常见混淆点来自命名相似性，以及开发者看到 forced-color-adjust: none 后元素颜色“变回原样”，误判为“绕过了深色模式”。实际上：
- 系统深色模式下，
forced-color-adjust默认值auto完全不生效——浏览器根本不会触发强制颜色重绘 - 即使你手动设为
none，也不会影响@media (prefers-color-scheme: dark)的匹配逻辑 - 真正在深色模式下失效的，是硬编码的
#ffffff这类值，而不是这个属性
该用什么替代 forced-color-adjust 来响应暗黑模式
正确路径只有两条，且必须共存：
- 用
@media (prefers-color-scheme: dark)响应系统自动切换（页面加载时读取一次） - 用
html.dark类 +localStorage响应用户手动开关（否则用户点了按钮没反应） - 两者都需配合
:root中的 CSS 变量，例如：--color-bg-primary在媒体查询和类选择器里分别赋值 - 关键补充：
color-scheme: light dark必须加在:root上，否则表单控件、滚动条等原生元素仍保持亮色
容易被忽略的兼容性细节
forced-color-adjust 的支持范围比 prefers-color-scheme 更窄：Edge 106+、Chrome 109+、Firefox 126+ 支持；Safari 目前不支持。而暗黑模式适配的真正瓶颈，其实是 Safari 对 @media (prefers-color-scheme) 在 iframe 或某些动态插入样式中的延迟识别——不是靠加 forced-color-adjust 能解决的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
