在所有窗口共用的preload.js中注入全局css并配合ipc同步主题类名，是最稳定可控的方式；因各窗口html加载路径基准不同、打包后相对路径解析不可靠、重复加载等问题，仅靠index.html的无法保证全局样式一致。
直接在所有窗口共用的 preload.js 中注入全局 CSS 内容，配合 IPC 同步主题类名，是最稳定、路径最可控的方式。靠多个 HTML 文件各自 <link rel="stylesheet"> 引入，必然因路径基准不同、打包后资源位置偏移、重复加载而失效。
为什么不能只靠 index.html 里的 加载全局 CSS
每个 BrowserWindow 独立加载 HTML，./styles/global.css 的 “当前目录” 基准各不相同：
- 主窗口
loadFile('index.html')时，./styles/global.css相对于项目根目录 - 子窗口
loadFile('windows/setting.html')时，同样写法会去找windows/styles/global.css，404 是常态 - 打包进
app.asar后，file://协议下相对路径解析更不可靠，尤其启用nodeIntegration: false时 - 多个窗口重复引入同一份 CSS，CSSOM 解析开销叠加，
!important优先级容易打架
preload.js 注入 CSS 的实操要点
把真正需要跨窗口一致的样式（如 :root 变量、重置规则、字体栈、暗色模式基础类）统一注入，而不是分散在 HTML 中：
- 用
fetch('app://./styles/global.css')或fs.readFileSync(path.join(process.resourcesPath, 'styles/global.css'), 'utf8')读取内容，避免<link>的异步加载和 FOUC -
webPreferences中必须设enableRemoteModule: false+ 注册app://协议，或改用file://+path.resolve()拼绝对路径 - 注入时机放在
document.head尽早执行，但不要用document.write—— 它会清空整个文档 - 示例代码片段：
const cssContent = await fetch('app://./styles/global.css').then(r => r.text());<br>const style = document.createElement('style');<br>style.textContent = cssContent;<br>document.head.appendChild(style);
主题类名（如 dark/light）必须 IPC 广播，不能靠 localStorage
CSS 变量只是“定义”，DOM 上没加对应类名，样式不会生效。各窗口渲染进程隔离，localStorage 不共享：
- 主进程用
nativeTheme.themeSource = 'system' | 'light' | 'dark'统一控制源头，并监听updated事件 - 通过
mainWindow.webContents.send('theme-updated', theme)和webContents.getAllWebContents().forEach(wc => wc.send(...))广播给所有窗口 - 每个窗口的
preload.js里监听：ipcRenderer.on('theme-updated', (_, theme) => {<br> document.documentElement.className = theme === 'dark' ? 'dark' : 'light';<br>}); - 禁用
nodeIntegration时，确保contextIsolation: true下仍能接收 IPC 消息 —— 这依赖 preload 脚本正确暴露ipcRenderer
鸿蒙 PC 或定制皮肤场景下的额外注意点
如果你在适配鸿蒙 PC 或做类似 Codex Dream Skin 的换肤方案，路径和变量覆盖要更谨慎：
- 鸿蒙系统要求字体栈必须显式声明
--ohos-font-md: 16px等变量，且需在:root和.dark下分别定义，不能只靠媒体查询 - 第三方皮肤包若通过修改
app.asar解包后的renderer.js注入样式，必须确保注入时机早于任何组件挂载，否则 React/Vue 渲染后才加<style></style>会导致闪动或样式丢失 - 自定义主题颜色（如
--primary: #0d9488）应只覆盖globals.css中的变量，不要重写整套 shadcn/ui 的组件规则 —— 否则升级组件库时极易冲突
最易被忽略的是：CSS 变量作用域和 DOM 类名更新的同步时机。哪怕 CSS 内容注入成功，如果 document.documentElement.className 没在同一次渲染帧里更新，或者更新时组件已 mount 完成，样式依然不会触发重计算。务必让 IPC 响应和 class 设置落在同一个微任务中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
