Ant Design v4 不支持 CSS 变量运行时换肤，因其主题系统基于 Less 编译期变量（如 @primary-color），而非浏览器原生 CSS 自定义属性；v5+ 才真正映射 --ant-primary-color 等变量到组件样式中，支持运行时动态修改。
只有 Ant Design v5+ 支持 CSS 变量运行时换肤，v4 及更早版本完全不响应 --ant-primary-color 等变量。
Ant Design v4 为什么写 --ant-primary-color 没用
因为 v4 的主题系统基于 Less 编译期变量（如 @primary-color），这些不是浏览器原生的 CSS 自定义属性。你在 :root 里写 --ant-primary-color: #ff6b35，Ant 组件样式压根不会读取它——源码里全是 color: @primary-color，跟 CSS 变量毫无关联。
常见错误现象：
- 页面加了
:root { --ant-primary-color: red; }，但Button还是默认蓝 - 用
document.documentElement.style.setProperty('--ant-primary-color', 'red')，控制台没报错，但视觉零变化
真正有效的做法只有两个：
- 用
modifyVars配合less-loader重编译整个主题（构建时生效，非运行时） - 升级到 v5+，才能走 CSS 变量路线
Ant Design v5+ 中正确覆写 --ant-primary-color 的姿势
v5 开始，所有基础色、间距、圆角等都映射到了 CSS 变量，且组件样式直接引用这些变量，所以运行时修改才真正起效。
关键点：
- 必须在
:root范围内定义，不能只写html或body - 变量名严格区分大小写和前缀：
--ant-primary-color，不是--primary-color或--antd-primary - 部分变量有依赖关系，比如改了
--ant-primary-color，--ant-link-hover-color不会自动变，需手动同步
示例（推荐整套注入，避免漏配）：
:root {
--ant-primary-color: #3a8ee6;
--ant-link-hover-color: #1e65c0;
--ant-border-color-split: #e0e6ed;
--ant-bg-color: #ffffff;
--ant-text-color: #333333;
}
动态切换时，用 JS 批量 set：
const root = document.documentElement;
root.style.setProperty('--ant-primary-color', '#52c418');
root.style.setProperty('--ant-bg-color', '#f8f9fa');
root.style.setProperty('--ant-text-color', '#212529');
为什么换肤后部分组件颜色没变
不是所有组件都 100% 适配了 CSS 变量，尤其是一些老组件或特殊状态（如 DatePicker 的 hover 日历格、Table 的斑马纹背景）。原因有三：
- 某些样式仍残留 Less 计算逻辑，未迁移到变量（v5.3 之前较常见）
- 组件内部用了硬编码色值（如
#1890ff），绕过了变量引用 - 深色模式下，
[data-theme="dark"]下的变量未单独设置，导致 fallback 到浅色值
排查建议：
- 打开 DevTools，选中一个“没变色”的元素，看 computed 样式里 color / background 是从哪条规则来的
- 检查是否漏写了
[data-theme="dark"] :root下的对应变量 - 确认你用的是 v5.8+，低版本存在已知变量覆盖不全的问题（如
Tag的 color 属性）
和 Element Plus 共用一套主题变量的现实约束
别指望 --ant-primary-color 和 --el-color-primary 能自动对齐。两者变量名不同、粒度不同、计算逻辑也不同（Ant 的 --ant-link-hover-color 是独立变量，Element Plus 则靠 --el-color-primary 推导）。
务实做法是建一层语义化中间层：
:root {
--theme-primary: #3a8ee6;
--theme-bg: #ffffff;
--theme-text: #333333;
}
<p>/<em> 映射到 Ant </em>/
:root {
--ant-primary-color: var(--theme-primary);
--ant-bg-color: var(--theme-bg);
}</p><p>/<em> 映射到 Element Plus </em>/
:root {
--el-color-primary: var(--theme-primary);
--el-bg-color: var(--theme-bg);
}</p>
这样换肤时只需改 --theme-primary，两边自动同步。但要注意：Element Plus 的 el-table 斑马纹依赖 --el-color-primary 和 --el-bg-color 组合计算，单靠语义层映射可能不够，得补全整套 --el-* 变量。
最易被忽略的一点：CSS 变量的继承不是无条件的。如果某个组件用了 !important 或 inline style，或者父级显式设置了 color，那变量就会被切断。换肤前务必检查 DOM 结构和样式优先级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
