theme 参数仅生成空 class（如 layui-laypage-red），官方 css 未定义其样式，故无效；须手动覆盖 .layui-laypage a 等类并加 !important 才能生效。
laypage.render() 的 theme 参数不控制视觉主题
直接往 laypage.render() 里传 theme: 'red' 或 theme: '#ff6b6b' 不会改变按钮颜色、背景或边框——这个参数只影响分页容器的 class 名（如生成 layui-laypage-red），但 Layui 官方 CSS 中根本没定义这个类的样式规则。你写的 theme 值最终只是挂了个空 class，对视觉毫无作用。
常见错误是查文档看到 “theme” 字段就以为能换肤，结果改完刷新页面，样式纹丝不动。这不是你代码写错了，是理解偏差。
真正生效的方式：覆盖 .layui-laypage 相关 CSS 类
Layui 分页的样式完全由以下几类 CSS 控制，必须手动覆盖：
-
.layui-laypage a：所有页码按钮（含“上一页”“下一页”）的基础样式 -
.layui-laypage .layui-laypage-curr：当前页按钮容器 -
.layui-laypage .layui-laypage-em：当前页按钮内部那个小圆角背景块 -
.layui-laypage em：渲染“共 x 条”的文字节点 -
.layui-laypage .layui-laypage-spr：省略号（…）
由于 Layui 渲染时会注入内联 style，比如 style="background-color: #009688;"，普通 CSS 选择器压不住，所以关键属性必须加 !important：
.layui-laypage a {
background-color: #4a9ff5 !important;
color: #fff !important;
border: 1px solid #4a9ff5 !important;
}
.layui-laypage .layui-laypage-curr {
background-color: #4a9ff5 !important;
color: #fff !important;
}
.layui-laypage .layui-laypage-curr .layui-laypage-em {
background-color: #4a9ff5 !important;
}
多个主题共存时怎么切换
如果项目需要运行时切换红/蓝/灰主题，不能靠 JS 动态改 CSS 变量（Layui 2.8+ 的变量已在构建时静态编译，改了无效），唯一可靠路径是预置多套 CSS 文件，通过控制 <link> 标签的 disabled 属性切换：
- 准备
themes/red.css、themes/blue.css等，每套都包含完整覆盖规则 - HTML 中一次性引入全部：
<link id="layui-theme" rel="stylesheet" href="/css/themes/blue.css">，其余设disabled - 切换时执行：
document.getElementById('layui-theme').setAttribute('href', '/css/themes/red.css')，再把其他<link>的disabled设为true
注意：所有主题 CSS 必须来自同一构建源（推荐用官方主题构建工具），否则类名或权重可能不一致，导致样式错乱。
容易被忽略的坑：加载时机和作用域
样式没生效？大概率不是选择器写错，而是：
- 自定义 CSS 在
layui.all.js加载前就插入了——Layui 的分页 CSS 是 JS 渲染后才注入 DOM 的，你的样式必须后于它加载 - 用了 Vue 单文件组件且启用了
scoped，CSS 无法穿透到.layui-laypage这类外部类，得用:deep(.layui-laypage a) - 分页在 iframe 或动态内容中重复渲染，导致样式被重置——应在
done回调里再次注入样式 - “共 x 条”文字是纯文本节点，没有 class，
.layui-laypage em可改颜色，但不能移动位置
复杂点不在写几行 CSS，而在于确保它真正在分页 DOM 渲染完成后、且作用域正确的位置生效。
