Layui无法通过JS动态修改CSS变量换肤，因其2.8+版本采用静态编译，--layui-color-primary等变量已在构建时转为固定色值，组件样式（如hover、边框、layer弹层）均依赖SASS预生成的硬编码规则，不响应运行时变量变更；唯一可靠方式是预编译多套主题CSS文件，通过切换<link>标签的disabled属性激活对应主题。
不能靠改 --layui-color-primary 这类 css 变量实现动态换肤——layui 2.8+ 的 css 是静态编译的，变量早在构建时就被替换成固定色值，运行时修改无效。
为什么直接 JS 修改 CSS 变量完全没用
Layui 的按钮 hover 色、边框色、禁用态、layer 弹层标题背景等，都不是靠 var(--layui-color-primary) 动态计算出来的；而是 SASS 编译时就生成了完整规则，比如：.layui-btn:hover { background-color: #007bff; border-color: #0056b3; }。你改了变量，这些已存在的 CSS 规则不会重算，也不会重新匹配。
- 在 DevTools 里查
computed style，会发现组件颜色根本不变 -
document.documentElement.style.setProperty('--layui-color-primary', '#ff6b6b')后刷新页面也无效 - 哪怕你在
<style>里用:root覆盖，也只影响极少数未被编译掉的残留变量（几乎为零）
必须用整套主题 CSS 文件切换
唯一可靠路径是预编译并加载多个主题 CSS 文件，通过控制 <link> 标签的 disabled 属性激活/停用。
- 从 Layui 源码的
themes/目录用官方构建工具生成default.css、red.css、gray.css等 - 所有主题 CSS 必须来自同一构建源，否则类名或权重不一致会导致样式残留
- 页面
<head>中一次性引入全部主题，初始仅启用一个：<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) {<br> const links = document.querySelectorAll('link[rel="stylesheet"][href*="themes/"]');<br> links.forEach(link => {<br> link.disabled = !link.href.includes(themeName);<br> });<br>}
layer 弹层样式错乱怎么办
因为 layer 的 DOM 是运行时直接 appendChild 到 document.body 的，它不继承当前 <head> 中激活的主题 CSS 作用域。
- 务必确认你加载的主题 CSS 包含完整的
.layui-layer-*规则（很多第三方主题包漏写了这部分） - 如果用了
layui.all.js（内嵌默认样式），主题 CSS 必须在它之后加载，否则会被覆盖 - 不要用
document.write或innerHTML动态注入 CSS，layer 初始化时可能读不到新样式 - 检查
.layui-layer-title、.layui-layer-btn是否被重复定义或权重不足（可加!important临时兜底，但不是长久之计）
真正麻烦的不是切换动作本身，而是主题 CSS 的完整性验证——哪怕一个 .layui-table-hover 规则漏掉，表格悬停色就会回退到默认蓝。每次新增主题，都得手动打开所有组件（table、form、layer、carousel）过一遍视觉表现。
