真正可行的方式是预编译多套主题CSS文件并动态切换link标签的disabled状态：准备default.css和dark.css，HTML中一次性引入并初始启用浅色主题，JS切换时需同步关闭所有layer弹层并持久化用户偏好。
Layui 后台模板实现暗黑模式与浅色主题切换，不能靠改 CSS 变量（如 --layui-color-primary）或直接操作内联样式，因为 Layui 2.8+ 的所有组件样式（按钮、表单、弹层、表格分页等）都是 SASS 预编译生成的硬编码规则，运行时修改变量完全无效。
真正可行、官方支持、线上稳定运行的方式只有一种：预编译多套主题 CSS 文件 + 动态切换 <link> 标签的 disabled 状态。
准备多套主题 CSS 文件
从 Layui 官方源码的 themes/ 目录出发，用官方构建工具（或已发布的主题包）生成至少两套完整主题：
-
浅色主题：如
default.css或light.css -
暗黑主题：如
dark.css或gray.css（注意：官方未提供 dark 主题，需自行基于_color.scss修改主色为深灰系，并重新编译）
确保所有主题 CSS 来自同一构建源，避免类名、权重、衍生规则不一致导致样式残留或错乱。
HTML 中一次性引入全部主题
在页面 中按顺序引入，初始仅启用浅色主题：
<link id="layui-theme" rel="stylesheet" href="/css/themes/default.css"> <link rel="stylesheet" href="/css/themes/dark.css" disabled>
⚠️ 若使用 layui.all.js（含内置样式），必须让主题 CSS 在它之后加载，否则会被覆盖。
用 JS 切换主题并清理弹层残留
切换函数要精准匹配路径，且切换后必须关闭所有 layer 弹层——因为 layer 是动态追加到 document.body 的，不继承当前主题作用域，旧弹层会保留上一主题的 skin 类和内联样式：
function switchTheme(themeName) {
const links = document.querySelectorAll('link[rel="stylesheet"][href*="themes/"]');
links.forEach(link => {
link.disabled = !link.href.includes(themeName);
});
// 清除旧弹层，强制新主题生效
if (typeof layui !== 'undefined' && layui.layer) {
layui.layer.closeAll();
}
}调用示例：
- 切到暗黑模式：
switchTheme('dark'); - 切回浅色：
switchTheme('default');
持久化用户偏好（可选但推荐）
把用户选择存入 localStorage，页面加载时自动激活对应主题：
// 页面初始化时读取
const savedTheme = localStorage.getItem('layui-theme') || 'default';
switchTheme(savedTheme);
<p>// 切换时保存
function setTheme(themeName) {
localStorage.setItem('layui-theme', themeName);
switchTheme(themeName);
}搭配按钮使用即可：
<button onclick="setTheme('default')">浅色</button>
<button onclick="setTheme('dark')">暗黑</button>不复杂但容易忽略。
