CSS变量无法直接用rgb(var(--theme-color))因rgb()需三个数值而var()返回字符串；应改用--theme-rgb:59,130,246并配合rgb(var(--theme-rgb))或rgba(var(--theme-rgb),0.9)实现动态透明度与颜色运算。
如何用 CSS 变量定义主题色并支持 RGB 动态计算
直接用 --theme-color 这类变量存十六进制或命名色（如 #3b82f6 或 blue）无法被 rgb() 函数直接解析——CSS 不会自动把 #3b82f6 拆成 R/G/B 数值。必须手动拆解或改用 HSL/RGB 原生格式存储。
为什么不能直接 rgb(var(--theme-color))
这个写法会报错，因为 rgb() 期待三个独立数值参数，而 var(--theme-color) 是一个字符串（比如 "#3b82f6"），浏览器不解析它。常见错误现象：Invalid property value 警告，颜色失效。
-
rgb(var(--theme-color))❌ 语法非法 -
color: var(--theme-color)✅ 可用，但无法参与透明度叠加或颜色函数运算 - 想做
rgba(... , 0.8)或color-mix(in srgb, ...)就必须有分通道的数值
推荐做法：用 --theme-rgb 存三分量，再组合使用
把主题色存为逗号分隔的 RGB 数值（不含括号），例如 59, 130, 246，然后在 rgb() 或 rgba() 中引用：
:root {
--theme-rgb: 59, 130, 246;
}
.button {
background-color: rgb(var(--theme-rgb));
color: rgba(var(--theme-rgb), 0.9);
}
这样既保持变量可维护，又兼容所有需要 RGB 输入的函数。注意逗号前后不能有空格（59,130,246 可以，59, 130, 246 在部分旧版 Safari 中可能出错）。
立即学习“前端免费学习笔记（深入）”；
进阶：配合 color-mix 或 color 函数动态调色
现代 CSS 支持基于 RGB 变量做颜色混合，但前提是输入是有效颜色上下文。仍需依赖 --theme-rgb 这种结构：
.card {
--theme-bg: rgb(var(--theme-rgb));
background-color: color-mix(in srgb, var(--theme-bg) 80%, white 20%);
border-color: color-mix(in srgb, var(--theme-bg) 50%, black 50%);
}
如果主题要支持深色模式切换，建议同时定义 --theme-rgb-light 和 --theme-rgb-dark，用 @media (prefers-color-scheme: dark) 切换，而不是试图用 JS 解析 hex 字符串——那会破坏 CSS 的声明式逻辑和性能。
真正麻烦的是从设计系统导入颜色时，别图省事只导 hex；让设计师或工具输出 RGB 元组，才是面向 CSS 变量的友好格式。
