不能。Layui 不监听 prefers-color-scheme，也无内置暗色模式逻辑，需手动监听媒体查询并动态切换 body 类名（如 layui-layout-black），再针对性补全表单、表格、弹窗、图标等 CSS 样式适配。
layui 能不能直接响应 prefers-color-scheme？
不能。Layui 本身不监听 prefers-color-scheme，也没有内置 dark mode 切换逻辑。它的主题（如 layui.css）是静态加载的，CSS 变量、组件样式、图标颜色等都不随系统偏好自动更新。
怎么让 layui 页面跟随系统深色/浅色模式？
核心思路是：用 JavaScript 检测 matchMedia('(prefers-color-scheme: dark)')，再动态切换 layui 的皮肤类名（layui-layout-black 或自定义 class），并补全缺失的样式适配点。
- 先确保你用的是 Layui 2.8+（支持
layui-layout-black类，旧版需手动 patch） - 在
上添加初始 class：layui-layout-white（浅色）或layui-layout-black（深色），避免闪屏 - 监听媒体查询变更，动态增删 class：
const darkMode = window.matchMedia('(prefers-color-scheme: dark)'); function updateTheme(e) { document.body.classList.toggle('layui-layout-black', e.matches); document.body.classList.toggle('layui-layout-white', !e.matches); } darkMode.addEventListener('change', updateTheme); updateTheme(darkMode); // 立即执行一次 - 注意：
layui-layout-black仅影响导航栏、侧边栏、部分按钮背景，**表单控件、表格、弹窗、图标颜色不会自动变**，必须额外覆盖
哪些 layui 元素需要手动补样式？
layui 的 CSS 没有使用 CSS 自定义变量，所以深色模式下很多元素会发灰、对比度不足或文字看不见。重点要修：
-
.layui-form-item .layui-input、.layui-select、.layui-textarea：背景和边框色需重写 -
.layui-table th、.layui-table td：默认白底黑字，在深色下要反色 -
.layui-layer-title、.layui-layer-content：弹窗标题和内容背景需适配 -
.layui-icon：图标默认是 #c2c2c2，在深色下几乎不可见，得设成color: #fff或更亮的灰 - 所有带
background: #fff的地方，基本都要加body.layui-layout-black &前缀重写
有没有更轻量的替代方案？
如果你只是想快速启用基础深色支持，又不想大改 CSS，可以绕过 layui-layout-black，直接用 CSS 媒体查询 + 自定义变量（兼容性要求 Chrome 99+/Safari 15.4+）：
@media (prefers-color-scheme: dark) {
:root {
--layui-bg-primary: #1e1e1e;
--layui-text-title: #fff;
--layui-text-normal: #ccc;
}
body { background: var(--layui-bg-primary); }
.layui-form-item .layui-input { background: #2d2d2d; border-color: #444; }
/* 其他逐个覆盖 */
}
但要注意：layui 绝大部分样式没用 CSS 变量，所以这种写法只能局部生效，不如直接监听 + class 切换来得可控。真正稳定的做法还是监听 + 动态 class + 少量关键 CSS 补丁。
最常被忽略的一点：layui.use 加载的模块（比如 form、table）初始化后生成的 DOM 是“一次性”的，它们的内联样式或 class 不会响应后续的 body class 变更 —— 所以补样式必须用 CSS 选择器兜底，不能依赖 JS 重渲染。
