渐变背景在深色模式下需手动切换预设方案而非自动反色，推荐用 prefers-color-scheme 媒体查询或 css 变量+js 实现平滑、可访问、符合 wcag 的双模式适配。
渐变背景在深色模式下不能自动反转，浏览器不提供原生“反色渐变”能力。所谓“智能反转”，本质是根据系统偏好或用户选择，主动切换两套预设的、视觉协调的渐变方案，而非实时计算反色。
用 prefers-color-scheme 媒体查询切换两套渐变
这是最轻量、无 JS、兼容性好的方式。直接在 CSS 中为亮色和暗色模式分别定义背景渐变：
- 默认（浅色模式）使用明亮、低对比度的渐变，例如
linear-gradient(135deg, #f0f9ff, #e0f2fe) - 在
@media (prefers-color-scheme: dark)中覆盖为深色系渐变，例如linear-gradient(135deg, #0c4a6e, #1e3a8a) - 确保渐变起止色都符合深色模式的可读性标准（文字需与之有足够对比度）
- 避免使用纯黑（#000）或过饱和蓝/紫，深色模式下推荐深灰蓝、炭灰、墨绿等柔和色系
结合 CSS 变量 + JavaScript 实现手动切换与记忆
当需要支持用户主动开关（不完全跟随系统），且保持深色模式下渐变依然协调时，推荐这套组合：
- 在
:root中定义渐变变量，如--bg-gradient-light和--bg-gradient-dark - 用一个统一的
--bg-gradient变量作为实际背景值，并通过类名控制其来源：.theme-light { --bg-gradient: var(--bg-gradient-light); }.theme-dark { --bg-gradient: var(--bg-gradient-dark); } - 页面加载时读取
localStorage或matchMedia结果，给html元素添加对应类名 - 所有渐变容器写成
background: var(--bg-gradient);，并声明transition: background 0.4s ease实现平滑切换
避免“伪反转”陷阱：别依赖滤镜或混合模式
有人尝试用 filter: invert(1) hue-rotate(180deg) 或 mix-blend-mode 让渐变“自动翻转”，这在移动端问题突出：
-
invert()会把文字、图标一并反转，破坏语义和可访问性 -
mix-blend-mode在 iOS Safari 和部分安卓 WebView 中渲染不稳定，易出现闪烁或透明失效 - 渐变本身不是单色，反转后色彩关系失衡（比如暖黄变冷紫），视觉上并不协调
- 无法保证文字与新背景的对比度达标，可能违反 WCAG 标准
进阶：滚动中渐变随内容明暗动态微调
若页面含大量图片或视频背景，希望渐变“感知”下方内容亮度（例如图库类 H5），可做轻量级适配：
- 监听滚动或区块进入视口（
IntersectionObserver），获取当前区域主色调（如缩略图 dominant color） - 用亮度公式
luma = 0.2126 * r + 0.7152 * g + 0.0722 * b判断明暗 - 根据 luma 值，在预设的 3–5 组渐变中插值选取最匹配的一组，再通过 CSS 变量注入
- 注意节流——不每帧计算，只在区块切换或用户停顿时更新，防止卡顿
