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，直接选下面之一：
-
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="...>的href
前者轻量、实时、无构建负担；后者兼容性更好（IE11 可用），但需提前确定主题数量，不能支持用户自由取色。
Ainative React Sdk
下载
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
立即学习“前端免费学习笔记（深入）”；
Less 文件该怎么写才不踩坑
如果你坚持用 Less 管理设计 Token（推荐），请严格遵守这个结构：
- 只在一个地方定义变量，比如
src/styles/theme/tokens.less，里面只写@primary-color: #1890ff;这类基础色值 - 所有组件样式文件（
Button.less、Header.less）里禁止硬编码颜色，一律用color: var(--primary-color);或background: @primary-color;——注意：后者仅用于构建时编译，不可用于运行时切换 - 不要在
:root里用@primary-color赋值，即禁止写--primary-color: @primary-color;，因为 Less 不会把变量注入到 CSS 变量中；必须手动写死或用构建工具替换 - 如果要用
var(--primary-color)，确保最终输出的 CSS 中:root包含该变量声明——通常由一个单独的variables.css或 JS 注入逻辑负责
最常被忽略的一点：Less 是编译期工具，它的变量作用域和生命周期与运行时零交集。任何想让 @xxx 在页面打开后还能变的尝试，都是在对抗构建原理。老老实实用 CSS 变量，才是 React 项目里主题切换的正路。
