效果图
核心
Electron的 nativeTheme.themeSource属性，值是string。有三个参数：system, light 和 dark，用来覆盖、重写Chromium内部的相应的值
| Election的api | 描述 | 值 |
|---|---|---|
| nativeTheme.themeSource | 被用来覆盖、重写Chromium内部的相应的值 |
system, light 和 dark |
相关文档地址：https://www.electronjs.org/zh/docs/latest/api/native-theme#nativethemethemesource
目录结构
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- 内容安全策略-->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<meta
http-equiv="X-Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<!-- 样式表 -->
<link rel="stylesheet" type="text/css" href="./styles.css">
<!--窗口标题-->
<title>切换应用主题颜色的案例</title>
</head>
<body>
<h1>切换应用主题颜色</h1>
<p>当前主题颜色: <strong id="theme-source">system</strong>色</p>
<button id="toggle-dark-mode">切换颜色模式</button>
<button id="reset-to-system">重置为系统色</button>
</body>
<!-- 加载渲染进程的 renderer.js 文件 -->
<script src="./renderer.js"></script>
</html>
main.js
//引入electron模块 app, BrowserWindow
const {app, BrowserWindow,ipcMain, nativeTheme} = require('electron/main') //引入electron模块, app
const path = require('node:path') //引入path模块
//创建窗口
const createWindow = () => {
const win = new BrowserWindow({
//设置窗口大小 宽度800 高度600
width: 800,
height: 600,
webPreferences: { //网页设置
preload: path.join(__dirname, 'preload.js') //设置预加载脚本
}
})
//加载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' //切换到系统主题
})
//当Electron完成初始化并且准备创建窗口时调用createWindow()
app.whenReady().then(() => {
//在应用准备就绪时调用函数
createWindow()
//如果没有窗口打开则打开一个窗口 (macOS) 这个是必须处理的兼容性问题
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
/**
* 关闭所有窗口时退出应用 (Windows & Linux) 这个是必须处理的兼容性问题。
* 这段代码是用于Electron框架中的事件监听，具体是监听window-all-closed事件。这个事件会在所有窗口都被关闭时触发。
* 代码中的逻辑是，如果当前操作系统平台不是macOS（'darwin'），则在所有窗口关闭后退出应用程序。
* */
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
preload.js
/**
* 预加载脚本在加载“index.html”之前运行在渲染器中。
* 它可以访问Web API以及Electronic的渲染器处理模块和一些多边填充Node.Js功能。
* https://www.electronjs.org/docs/latest/tutorial/sandbox
*/
// 引入electron模块，
const { contextBridge, ipcRenderer } = require('electron/renderer')
//contextBridge用于暴露接口到主进程
contextBridge.exposeInMainWorld('darkMode', {
toggle: () => ipcRenderer.invoke('dark-mode:toggle'), // 切换暗黑模式
system: () => ipcRenderer.invoke('dark-mode:system') // 切换系统默认模式
})
renderer.js
/**
* 当点击切换按钮“toggle-dark-mode”时，切换系统主题并更新主题状态
*/
document.getElementById('toggle-dark-mode').addEventListener('click', async () => {
const isDarkMode = await window.darkMode.toggle() // 切换系统主题
document.getElementById('theme-source').innerHTML = isDarkMode ? 'Dark' : 'Light' // 同时，更新主题状态
})
/**
* 当点击切换按钮“reset-to-system”时，恢复系统默认主题并更新主题状态
*/
document.getElementById('reset-to-system').addEventListener('click', async () => {
await window.darkMode.system() // 设置为系统默认主题
document.getElementById('theme-source').innerHTML = 'System' // 同时，更新主题状态
})
style.css
:root {
color-scheme: light dark;
}
/*这里是替换的样式代码 start*/
@media (prefers-color-scheme: dark) {
body { background: #333; color: white; }
}
@media (prefers-color-scheme: light) {
body { background: #ddd; color: black; }
}
/*这里是替换的样式代码 end*/
看效果，命令行，运行
npm start
