Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
上一篇通过快速入门我们搭建了最基础的HelloWorld模型,我们接下来就要在这个最基础的项目中来做后续的基础性功能实战。
主题切换在安卓、IOS、PC网站的应用的特别的广泛,在第一次接触flutter的时候第一次做状态切换的案例同样也是主题切换,巧了,学习electron的第一个案例也是,具体用到了哪些知识呢?我们先演示后总结。
<!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;
}
}
const { contextBridge, ipcRenderer } = require("electron");
contextBridge.exposeInMainWorld("darkMode", {
toggle: () => ipcRenderer.invoke("dark-mode:toggle"),
system: () => ipcRenderer.invoke("dark-mode:system"),
});
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小点: