# 第15章 深色模式 ## 概述 ### 自动更新原生界面 "原生界面"包括文件选择器、窗口边框、对话框、右键菜单等——凡是 UI 由操作系统而非应用本身提供的部分都算在内。默认行为是让这些界面自动跟随操作系统的主题。 ### 自动更新自有界面 如果你的应用有自己的深色模式，应当与系统的深色模式设置同步开关。可以用 prefers-color-scheme 这个 CSS media query 来实现。 ### 手动更新自有界面 如果想手动切换浅色/深色模式，可以通过设置 nativeTheme 模块的 themeSource 属性来指定所需模式。这个属性的值会传递到 Renderer 进程，所有与 prefers-color-scheme 相关的 CSS 规则也会随之更新。 ## macOS 设置 在 macOS 10.14 Mojave 中，Apple 为所有 macOS 电脑引入了系统级深色模式。如果你的 Electron 应用支持深色模式，可以使用 nativeTheme API 让它跟随系统设置。 在 macOS 10.15 Catalina 中，Apple 又引入了新的"自动"深色模式选项。要让 nativeTheme.shouldUseDarkColors 和 Tray API 在 Catalina 的这个模式下正常工作，需要使用 Electron >=7.0.0，或者对旧版本在 Info.plist 文件中把 NSRequiresAquaSystemAppearance 设为 false。Electron Packager 和 Electron Forge 都提供了 darwinDarkModeSupport 选项，可以在构建时自动完成 Info.plist 的修改。 如果使用 Electron > 8.0.0 且想退出这套主题，则需要在 Info.plist 中把 NSRequiresAquaSystemAppearance 设为 true。注意，由于使用了 macOS 10.14 SDK，Electron 8.0.0 及以上版本实际上不允许你退出主题。 ## 示例 下面的示例展示了一个从 nativeTheme 获取主题颜色的 Electron 应用，并通过 IPC 通道提供主题切换和重置控件。 docs/fiddles/features/dark-mode (44.6.0) 在 Fiddle 中打开 main.js preload.js index.html renderer.js styles.css ```js const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron/main') const path = require('node:path') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js') } }) win.loadFile('index.html') } ``` 这段代码是如何工作的？ 从 index.html 文件开始： index.html

你好，世界！

当前主题来源：系统

切换深色模式
重置为系统主题




styles.css 文件的内容如下： styles.css@media (prefers-color-scheme: dark) {
body { background: #333; color: white; }
}

@media (prefers-color-scheme: light) {
body { background: #ddd; color: black; }
}
该示例渲染了一个包含几个元素的 HTML 页面。 元素显示当前选中的主题，两个 元素则作为控制按钮。CSS 文件使用 prefers-color-scheme 媒体查询来设置 元素的背景和文字颜色。 preload.js 脚本向 window 对象添加了一个名为 darkMode 的新 API。该 API 向渲染进程暴露了两个 IPC 通道：'dark-mode:toggle' 和 'dark-mode:system'。它还定义了 toggle 和 system 两个方法，用于从渲染进程向主进程传递消息。 preload.jsconst { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('darkMode', {
toggle: () => ipcRenderer.invoke('dark-mode:toggle'),
system: () => ipcRenderer.invoke('dark-mode:system')
})
现在，渲染进程可以安全地与主进程通信，并对 nativeTheme 对象进行必要的修改。 renderer.js 文件负责控制 的功能。 renderer.jsdocument.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'
})
通过 addEventListener，renderer.js 为每个按钮元素添加了 'click' 事件监听器。每个事件处理函数都会调用相应的 window.darkMode API 方法。 最后，main.js 文件代表主进程，包含实际的 nativeTheme API。 const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron')

const path = require('node:path')

const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})

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'
})
}

app.whenReady().then(() => {
createWindow()

app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})

app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
主进程通过这些 ipcMain.handle 方法来响应 HTML 页面上按钮的点击事件。 'dark-mode:toggle' 通道的处理器方法会先检查 shouldUseDarkColors 布尔属性，设置相应的 themeSource，然后返回当前的 shouldUseDarkColors 值。回顾渲染进程中该通道的事件监听器，正是这个处理器的返回值被用来给 元素设置正确的文字。 'dark-mode:system' 通道的处理器方法只是把 themeSource 设为 'system'，不返回任何值。对应的渲染进程事件监听器也只是 await 这个方法，不期待返回值。 用 Electron Fiddle 运行这个示例，然后点击 "Toggle Dark Mode" 按钮，应用就会在浅色和深色背景之间来回切换。