不能直接用标签切换本地CSS文件实现可靠主题切换，因Electron打包后资源在asar内、file://路径失效、跨平台不一致、缓存难清且样式无法强制刷新；应动态注入CSS文本并同步nativeTheme.themeSource。
不能直接用 <link rel="stylesheet"> 标签靠改 href 切换本地 CSS 文件来实现可靠的主题切换——路径会失效、缓存难清、跨平台不一致，且 Electron 打包后资源在 asar 内无法用 file:// 直接访问。
为什么 <link href="./themes/dark.css"> 在 Electron 里大概率失效
Electron 渲染进程加载 HTML 时，CSS 的相对路径是相对于当前 HTML 的 file:// URL 解析的。开发时可能正常，但一旦用 electron-builder 打包，所有资源被塞进 resources/app.asar，./themes/dark.css 就找不到；即使解压 asar，Windows/macOS/Linux 路径格式不同，file:// 协议还受 webSecurity: true 默认拦截。
- 别硬写
href="file:///C:/.../dark.css"—— 路径不可移植、权限被拒、asar 下根本不存在该文件系统路径 - 别依赖构建后手动拷贝 CSS 到输出目录再配相对路径 —— Vite/Webpack 等工具会重命名或哈希文件名，
dark.css可能变成dark.abc123.css -
<link>标签加载后无法强制刷新样式表，切换时旧规则仍生效，容易样式残留
推荐做法：用 document.createElement('style') 动态注入 CSS 文本
把主题 CSS 写成字符串或模块导出，运行时创建 <style></style> 标签插入 ，绕过路径解析和缓存问题。这是 Electron 官方文档明确推荐的动态样式控制方式。
- 主题 CSS 应定义为纯字符串或 ES 模块导出（如
export const darkTheme = `:root { --bg: #111; }`），避免任何外部路径引用 - 每次切换前先移除旧的
<style id="theme-style"></style>，再插入新的，确保无残留 - 若主题含字体、图片等资源，统一转为内联 data URL 或通过
preload.js注入 base64 字符串，不走文件路径 - 示例代码片段：
function applyTheme(cssText) { const style = document.getElementById('theme-style') || document.createElement('style'); style.id = 'theme-style'; style.textContent = cssText; document.head.appendChild(style); } applyTheme(darkTheme); // 切换暗色
配合 nativeTheme.themeSource 同步系统偏好
仅靠 JS 注入 CSS 不足以让原生 UI（如文件对话框、窗口标题栏）响应主题。必须调用主进程的 nativeTheme.themeSource 设置，并监听其变化触发渲染进程更新。
立即学习“前端免费学习笔记（深入）”；
- 主进程设置：
nativeTheme.themeSource = 'dark'或'light'或'system' - 渲染进程需通过 IPC 订阅主题变更事件，而非只依赖
prefers-color-scheme媒体查询——后者只响应系统级切换，不响应用户手动选择 - IPC 通信建议用
invoke/handle而非send/on，避免竞态：用户快速连点两次“切暗色”，应确保最终状态与主进程一致 - 注意 macOS 10.15+ 的
automatic模式：若要支持，Info.plist中需设NSRequiresAquaSystemAppearance = false，否则isDarkMode返回值不准
真正麻烦的不是写几行 CSS，而是让「自定义变量 + 动态注入 + 原生控件响应 + 打包路径稳定」四者同时成立。多数人卡在第二步就回退到改 class="dark"，结果滚动条、按钮边框、字体粗细全不匹配系统——那不是主题切换，只是换个 class 名而已。
