Layui 卡片组件需手动适配深色模式，通过 CSS 变量或类名切换实现，重点保障文字、边框、阴影在深色背景下的可读性与层次感，确保对比度≥4.5:1，并避免纯黑硬边。
Layui 的 card 卡片组件本身不内置深色模式支持，需手动适配 CSS 变量或类名切换，并重点优化文字、边框、阴影在深色背景下的可读性与视觉层次。核心是控制对比度（文本与背景亮度差 ≥ 4.5:1）、降低视觉噪点、避免纯黑硬边。
用 CSS 变量统一管理深色主题色值
在全局样式中定义明/暗两套变量，便于维护和切换：
示例（放入-
--card-bg：浅色模式设为
#fff，深色模式改为#1e1e1e（非纯黑，更柔和） -
--card-text：浅色下用
#333，深色下用#e0e0e0（确保对比度达标） -
--card-border：浅色用
#eee，深色用#333（避免过重边框） -
--card-shadow：深色模式下调低阴影透明度（如
rgba(0,0,0,0.2)），避免“浮空感”过强
为 card 添加深色模式 class 并动态切换
Layui 卡片默认无主题类，需手动添加语义化类名（如 layui-card-dark），再配合 JS 控制：
- 初始化时检测系统偏好：
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) - 给
.layui-card外层容器（或 body）添加dark-mode类，CSS 中用.dark-mode .layui-card覆盖样式 - 提供手动开关按钮，用 JS 切换 class 并 localStorage 记住用户选择
关键对比度检查与微调建议
不能只依赖“看起来还行”，需验证 WCAG AA 标准：
- 标题文字（
.layui-card-header）在深色卡片上应 ≥ 16px 加粗，颜色推荐#f0f0f0（对比度约 7.2:1） - 正文文字（
.layui-card-body p）避免用#999（在 #1e1e1e 上对比度仅 ~2.8:1），改用#c0c0c0或更高亮度 - 图标/装饰色（如
.layui-card-header i）若使用品牌蓝，在深色下可能发灰，建议提升饱和度或加描边 - 悬停态（
.layui-card:hover）避免仅靠背景变深，可叠加轻微内阴影或 border-color 微调增强反馈
兼容旧版 Layui（2.8.x 及以下）的稳妥写法
因老版本不支持 CSS 变量，推荐用 class 命名空间方式覆盖：
- 不修改 layui.css，新建
layui-dark.css，用.layui-card-dark .layui-card-header精确作用 - 对
.layui-card-body内的表格、按钮等子组件，也需单独适配（例如.layui-card-dark .layui-btn） - 使用
filter: brightness(1.05)对图片或 iconfont 做轻量提亮（慎用，仅限局部）
