换肤核心是动态替换layui.css的href属性值。需确保各皮肤CSS遵循原类名结构，通过localStorage保存皮肤标识并提前在DOM加载时切换link标签href，避免闪屏和样式错乱，同时处理IE11兼容性及组件弹层重绘问题。
换肤核心：动态切换 layui.css 的 href
Layui 本身不提供换肤 API，但它的 CSS 是纯静态资源，换肤本质就是替换 <link> 标签的 href 指向不同主题 CSS 文件。必须确保所有皮肤 CSS 都遵循 Layui 原有类名和结构（比如 .layui-btn、.layui-nav 等不能改），否则样式会错乱。推荐从官方皮肤（如 layui-v2.9.10/skin/default/layui.css）复制出多个副本，再用工具（如 VS Code 多光标 + 正则）批量修改颜色变量（@color-primary、@color-bg 等），编译为独立 CSS 文件，例如：skin-blue.css、skin-green.css。
保存配置到 localStorage 要避开 undefined 和初始态问题
页面首次加载时，localStorage 里没有皮肤记录，直接读取会是 null，如果代码写成 let skin = localStorage.getItem('layui-skin') || 'default'，看似稳妥，但要注意：Layui 默认不加载任何皮肤 CSS，它依赖你手动引入的 <link id="layui-theme">。所以必须在 DOM 加载后、Layui 初始化前就完成皮肤加载。常见错误是把换肤逻辑放在 layui.use 回调里，这时页面已渲染完毕，再切 CSS 会导致闪屏或部分组件未生效。
- 在
底部或开头立即执行皮肤加载逻辑（不用等DOMContentLoaded） - 用
document.getElementById('layui-theme').setAttribute('href', skinPath)替换链接，不要用remove + append，避免重绘抖动 - 保存时统一用字符串键名，例如
localStorage.setItem('layui-skin', 'blue')，不要存路径或对象
绑定换肤按钮要防止重复初始化和事件泄漏
如果换肤按钮是动态插入（比如在弹窗或 tab 页里），多次点击可能重复绑定 click 事件，导致一次点击触发多次切换。更隐蔽的问题是：Layui 的 form.on('switch') 或自定义按钮如果没做防抖或状态同步，用户快速连点可能让 localStorage 和实际 CSS 不一致（比如点两下，存了 'green'，但最终加载的是 'default'）。
- 给换肤按钮加
data-skin="blue"属性，而不是在 JS 里硬编码路径 - 点击时先更新
localStorage，再同步改<link>的href，顺序不能反 - 如果用了 Layui 的
form.render('switch')，记得每次切换后调用form.val('skin-form', {skin: 'blue'})同步表单值
兼容性注意：IE11 下 localStorage 可能被禁用或抛异常
部分企业内网环境或旧版 IE11 会因隐私策略禁用 localStorage，直接调用会报 SecurityError。不能只靠 try-catch 忽略，得降级处理——比如 fallback 到 cookie 或纯内存缓存（刷新即丢）。另外，Layui 2.x 不支持 ESM，所有皮肤 CSS 必须通过 <link> 引入，不能用 import 动态加载，否则 Webpack 打包时会被当成普通资源处理，路径容易出错。
最易被忽略的一点：换肤后，Layui 内部某些组件（如 laydate、layedit）的弹层样式依赖全局 CSS，但它们的 DOM 是运行时插入的，如果皮肤 CSS 加载晚于这些组件首次渲染，弹层可能仍用旧色。解决办法是在换肤后手动触发一次 laydate.render() 重绘（如果已存在实例），或确保皮肤 CSS 在 中优先于所有 Layui JS 加载。
