less不支持运行时动态换肤，所谓“动态”实为预编译多套css或借助css变量+js修改；modifyvars仅适用于旧版less.js（v2.7.2），性能差且已废弃；推荐方案为css自定义属性切换或构建时生成多主题css文件。

Less 本身不支持运行时动态切换主题，所有“Less 动态换肤”方案本质都是骗人的——它要么是预编译多套 CSS，要么是借壳 CSS 变量（--primary-color）+ JS 修改，和 Less 编译器毫无关系。

为什么 modifyVars 看起来像“动态”，其实不是

很多人用 less.modifyVars({ '@primary-color': '#ff6b6b' }) 并配合 less.refreshStyles()，以为这是运行时换肤。但注意：

• 这依赖浏览器端引入 less.js（v3.x 以下），且必须把所有 antd 或项目 less 源码暴露在 HTML 中（比如通过 <link rel="stylesheet/less">）
• 每次调用 modifyVars 都会触发全量 re-compile，性能差、样式抖动明显，尤其在移动端或低端设备上卡顿肉眼可见
• less.js 在 v3.0+ 已移除 refreshStyles，官方明确不维护浏览器端编译，v2.7.2 是最后可用版本——但它不兼容现代 Webpack 5+ 的模块解析
• 你改的只是变量值，但所有选择器、媒体查询、嵌套逻辑早已在首次编译时固化，无法响应式更新布局或动画

真正能上线用的两种做法

别再折腾 modifyVars，直接选下面之一：

Ainative React Sdk

使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。

下载

• CSS 自定义属性 + JS 切换：把主题色全部声明为 :root 下的 --primary-color 等变量，在 Less 中统一用 var(--primary-color) 引用；切换时只执行 document.documentElement.style.setProperty('--primary-color', '#52c418')
• 构建时生成多套 CSS 文件：用 Webpack 插件（如 antd-theme-webpack-plugin）或脚本，基于不同 variables.less 输入，产出 theme-light.css 和 theme-dark.css；运行时用 JS 切换 <link href="...>%20%E7%9A%84%20href
%0A

%0A

%E5%89%8D%E8%80%85%E8%BD%BB%E9%87%8F%E3%80%81%E5%AE%9E%E6%97%B6%E3%80%81%E6%97%A0%E6%9E%84%E5%BB%BA%E8%B4%9F%E6%8B%85%EF%BC%9B%E5%90%8E%E8%80%85%E5%85%BC%E5%AE%B9%E6%80%A7%E6%9B%B4%E5%A5%BD%EF%BC%88IE11%20%E5%8F%AF%E7%94%A8%EF%BC%89%EF%BC%8C%E4%BD%86%E9%9C%80%E6%8F%90%E5%89%8D%E7%A1%AE%E5%AE%9A%E4%B8%BB%E9%A2%98%E6%95%B0%E9%87%8F%EF%BC%8C%E4%B8%8D%E8%83%BD%E6%94%AF%E6%8C%81%E7%94%A8%E6%88%B7%E8%87%AA%E7%94%B1%E5%8F%96%E8%89%B2%E3%80%82

%0A%0A

Less%20%E6%96%87%E4%BB%B6%E8%AF%A5%E6%80%8E%E4%B9%88%E5%86%99%E6%89%8D%E4%B8%8D%E8%B8%A9%E5%9D%91

%0A

%E5%A6%82%E6%9E%9C%E4%BD%A0%E5%9D%9A%E6%8C%81%E7%94%A8%20Less%20%E7%AE%A1%E7%90%86%E8%AE%BE%E8%AE%A1%20Token%EF%BC%88%E6%8E%A8%E8%8D%90%EF%BC%89%EF%BC%8C%E8%AF%B7%E4%B8%A5%E6%A0%BC%E9%81%B5%E5%AE%88%E8%BF%99%E4%B8%AA%E7%BB%93%E6%9E%84%EF%BC%9A

%0A

