layui无法通过js动态修改css变量换肤，因其2.8+版本虽定义了--layui-color-primary等变量，但构建时已静态编译为固定色值，组件样式（如hover、边框、阴影）均依赖sass编译生成的硬编码规则，不响应运行时变量变更。
直接改 layui.css 里的 css 变量（如 --layui-color-primary）基本无效——layui 2.8+ 虽然定义了这些变量，但构建时已静态编译为固定色值，运行时修改 :root 或 document.documentelement.style 不会触发样式重计算。
为什么不能用 JS 动态改 CSS 变量换肤
Layui 的组件样式（按钮 hover、边框、阴影、禁用态等）不是简单引用一个变量，而是依赖 SASS 编译时生成的完整衍生规则。比如 .layui-btn:hover 的背景色、文字色、边框色，都是基于主色自动算出来的，不是靠运行时 var(--layui-color-primary) 实时计算。所以即使你用 JS 改了变量，那些已生成的 class 规则不会响应变化。
- 你看到的
layui.css文件里根本找不到--layui-color-primary这类声明，它们只存在于源码_color.scss中 - 用
document.body.style.setProperty('--layui-color-primary', '#ff6b6b')后检查 computed style，会发现没有组件因此变色 - layer 弹层、table 分页、form 表单等模块的样式都硬编码在 CSS 选择器中，不走 CSS 变量链
唯一可靠方式：切换整套主题 CSS 文件
必须预编译或下载多个主题 CSS（如 layui-theme-red.css、layui-theme-blue.css），通过控制 <link> 标签的 disabled 属性来激活/停用。
- 所有主题 CSS 必须来自同一构建源（推荐用官方 主题构建工具），否则选择器权重或类名可能不一致
- 页面中一次性引入全部主题，初始仅启用一个：
<link id="layui-theme" rel="stylesheet" href="/css/themes/default.css"><link rel="stylesheet" href="/css/themes/red.css" disabled><link rel="stylesheet" href="/css/themes/gray.css" disabled> - 切换函数要严格匹配路径，避免误关其他非主题 CSS：
function switchTheme(themeName) { const links = document.querySelectorAll('link[rel="stylesheet"][href*="themes/"]'); links.forEach(link => { link.disabled = !link.href.includes(themeName); }); } - 如果使用
layui.all.js（含内置样式），必须确保主题 CSS 在它之后加载，否则会被覆盖
动态注入主题 CSS 时 layer 样式错乱怎么办
layer 的 DOM 是运行时 append 到 document.body 的，它不继承当前 中激活的 theme CSS 作用域，尤其当主题文件没覆盖 .layui-layer 全量规则时，就会回退到默认样式。
- 确认你用的主题 CSS 文件包含完整组件样式 —— 它不是只改按钮色，而是重写了所有
.layui-layer-*、.layui-table、.layui-form*类 - 禁止用
document.write或innerHTML插入 CSS；必须用document.createElement("link") + appendChild，否则 layer 初始化时读不到新样式 - 切换后可手动调用
layer.closeAll()再触发一次弹层，确保新样式生效（尤其对已打开的 layer） - 若用 iframe 加载内容，需在 iframe 内也注入对应主题 CSS，否则子页面仍用旧皮肤
最易被忽略的一点：主题切换后，表格 cellStyle 和 rowStyle 返回的内联样式（如 background-color: #e8f5e9）不会自动适配新主题色——它们是硬编码值。如果你希望这些动态样式与主题联动，得把颜色抽成 JS 变量或统一用 CSS 变量（前提是你的主题 CSS 已支持并暴露了这些变量）。
