用 :root 自定义属性控制 grayscale() 实现平滑黑白切换，配合 color/background-color 变量调整语义颜色，避免 invert() 导致的不可控色偏与跳变，兼顾系统偏好与手动触发需求。
如何用 :root 变量控制全屏黑白对比切换
直接改 body 或 html 的 filter: grayscale() 最快，但硬切会闪、不平滑，且无法和系统明暗模式联动。真正可控的方式是把灰度值抽成 CSS 自定义属性，在 :root 里统一管理。
实操建议：
- 在
:root中定义--grayscale: 0;，默认彩色；切换时设为1 - 全屏生效需作用于
html或body，推荐写html { filter: grayscale(var(--grayscale)); } - 必须加
transition: filter 0.3s ease;，否则没有过渡——CSSfilter支持过渡，但仅限数值型函数（如grayscale()、blur()），不支持invert()直接过渡
invert(1) 和 grayscale(1) 能否一起用？为什么别混着写
能写，但结果不可控：两者叠加后颜色逻辑混乱，尤其对图片、渐变、半透明元素，常出现意外色偏或亮度崩坏。更关键的是，invert() 无法用数值做平滑过渡（浏览器不支持 invert(0.5) 这类中间态），强行加 transition 会直接跳变。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 点击切换后画面“啪”一下反转，毫无缓动
- 文字变黑底白字的同时，图标变成紫红色噪点
- 使用
prefers-color-scheme媒体查询时，invert完全不响应
正确做法是只用 grayscale() 控制对比度强度，需要“反转感”时，额外叠加一层 background-color + color 的变量控制（见下一条）。
如何让黑白切换同时影响文字/背景色，而不只靠 filter
filter: grayscale() 只处理像素，不改变语义颜色值。如果想让深色背景配浅色文字、浅色背景配深色文字，必须配合 CSS 变量重置 color、background-color 等属性。
使用场景明确：按钮、卡片、导航栏等需要保持可读性与对比度的 UI 元素。
实操建议：
- 在
:root中定义两套颜色变量，例如：--text-primary: #1a1a1a;/--text-primary-inverted: #f0f0f0; - 用类名（如
.theme-inverted）或媒体查询触发变量切换，避免用 JS 直接改 style - 不要试图用
filter: invert(1) hue-rotate(180deg)模拟主题反转——它破坏图标语义、干扰屏幕阅读器、且在 Retina 屏上发虚
为什么 prefers-reduced-transparency 和 prefers-contrast 不能替代手动切换
这两个媒体查询是系统级偏好，用户开了就全局生效，无法由页面主动触发或关闭。比如用户没开高对比度模式，但想临时点个按钮看黑白效果——此时 JS 控制的 class 切换仍是唯一解。
性能与兼容性注意点：
-
prefers-contrast: high在 Safari 16+ 和 Chrome 120+ 才稳定支持，旧版会静默忽略 - 所有基于
filter的方案都会轻微增加合成层开销，长页面滚动可能掉帧，建议加will-change: filter;到html元素（仅当检测到支持时） - iOS Safari 对
filter在position: fixed元素上的渲染有 bug，若顶部导航栏固定，需额外加transform: translateZ(0);触发硬件加速
最易被忽略的是：黑白切换后，svg 图标的描边/填充色不会随 CSS 变量更新，得单独用 currentColor 或内联 fill 属性绑定变量。
