electron中无法动态注入less变量，因less在构建阶段已编译为静态css；真正可行的是通过css自定义属性（如--primary-color）和运行时样式注入实现动态换肤。
Electron里不能“动态注入Less变量”，因为Less在构建阶段就编译完了，运行时JS改不了@primary-color——你看到的只是最终生成的background: #1890ff。真正能动的只有CSS自定义属性（--primary-color）和运行时样式注入。
为什么modifyVars在Electron里基本没用
modifyVars是构建期配置，只在Webpack/Vite启动或重编译时生效。Electron渲染进程启动后，所有Less早已变成静态CSS，less.modifyVars()在浏览器端调用会报错或静默失败。更关键的是：Electron dev server重启一次要几秒，用户点个换肤按钮等这么久？不现实。
- Webpack配置里写
modifyVars: { '@primary-color': '#ff6b6b' }→ 只影响下一次打包，不是运行时API - 试图在渲染进程中
require('less')并调less.render()→ 现代Electron默认禁用nodeIntegration，且性能极差、无HMR、无法隔离组件 - 路径写
./themes/dark.less然后import→ 构建工具会把它打到bundle里，不是运行时加载
Electron中真正可行的动态换肤路径
分两层：Less负责编译时“留接口”，JS负责运行时“填值”。核心是让Less输出var(--primary-color, #1890ff)，而不是直接算出颜色。
- Less里必须用
~"var(--primary-color, #1890ff)"声明变量，波浪号防止Less解析，否则darken(@primary-color, 10%)这类运算会崩 - 主题切换时，统一往
document.documentElement写变量：document.documentElement.style.setProperty('--primary-color', '#52c418') - 深色模式建议用class控制：
document.documentElement.classList.toggle('theme-dark')，再配.theme-dark { --primary-color: #4a5568; }，避免大量setProperty调用 - SSR或首屏渲染场景，主进程需提前把
theme=dark写进HTML的，否则白屏闪动
Electron专属坑：路径、安全与加载时机
Electron用file://协议加载本地资源，CSS变量注入必须确保样式已就绪，且不被CSP拦截。
- CSS文件用相对路径或
path.join(__dirname, '../styles/main.css')拼接，硬写./styles/main.css在打包后大概率404 - 禁用
nodeIntegration时，别在渲染进程直接fs.readFileSync读取主题CSS——得通过preload脚本暴露安全API - 动态
<style></style>注入要等document.readyState === 'complete'后再执行，否则可能插到外失效 - Content-Security-Policy若限制
style-src 'self'，动态style.textContent = '...'会被阻止，得加'unsafe-inline'（不推荐）或改用CSSStyleSheet.replace()
最易被忽略的一点：Less的@import顺序决定变量是否被覆盖。如果你把theme-dark.less放在button.less后面@import，那按钮里的color: @primary-color用的还是旧值——变量作用域是线性的，不是响应式的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
