Layui 2.8+ 不支持一键修改默认主题颜色，必须使用官方预编译主题包（如 layui-theme-blue.css）或构建工具生成整套主题 CSS，通过 <link disabled> 切换并调用 layer.closeAll() 清理残留样式；局部修改需用高优先级选择器 + !important 覆盖所有状态。
做不到「一键修改默认主题颜色」。Layui 2.8+ 的主题色不是靠 CSS 变量或 JS API 动态控制的，所有颜色（包括按钮 hover、禁用态边框、layer 弹层标题、表格悬停背景等）都在构建时被静态编译为固定值，运行时无法通过改一个变量或调一个函数批量生效。
为什么直接改 --layui-color-primary 或替换 #009688 没用
你看到的 layui.css 文件里根本没有 --layui-color-primary 这类声明——它只存在于源码 _color.scss 中，构建后已被替换成硬编码色值（如 #009688）。手动全局替换这个值会漏掉大量衍生规则：
-
.layui-btn:hover的背景色、边框色、文字反色是独立计算的，不会跟着主色变 -
.layui-btn[disabled]的边框可能消失，因为它的边框色是另一个固定值 -
.layui-layer-title和.layui-layer-btn0颜色不匹配，因它们引用的是不同编译后的色值 - CDN 引入的
layui.all.js自带锁定样式，style标签或 JS 注入变量完全无效
真正能生效的换肤方式：切换整套主题 CSS
必须使用官方预编译的主题包（如 layui-theme-blue.css）或用 Layui 主题构建工具生成，再通过 <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.querySelectorAll('link[href*="themes/"]').forEach(link => link.disabled = !link.href.includes('blue.css')) - 切换后务必调用
layer.closeAll()，否则旧弹层 DOM 上残留的skin类会导致样式错乱
只改局部按钮或弹窗？用高优先级选择器 + !important
如果只是某个 layer.confirm 的确认按钮、或表格操作列里的按钮，没必要换整套主题：
- 必须限定作用域，比如改弹窗确认按钮要写
.layui-layer-btn .layui-layer-btn0，不能只写.layui-layer-btn0 - 必须显式覆盖所有状态：
:hover、[disabled]、background-color、border-color、color都得单独写 - 异步加载内容（如
content: {url: 'xxx'}）时，样式得在success回调里手动加：$(layero).find('.layui-layer-btn0').css(...) - 避免用
!important冲突：确保你的<style>在layui.css之后加载，且不要混用多个!important覆盖链
最麻烦的不是怎么换色，而是每次都要确认：你改的那行 CSS 是否真被浏览器应用了——打开 DevTools 看 computed style，别信“看起来变了”。Layui 的样式链太深，漏掉一个状态或一个父级限定，交互时就会跳色或失效。
