Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
前情概要：
上一篇通过快速入门我们搭建了最基础的HelloWorld模型，我们接下来就要在这个最基础的项目中来做后续的基础性功能实战。
本篇说明：
主题切换在安卓、IOS、PC网站的应用的特别的广泛，在第一次接触flutter的时候第一次做状态切换的案例同样也是主题切换，巧了，学习electron的第一个案例也是，具体用到了哪些知识呢？我们先演示后总结。
准备本篇的首页：
- 支持显示当前的主题来源：跟随系统/手动切换；
- 提供两个按钮来触发切换事件；
- 通过renderer脚本来进行渲染。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>黑暗主题</title> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> <link rel="stylesheet" type="text/css" href="./styles.css"> </head> <body> <h1>黑暗主题</h1> <p>当前主题来源：<strong id="theme-source">System</strong></p> <button id="toggle-dark-mode">开启黑暗主题模式</button> <button id="reset-to-system">重置为系统主题模式</button> <script src="renderer.js"></script> </body> </html> 复制代码
@media (prefers-color-scheme: dark) { body { background: #333; color: white; } } @media (prefers-color-scheme: light) { body { background: #ddd; color: black; } } 复制代码
预加载注入函数脚本：
- 在主窗口暴露名为darkMode对象并分配两个函数，分别将信息传到主进程中
复制代码
const { contextBridge, ipcRenderer } = require("electron");
contextBridge.exposeInMainWorld("darkMode", { toggle: () => ipcRenderer.invoke("dark-mode:toggle"), system: () => ipcRenderer.invoke("dark-mode:system"), });
复制代码
在renderer.js脚本实际操作DOM事件：
- 通过监听按钮的事件来触发预加载脚本扩展的桥接函数
document .getElementById("toggle-dark-mode") .addEventListener("click", async () => { const isDarkMode = await window.darkMode.toggle(); document.getElementById("theme-source").innerHTML = isDarkMode ? "Dark" : "Light"; }); document .getElementById("reset-to-system") .addEventListener("click", async () => { await window.darkMode.system(); document.getElementById("theme-source").innerHTML = "System"; }); 复制代码
窗口创建后在主进程监听渲染进程的执行：
- 我们需要在出进程中监听对应的事件来最终切换主题的来源
// 主进程相应HTML上的点击事件 ipcMain.handle("dark-mode:toggle", () => { if (nativeTheme.shouldUseDarkColors) { nativeTheme.themeSource = "light"; } else { nativeTheme.themeSource = "dark"; } return nativeTheme.shouldUseDarkColors; }); ipcMain.handle("dark-mode:system", () => { nativeTheme.themeSource = "system"; }); 复制代码
总结：
本篇我们初步学到了一下4小点：
- 预脚本中如何注入桥接函数；
- 渲染进程发送事件；
- 主进行监听事件；
- 主题来源的切换。
