Electron案例解析——切换主题颜色的案例

效果图

切换主题颜色

核心

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" /><!-- 内容安全策略--><metahttp-equiv="Content-Security-Policy"content="default-src 'self'; script-src 'self'"/><metahttp-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 高度600width: 800,height: 600,webPreferences: {  //网页设置preload: path.join(__dirname, 'preload.js') //设置预加载脚本}})
//加载index.htmlwin.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*/