必须用预编译主题CSS文件切换，因Layui 2.8+衍生色硬编码在构建时，全局替换颜色值会导致悬停、禁用、弹层等样式错乱；局部改色需限定作用域并覆盖所有状态。
直接改 layui.css 里的颜色值没用
你找到 --layui-color-primary 或 #009688 全局替换为 #1890ff，表面看按钮变蓝了，但鼠标悬停后跳成深绿、禁用按钮边框消失、弹层标题和按钮色不一致——这是因为 Layui 2.8+ 所有衍生色（hover 色、disabled 边框、阴影偏移、文字反色）都在构建时硬编码进 CSS，不是靠 CSS 变量实时计算的。改一个值，漏掉几十处依赖它的规则。
必须用预编译主题 CSS 文件切换
官方唯一支持的方式是：用 Layui 源码中 themes/ 目录 + 官方构建工具（或直接下载已编译好的 layui-theme-blue.css），生成完整主题文件，再通过 <link disabled> 控制启用状态。
- 把
blue.css、default.css等放至/css/themes/目录下 - HTML 中一次性引入全部，初始只启用一个：
<link id="layui-theme" rel="stylesheet" href="/css/themes/default.css"> <link rel="stylesheet" href="/css/themes/blue.css" disabled>
- 切换时 JS 控制：
document.querySelector('link[href*="blue.css"]').disabled = false，同时设其他为true - 切完立刻调用
layer.closeAll()，否则旧弹层残留skin类导致样式错乱
局部按钮或弹层临时改色，别动全局
如果只是某个 layer.confirm 的确认按钮要蓝，没必要换整套主题。关键是限定作用域、覆盖所有状态、处理内联样式干扰：
- 必须用父级限定选择器：
.layui-layer-btn .layui-layer-btn0，不能只写.layui-layer-btn0 - 必须显式重写
:hover和[disabled]，例如：.layui-layer-btn .layui-layer-btn0 { background-color: #1890ff !important; } .layui-layer-btn .layui-layer-btn0:hover { background-color: #40a9ff !important; } .layui-layer-btn .layui-layer-btn0[disabled] { background-color: #d0eaff !important; } - 如果弹层内容是 AJAX 异步加载的，得在
success回调里手动加样式，否则 DOM 渲染完样式还没上
动态渲染组件（如 table、laydate）的颜色要单独补全
表格表头、日期面板这些模块的样式链更长，光改主色远远不够：
- 表头背景：必须加
!important，且推荐用自定义 class 包裹表格容器，比如.my-table thead th { background-color: #1890ff !important; } - laydate 面板：需完整覆盖
.laydate-theme-default .layui-laydate-header、.layui-this、td:hover、.layui-laydate-content .layui-disabled等，漏一项就视觉割裂 - skin 参数对配色不可控：用
skin: "line"可让表头回归纯白底，方便你全量接管；skin: "default"下的渐变色无法微调
真正麻烦的不是换色本身，而是所有组件都依赖同一套衍生规则——你改一个地方，就得同步检查 layer、form、table、laydate、element 等十几个模块里对应状态的样式是否断裂。主题 CSS 文件之所以必须“整套替换”，就是因为它把这套关系提前编译好了。
