Electron中CSS变量换肤的核心限制在于主进程无法直接操作渲染进程的CSSOM，所有样式变更必须在渲染进程内通过JavaScript动态设置，如document.documentElement.style.setProperty()，且需借助contextBridge与IPC桥接实现安全通信。
Electron中CSS变量换肤的核心限制在哪
Electron本身不干预CSS解析，但它的渲染进程（Chromium内核）对CSS变量的支持完全取决于所用Chromium版本。Electron 13+（对应Chromium 91+）已稳定支持:root级CSS变量及getComputedStyle()读取，但关键限制在于：主进程无法直接操作渲染进程的CSSOM，所有样式变更必须通过Web内容可执行的方式触发。
这意味着你不能在主进程中调用document.documentElement.style.setProperty()——那行不通。换肤逻辑必须落在渲染进程内部，或通过预加载脚本桥接。
如何安全地从主进程触发CSS变量更新
最可靠的方式是利用Electron的contextBridge + ipcRenderer，把主题数据“注入”到渲染进程后由前端统一应用：
- 主进程发送主题配置（如
{ primary: '#4a6fa5', bg: '#f8f9fa' }） viaipcRenderer.send('theme:update', config) - 预加载脚本暴露一个安全接口（如
window.setThemeVars = (vars) => { ... }），仅接受对象，不执行任意代码 - 渲染进程收到IPC消息后，遍历
vars键值对，调用document.documentElement.style.setProperty('--' + key, value) - 所有CSS规则需预先定义在样式表中，例如
body { background-color: var(--bg); }，不能靠JS动态生成整套CSS
常见错误：直接在IPC回调里拼接<style></style>标签插入DOM——这会绕过CSS变量机制，且多次插入导致样式表膨胀；也容易触发CSP报错。
深色/浅色模式自动适配要避开哪些坑
Electron不提供系统级暗色模式监听的原生API，必须依赖Chromium的prefers-color-scheme媒体查询 + 主动轮询或IPC同步：
- 渲染进程可用
window.matchMedia('(prefers-color-scheme: dark)').matches获取当前系统偏好，但该值不会自动响应系统切换（Electron 22+才支持change事件） - 更稳妥的做法是：主进程用
systemPreferences.isDarkMode()定期检查（如每500ms），变化时发IPC通知 - 切勿在CSS中写
@media (prefers-color-scheme: dark) { :root { --bg: #121212; } }并指望它实时生效——CSS变量不支持媒体查询内批量重定义，必须靠JS显式设置
性能提示：频繁调用style.setProperty()本身开销极小，但若伴随大量DOM重排（比如同时改字体、阴影、边框），建议用requestIdleCallback节流。
主题持久化与首次加载的竞态问题
用户关闭再打开应用时，需要恢复上次选择的主题。这里有两个关键点：
- 存储位置：用
app.getPath('userData')下的JSON文件（如themes.json），避免存在localStorage——后者在硬重载或清除缓存时可能丢失 - 加载时机：渲染进程的
DOMContentLoaded可能早于主进程读取完配置，导致闪屏（先显示默认主题，再跳变）。解决方案是：- 预加载脚本中用
ipcRenderer.invoke()同步获取主题配置（需主进程handle注册） - 在
document.documentElement上加data-theme-pending属性，CSS中设[data-theme-pending] { opacity: 0; transition: none; }，等变量设完再移除 - 避免在
index.html里内联<style></style>覆盖变量——它会阻塞渲染且难维护
- 预加载脚本中用
主题切换不是单纯改几个颜色，而是涉及字体反锯齿、阴影深度、边框对比度等细节。这些必须提前在CSS变量中定义好语义名（如--shadow-sm、--border-subtle），而不是只存primary和bg。否则换肤后UI依然显得“没换彻底”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