%0A
• %E5%8F%AA%E5%9C%A8%E4%B8%80%E4%B8%AA%E5%9C%B0%E6%96%B9%E5%AE%9A%E4%B9%89%E5%8F%98%E9%87%8F%EF%BC%8C%E6%AF%94%E5%A6%82%20src/styles/theme/tokens.less%EF%BC%8C%E9%87%8C%E9%9D%A2%E5%8F%AA%E5%86%99%20@primary-color:%20#1890ff;%20%E8%BF%99%E7%B1%BB%E5%9F%BA%E7%A1%80%E8%89%B2%E5%80%BC
%0A
• %E6%89%80%E6%9C%89%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E6%96%87%E4%BB%B6%EF%BC%88Button.less%E3%80%81Header.less%EF%BC%89%E9%87%8C%E7%A6%81%E6%AD%A2%E7%A1%AC%E7%BC%96%E7%A0%81%E9%A2%9C%E8%89%B2%EF%BC%8C%E4%B8%80%E5%BE%8B%E7%94%A8%20color:%20var(--primary-color);%20%E6%88%96%20background:%20@primary-color;%20%E2%80%94%E2%80%94%E6%B3%A8%E6%84%8F%EF%BC%9A%E5%90%8E%E8%80%85%E4%BB%85%E7%94%A8%E4%BA%8E%E6%9E%84%E5%BB%BA%E6%97%B6%E7%BC%96%E8%AF%91%EF%BC%8C%E4%B8%8D%E5%8F%AF%E7%94%A8%E4%BA%8E%E8%BF%90%E8%A1%8C%E6%97%B6%E5%88%87%E6%8D%A2
%0A
• %E4%B8%8D%E8%A6%81%E5%9C%A8%20:root%20%E9%87%8C%E7%94%A8%20@primary-color%20%E8%B5%8B%E5%80%BC%EF%BC%8C%E5%8D%B3%E7%A6%81%E6%AD%A2%E5%86%99%20--primary-color:%20@primary-color;%EF%BC%8C%E5%9B%A0%E4%B8%BA%20Less%20%E4%B8%8D%E4%BC%9A%E6%8A%8A%E5%8F%98%E9%87%8F%E6%B3%A8%E5%85%A5%E5%88%B0%20CSS%20%E5%8F%98%E9%87%8F%E4%B8%AD%EF%BC%9B%E5%BF%85%E9%A1%BB%E6%89%8B%E5%8A%A8%E5%86%99%E6%AD%BB%E6%88%96%E7%94%A8%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7%E6%9B%BF%E6%8D%A2
%0A
• %E5%A6%82%E6%9E%9C%E8%A6%81%E7%94%A8%20var(--primary-color)%EF%BC%8C%E7%A1%AE%E4%BF%9D%E6%9C%80%E7%BB%88%E8%BE%93%E5%87%BA%E7%9A%84%20CSS%20%E4%B8%AD%20:root%20%E5%8C%85%E5%90%AB%E8%AF%A5%E5%8F%98%E9%87%8F%E5%A3%B0%E6%98%8E%E2%80%94%E2%80%94%E9%80%9A%E5%B8%B8%E7%94%B1%E4%B8%80%E4%B8%AA%E5%8D%95%E7%8B%AC%E7%9A%84%20variables.css%20%E6%88%96%20JS%20%E6%B3%A8%E5%85%A5%E9%80%BB%E8%BE%91%E8%B4%9F%E8%B4%A3
%0A

%0A%0A

%E6%9C%80%E5%B8%B8%E8%A2%AB%E5%BF%BD%E7%95%A5%E7%9A%84%E4%B8%80%E7%82%B9%EF%BC%9ALess%20%E6%98%AF%E7%BC%96%E8%AF%91%E6%9C%9F%E5%B7%A5%E5%85%B7%EF%BC%8C%E5%AE%83%E7%9A%84%E5%8F%98%E9%87%8F%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%92%8C%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E4%B8%8E%E8%BF%90%E8%A1%8C%E6%97%B6%E9%9B%B6%E4%BA%A4%E9%9B%86%E3%80%82%E4%BB%BB%E4%BD%95%E6%83%B3%E8%AE%A9%20@xxx%20%E5%9C%A8%E9%A1%B5%E9%9D%A2%E6%89%93%E5%BC%80%E5%90%8E%E8%BF%98%E8%83%BD%E5%8F%98%E7%9A%84%E5%B0%9D%E8%AF%95%EF%BC%8C%E9%83%BD%E6%98%AF%E5%9C%A8%E5%AF%B9%E6%8A%97%E6%9E%84%E5%BB%BA%E5%8E%9F%E7%90%86%E3%80%82%E8%80%81%E8%80%81%E5%AE%9E%E5%AE%9E%E7%94%A8%20CSS%20%E5%8F%98%E9%87%8F%EF%BC%8C%E6%89%8D%E6%98%AF%20React%20%E9%A1%B9%E7%9B%AE%E9%87%8C%E4%B8%BB%E9%A2%98%E5%88%87%E6%8D%A2%E7%9A%84%E6%AD%A3%E8%B7%AF%E3%80%82

%0A">

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！