Ant Design 主题切换需接管 CSS 变量体系而非仅靠 ConfigProvider；须从 @ant-design/cssinjs 源码提取完整变量（如 --ant-border-radius、--ant-shadow-1），用 insertRule 动态注入并确保作用域优先级，同时处理组件私有变量与隐式耦合关系。
Ant Design 的主题切换不能只靠 ConfigProvider 换 token —— 那只是组件层的变量映射，真正要动态控制底层样式（比如按钮边框圆角、阴影强度、字体层级缩放），必须接管其 CSS 变量体系。官方默认不暴露完整 CSS 变量表，得从源码里“挖”出来再注入。
从 @ant-design/cssinjs 提取完整 CSS 变量清单
Ant Design 5.x 起用 @ant-design/cssinjs 生成运行时 CSS，并将设计 token 编译为 CSS 自定义属性（--ant-primary-color 等）。但文档没列全，变量名也不完全对应 JS token 名。
- 打开
node_modules/@ant-design/cssinjs/dist/es/theme/default.css（或构建后产物中的 inline style），搜索--ant-找出所有已声明变量，例如：--ant-border-radius、--ant-font-size-lg、--ant-shadow-1 - 注意部分变量带后缀：
--ant-color-primary是主色，但--ant-color-primary-active和--ant-color-primary-hover是状态色，需一并覆盖 - 别依赖
theme.defaultJS 对象直接转 CSS 变量 —— 它缺了动画时长、z-index 分层、断点值等关键项
用 CSSStyleSheet.insertRule 动态注入新变量值
不能只改 :root，因为 Ant Design 组件内部大量使用 [data-theme="dark"] 或 .ant-btn 等选择器直接读取变量，需保证作用域和优先级正确。
- 在
document.styleSheets中定位到 Ant Design 注入的样式表（通常含ant-design字样），用insertRule追加规则，避免被后续加载的样式覆盖 - 写法示例：
sheet.insertRule(':root { --ant-color-primary: #13c2de; --ant-border-radius: 4px; }', sheet.cssRules.length) - 深色模式下，不要只改颜色：务必同步更新
--ant-bg-base、--ant-color-text、--ant-shadow-card，否则卡片/弹窗背景仍为白色
绕过 ConfigProvider 的 token 限制，直接 patch 组件私有变量
某些样式由组件内联计算（如 Input.Password 的 eye 图标颜色），不响应全局 CSS 变量 —— 它们读的是组件 scope 内的 token.colorIcon，而该 token 并未映射到 CSS 变量。
立即学习“前端免费学习笔记（深入）”；
- 在组件挂载后，用
getComputedStyle检查目标元素是否实际应用了预期变量：getComputedStyle(el).getPropertyValue('--ant-color-primary') - 若返回空字符串，说明该组件未使用 CSS 变量驱动，需用
patchStyle强制重写：el.style.setProperty('--ant-color-primary', '#ff6b35') - 对
Dropdown、Popover等浮层组件，要监听openChange后再 patch，否则 DOM 尚未生成
最麻烦的不是换颜色，而是变量之间的耦合关系 —— 改 --ant-font-size-base 会连带影响 --ant-line-height-base 和所有 rem 单位的间距；--ant-zindex-dropdown 必须大于 --ant-zindex-modal，否则弹窗盖不住下拉菜单。这些隐式依赖不会报错，只会让 UI 在某个尺寸下突然错乱。
