Layui laydate 的 theme 参数仅支持预设字符串（如"default"）、十六进制色值（如"#ff5722"）和带.laydate-theme-前缀的自定义类名；自定义类名需完整定义标题栏、hover、当前日期等所有衍生样式，且CSS必须在layui.css之后加载并确保类名拼写正确。
直接传 theme 参数最简单，但颜色不生效？大概率是没配对 css 类名或加载顺序错了。
theme 参数支持哪些值
laydate 的 theme 选项不是任意字符串都能用的。它只识别三类值：
- 预设字符串：
"default"、"molv"、"danlan"、"green"、"red"、"cyan"等（Layui 2.8+ 内置约 8 种） - 十六进制色值：
"#EE6B2B"、"#ff5722"—— 这会自动转为内联样式，仅影响基础色块，hover/边框/文字等衍生色可能不一致 - 自定义类名：
"yellow"或"my-theme"—— 此时必须在页面中提前定义对应 CSS 类，且类名要带.laydate-theme-前缀
自定义 theme 类名必须写对前缀和结构
比如你想用 theme: "yellow"，CSS 必须这样写，缺一不可：
.laydate-theme-yellow {
background-color: #fff;
color: #333;
}
.laydate-theme-yellow .layui-this {
background-color: #ff9800 !important;
}
.laydate-theme-yellow .layui-laydate-header {
background-color: #ff9800;
}
.laydate-theme-yellow .layui-laydate-content td:hover {
background-color: #ffecb3 !important;
}
注意点：
- 类名必须是
.laydate-theme-yellow，不是.layui-laydate-theme-yellow或.yellow -
.layui-this要加!important，否则默认样式权重更高 - 只改
.layui-this不够——标题栏、hover、禁用态、边框等都要手动补全，否则视觉割裂
为什么改了 CSS 还是不生效
常见原因有四个：
-
layui.css和你自定义 CSS 的加载顺序反了：确保自定义样式在layui.css之后引入 - 用了 CDN 引入
layui.all.js，但没同步加载配套的layui.css（layui.all.js不含 CSS） - 主题类名拼错，比如写成
.laydate-them-yellow少了个e - 页面已渲染完才注入 CSS，此时 laydate 实例已挂载，新样式不会自动应用；需调用
laydate.render()重绘，或在ready回调里强制刷新 DOM 样式
想动态换肤？别用 JS 改单个变量
Layui 的主题不是靠 CSS 变量驱动的，:root { --layui-color-primary: #xxx } 在最终生成的 layui.css 里早已被编译掉。强行覆盖变量无效。
真正能稳定换肤的方式只有一种：
- 准备多套完整主题 CSS 文件（如
themes/yellow.css、themes/blue.css） - 全部
<link>预加载，初始仅启用一个 - 切换时用 JS 控制
disabled属性：document.getElementById('theme-link').disabled = true - 特别注意：layer 弹层样式也要包含在主题 CSS 中，否则弹窗颜色会错乱
复杂点在于——每个主题 CSS 必须重写所有 .laydate-* 和 .layui-laydate-* 规则，漏一条就可能回退到默认蓝。
