layui 2.8 弹窗主色调由 --layui-color-primary 和 --layui-color-text 控制，但部分样式硬编码，需配合强制 css 覆盖标题底边、确认按钮、关闭按钮等关键节点。
layui 2.8 的弹窗主题色由哪些 CSS 变量控制
layui 2.8 开始原生支持 CSS 变量（--layui-color-primary、--layui-bg-color 等），但弹窗（layer.open）的样式并非全部继承自根变量，部分颜色是硬编码在 .layui-layer-title、.layui-layer-btn0 等选择器里的。真正影响弹窗主色调的核心变量只有两个：--layui-color-primary（控制确认按钮、标题底边、加载动画等）和 --layui-color-text（影响标题文字，默认未被 layer 充分复用）。其他如背景、边框色仍需手动覆盖。
直接改 :root 变量为什么有时不生效
因为 layer 创建的弹窗 DOM 默认插入到 最后，脱离当前样式作用域，且 layui 内部部分样式用了 !important 或高优先级选择器（比如 .layui-layer-btn .layui-layer-btn0）。单纯改 :root 中的 --layui-color-primary 只能影响新创建的 layer 实例中*未被显式覆盖*的部分，老弹窗或某些子元素（如关闭叉号的 hover 色）不会响应。
- 必须确保修改发生在 layer 加载之后，或在
layui.use(['layer'], callback)回调里执行 - 推荐用
document.documentElement.style.setProperty()动态设置，而非仅写 CSS 文件 - 关闭按钮（×）的 hover 色实际由
.layui-layer-close:hover的color控制，它不读取任何 CSS 变量，得单独覆盖
如何安全统一覆盖 layer 弹窗的关键颜色
最稳的方式是组合使用 CSS 变量 + 少量强制样式，只动必要节点，避免污染全局。重点覆盖三处：
- 标题栏底边和确认按钮：依赖
--layui-color-primary，确保它已设为期望值 - 确认按钮文字和背景：加一条
.layui-layer-btn .layui-layer-btn0 { background-color: var(--layui-color-primary); color: #fff; } - 关闭按钮颜色：加
.layui-layer-close { color: var(--layui-color-primary); } .layui-layer-close:hover { color: var(--layui-color-primary); }（注意 hover 不继承，必须显式写） - 如果要改弹窗背景，不要碰
--layui-bg-color（它主要影响侧边栏等），而是直接写.layui-layer { background: #fff; }或按需设box-shadow
修改后刷新弹窗不更新？检查这几点
layer 实例一旦创建，其 DOM 结构就固定了，CSS 变量变更不会触发重绘。常见误操作：
- 在
layer.open()之前设置变量，但 layer 源码里部分颜色是内联 style 写死的（比如 loading 图标 fill）——这类只能靠后续 CSS 强制覆盖 - 用了
layer.msg()或layer.alert()这类快捷方法，它们内部会复用缓存的 DOM，需调用layer.closeAll()清掉旧实例再试 - 浏览器缓存了旧版 layui.css，检查 network 面板确认加载的是 2.8+ 版本，且没被 CDN 缓存旧资源
- 自定义 skin 时写了
skin: 'my-skin'，那所有样式都走你自己的 class，CSS 变量完全失效，得同步改你自己的 CSS
复杂点在于：layui 的 CSS 变量设计初衷是服务其内置模块（如 form、table），layer 是独立组件，变量支持不彻底。想“统一”就得接受部分地方必须硬写 CSS —— 这不是 bug，是它的架构现实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
