前置代码:electron (一) 快速入门
首先,让我们编辑我们的接口,以便可以在光线和暗色的 模式之间切换。 这个基本的界面包含更改 原生主题 设置的按钮,并且包含一个文本元素,指明了哪些 主题 值被选中
将以下内容添加到 index.html 文件:
<!doctype html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>electron</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>hello world</h1>
<p>当前主题: <strong id="theme-source">系统默认</strong></p>
<button id="toggle-dark-mode">切换暗黑模式</button>
<button id="reset-to-system">重置为系统默认</button>
<script src="renderer.js"></script>
</body>
</html>
接下来,添加renderer.js文件,设置按钮点击方法:
const { ipcRenderer } = require('electron')
document.getElementById('toggle-dark-mode').addEventListener('click', async () => {
const isDarkMode = await ipcRenderer.invoke('dark-mode:toggle')
document.getElementById('theme-source').innerHTML = isDarkMode ? '暗色' : '明亮'
})
document.getElementById('reset-to-system').addEventListener('click', async () => {
await ipcRenderer.invoke('dark-mode:system')
document.getElementById('theme-source').innerHTML = '系统默认'
})
然后在创建窗口里将点击事件注册到渲染进程中,这里是main.js
const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron')
function createWindow() {
//创建浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
}
})
//为应用加载index.html
win.loadFile('index.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'
})
//打开开发者工具
win.webContents.openDevTools()
}
最后创建style.css文件,自定义背景色和字体颜色
@media(prefers-color-scheme:dark){
body{background:#333;color:white}
}
@media(prefers-color-scheme:light){
body{background:#fff;color:black}
}
启动 Electron 应用程序后,你可以通过点击相应按钮更改模式或将 主题重置为系统默认值。