color-mix() 无法自动生成适配禁用态的颜色，因其仅静态混合固定颜色、不感知状态/主题/对比度；必须手动设定双模式色值、分属性定义、强制 fallback 并实测验证。
color-mix() 不能直接“生成”禁用态颜色，它只是把两个已知颜色按权重算出一个固定 RGB 值——和手写 #6b7280 没区别。你得自己决定哪两个颜色混合、各占多少比例、在哪种背景下可用，再手动 fallback。
为什么直接套用 color-mix() 写 disabled 颜色容易翻车？
常见错误现象是：按钮禁用后文字突然看不清，或深色模式下颜色反向发灰，甚至整条样式被浏览器静默忽略。
-
color-mix(in srgb, var(--text-primary) 70%, #94a3b8 30%)——var(--text-primary)会被直接拒绝，必须是字面量如#1e293b - 漏写
in srgb：浏览器当语法错误，整条声明丢弃，不报错也不警告 - 同一组参数在浅底和深底上效果相反：比如
color-mix(in srgb, black 60%, white 40%)在白底上是浅灰，在黑底上就是亮灰，但视觉弱化方向完全反了 - 禁用态需要同步控制背景、文字、边框、图标颜色，
color-mix()只能算一个值，没法联动
怎么写才真正可控？分三步配齐
禁用态不是“调个色”，而是语义 + 对比度 + 状态一致性的问题。你得提前算好、明确 fallback、并实测。
- 先定两套基础色：浅色模式用
color-mix(in srgb, #1e293b 70%, #cbd5e1 30%)，深色模式用color-mix(in srgb, #f1f5f9 70%, #64748b 30%)，别共用一套参数 - 拆开定义：用
--disabled-bg、--disabled-text、--disabled-border分别赋值，而不是只靠一个color-mix()往所有属性塞 - 必须 fallback：永远把静态色写在前面，例如
color: #94a3b8; color: color-mix(in srgb, #1e293b 70%, #cbd5e1 30%); - 别信
@supports (color: color-mix(...))：它只检测语法识别，不校验权重或色彩空间拼写是否正确；实际更可靠的是层叠 fallback
:disabled 伪类里怎么安全用 color-mix()？
关键不是“能不能用”，而是“在哪用、用几次、怎么兜底”。禁用态样式必须在所有浏览器里都可读，哪怕 color-mix() 完全不执行。
- 按钮禁用时，
background-color和color必须分别计算：比如background-color: color-mix(in srgb, #3b82f6 20%, #e2e8f0 80%)，color: color-mix(in srgb, #1e293b 70%, #94a3b8 30%) - 禁用态不要依赖透明度（
opacity）或filter：它们会模糊图标、影响可访问性，且和color-mix()的设计目标冲突 - 关键语义色（如错误提示的红、成功状态的绿）禁用后必须手调确定值，比如
--error-disabled: #fca5a5，绝不能只靠color-mix(in srgb, #ef4444, #f1f5f9)生成 - 移动端要特别注意：Safari 16.4+ 支持
color-mix()，但旧版 iOS Safari 和所有 Firefox for Android 都不认，fallback 不是可选项，是底线
真正容易被忽略的是：color-mix() 输出的是一个**固化值**，它不感知 :disabled 状态本身，不响应深色模式切换，也不参与对比度校验。你写的每一行，都得像手写十六进制一样，经过 DevTools 实测、真机截图、WCAG 工具验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
