Layui 2.8+ 不支持直接修改 CSS 变量或全局替换颜色值，必须使用官方预编译主题包（如 layui-theme-blue.css）或构建工具生成完整主题 CSS，通过 <link disabled> 动态切换，并调用 layer.closeAll() 清除旧弹层样式残留。
直接改 layui.css 里的颜色值没用
因为 layui 2.8+ 构建时已将 css 变量（如 --layui-color-primary）静态编译为固定色值，比如 #009688。你手动全局替换这个值，会漏掉大量衍生色：按钮 hover 色、禁用态边框、阴影偏移、渐变起点、文字反色计算等。结果是按钮点击时跳色、禁用后边框消失、或弹层标题和按钮颜色不匹配。
常见错误现象：.layui-btn 看起来正常，但鼠标悬停后变成深绿，.layui-btn[disabled] 却还是亮色；或者 .layui-bg-blue 区块里文字看不清——全是衍生规则断裂导致的。
- 别用编辑器“全部替换”
#009688→#1890ff这种方式 - 不要在
<style>里写:root { --layui-color-primary: #1890ff }，它对已编译的 CSS 无效 - CDN 引入的
layui.all.js自带锁定样式，无法通过 JS 动态注入变量生效
换肤必须用整套主题 CSS 文件
Layui 官方唯一支持的方式是：用预编译主题包（如 layui-theme-blue.css）或通过主题构建工具生成完整 CSS，再通过 <link disabled> 切换启用状态。
正确做法是：
- 下载或构建多个主题 CSS，放在
/css/themes/下，例如：default.css、blue.css、red.css - HTML 中一次性引入全部，初始仅启用一个：
<link id="layui-theme" rel="stylesheet" href="/css/themes/default.css"> <link rel="stylesheet" href="/css/themes/blue.css" disabled> <link rel="stylesheet" href="/css/themes/red.css" disabled>
- 切换时用 JS 控制：
document.querySelector('link[href*="blue.css"]').disabled = false，同时把其他主题disabled = true - 切换后调用
layer.closeAll()，避免旧弹层残留skin类导致样式错乱
局部按钮改色用精准选择器 + !important
如果只改某个 layer.confirm 或表格操作列的按钮颜色，没必要换整套主题。关键是限定作用域、覆盖所有状态、处理内联样式干扰。
例如改确认按钮（第一个按钮）为蓝色：
- 必须用父级限定：
.layui-layer-btn .layui-layer-btn0，不能只写.layui-layer-btn0，否则影响全局 - 必须显式重写
:hover和[disabled]状态，否则交互时颜色突变 - 如果按钮是异步渲染（比如
content是 AJAX 加载），得在success回调里手动加样式：success: function(layero) { $(layero).find('.layui-layer-btn0').css({ 'background-color': '#1890ff', 'border-color': '#1890ff', 'color': '#fff' }); } - 遇到
style="background-color: #009688"内联样式盖住你的 CSS？只能靠!important硬顶，且要写全：background-color: #1890ff !important
想加渐变色必须绕过内联 background-color
Layui 默认给按钮加了 style="background-color: ..."，直接写 background: linear-gradient() 会被覆盖。必须用简写一次性覆盖整个 background 声明。
推荐写法：
.layui-btn-gradient { background: linear-gradient(to right, #1890ff, #5a7dfc) !important; }- 同时重写 hover：
.layui-btn-gradient:hover { background: linear-gradient(to right, #096dd9, #4d6ed9) !important; } - 禁用态也要同步：
.layui-btn-gradient[disabled] { background: linear-gradient(to right, #d0d0d0, #b0b0b0) !important; opacity: 0.7; } - 别单独设
background-image，Layui 的background-color会把它压掉
最易被忽略的是：渐变按钮一旦进入 hover 或 disabled 状态，Layui 原生样式会强行还原纯色背景，不手动覆盖就白搭。
