layui怎么修改全局默认的主题配色方案（绿色改蓝色）-Layui教程-PHP中文网

必须用预编译主题CSS文件切换，因Layui 2.8+衍生色硬编码在构建时，全局替换颜色值会导致悬停、禁用、弹层等样式错乱；局部改色需限定作用域并覆盖所有状态。

layui怎么修改全局默认的主题配色方案（绿色改蓝色）

直接改 `layui.css` 里的颜色值没用

你找到 --layui-color-primary 或 #009688 全局替换为 #1890ff，表面看按钮变蓝了，但鼠标悬停后跳成深绿、禁用按钮边框消失、弹层标题和按钮色不一致——这是因为 Layui 2.8+ 所有衍生色（hover 色、disabled 边框、阴影偏移、文字反色）都在构建时硬编码进 CSS，不是靠 CSS 变量实时计算的。改一个值，漏掉几十处依赖它的规则。

必须用预编译主题 CSS 文件切换

官方唯一支持的方式是：用 Layui 源码中 themes/ 目录 + 官方构建工具（或直接下载已编译好的 layui-theme-blue.css），生成完整主题文件，再通过控制启用状态。

把 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框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

必须用父级限定选择器：.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" 下的渐变色无法微调