color-mix() 不支持 CSS 变量或 currentColor，仅接受字面量颜色值；必须显式指定色彩空间（如 in srgb）和带 % 的权重，否则静默失效；主题色混合需构建时处理或运行时 JS 计算。
color-mix() 不能直接混合 CSS 变量定义的主题色，写了也不会生效——它只认字面量颜色值，var(--primary) 会被浏览器当作无效输入直接丢弃。
color-mix() 必须用具体颜色字面量，不能用 var() 或 currentColor
- 浏览器解析
color-mix()时是编译期行为，不支持运行时变量展开 - 以下写法全部静默失败（DevTools 显示“Invalid property value”，控制台无报错）：
color-mix(in srgb, var(--primary), #fff)color-mix(in srgb, currentColor, #000)color-mix(in srgb, transparent, blue) - 正确写法必须是完整、确定、不带变量的颜色：
#2563eb、hsl(210 70% 60%)、oklch(55.2% 0.215 252.3)、rebeccapurple - 连
white和black都不行，得写成#ffffff或oklch(100% 0 0)
想让主题色参与混合，只有两种可行路径
-
构建时处理（推荐）：用 PostCSS 插件（如
postcss-color-mix）在打包阶段把color-mix(in srgb, var(--primary) 70%, #fff 30%)替换为计算好的静态色值，例如#e0f0ff -
运行时 JS 注入（可控但重）：读取
getComputedStyle(document.documentElement).getPropertyValue('--primary')，用chroma.js或原生OKLCH转换逻辑算出混合结果，再写回style或自定义属性 - ❌ 不要尝试用
@property+color-scheme做降级：目前仅 Chrome 支持，且无法驱动color-mix()本身
权重和色彩空间写错，照样静默失效
-
in srgb必须显式写出，漏掉in或拼成in rgb→ 整条声明被跳过 - 权重缺
%单位：写成red 60或blue 40→ 失效；必须是red 60%或red 0.6 - 权重总和不要求等于 100%，但格式必须合法：
red 2, blue 1会被归一化为 66.6%/33.3%，而red 60%, blue是合法的（blue 自动占 40%） -
in lch和in oklch更自然，但 Safari 16.4+ 才支持前者，Firefox 当前完全不认后者——用之前必须套@supports (color: color-mix(in lch, red, blue))
真正难的不是算出混合结果，而是确保它在用户打开页面那一刻就已存在、不依赖 JS、不因一个空格或大小写错误而整行归零。生产环境里，color-mix() 的可靠性边界比语法本身窄得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
