客户端开发（Electron）主题切换

前端小鑫同学

发布于 2022-12-26 09:51:08

1.3K0

发布于 2022-12-26 09:51:08

Dear，大家好，我是“前端小鑫同学”，😇长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～

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";
  });
复制代码