Layui如何修改Layui默认的UI主题颜色（换肤功能实现）

直接修改 layui.css 中的 CSS 变量不生效，因其采用静态编译，变量已被替换为固定色值；唯一有效方式是替换整套主题 CSS 文件，并通过切换 <link> 的 disabled 属性实现换肤。直接改 layui.css 里的变量不生效？因为没走 CSS 变量流程layui 2.8+ 确实引入了 css 自定义属性（--layui-color-primary 等），但默认构建时是「静态编译」的------也就是这些变量只在源码 sass 中起作用，最终生成的 layui.css 里变量已被替换成固定色值。直接在 html 里用 :root 覆盖，或者用 js 动态改 document.documentelement.style，大概率无效。真正能生效的方式只有一种：替换整套主题 CSS 文件。必须使用 Layui 官方提供的主题构建工具或预编译好的主题包（如 layui-theme-blue.css）不能靠改单个颜色变量"打补丁"，Layui 的组件样式强依赖色值衍生规则（比如 hover、disabled、边框阴影等都由主色自动计算）如果你用的是 CDN 引入的 layui.all.js，它自带的 CSS 是锁定的，换肤必须额外加载主题 CSS 并手动切换 <link>如何加载并切换多个主题 CSS（纯前端无构建）核心思路：预置几套主题 CSS 文件，通过 JS 控制 <link rel="stylesheet"> 的 disabled 属性切换激活状态。下载对应主题 CSS（例如从 Layui 源码 themes 目录编译出 themes/default.css、themes/red.css、themes/gray.css）在页面 <head> 中一次性引入所有主题，初始仅启用一个：<link id="layui-theme" rel="stylesheet" href="/css/themes/default.css"><link rel="stylesheet" href="/css/themes/red.css" disabled><link rel="stylesheet" href="/css/themes/gray.css" disabled>切换时用 JS 批量操作：function switchTheme(themeName) { const links = document.querySelectorAll('link[rel="stylesheet"][href*="themes/"]'); links.forEach(link => { link.disabled = !link.href.includes(themeName); });}注意：必须确保所有主题 CSS 的选择器权重一致，否则旧样式残留（比如你加了 !important 就可能覆盖失败）用 JS 动态注入主题 CSS 时遇到 layer 样式错乱？因为 layer 的弹层是动态追加到 document.body 的，它不继承当前主题 CSS 的作用域，且部分样式（如 .layui-layer-title）在主题文件中可能被重复定义或遗漏。唱鸭音乐创作全流程的AI自动作曲工具，集 AI 辅助作词、AI 自动作曲、编曲、混音于一体