免費(fèi) AI IDE
Electron Dark Mode
概覽?
自動(dòng)更新原生界面?
"本地界面"包括文件選擇器、窗口邊框、對(duì)話框、上下文 菜單等 - 任何UI來自操作系統(tǒng)而非應(yīng)用的界面。 默認(rèn)行為是從操作系統(tǒng)選擇自動(dòng)主題。
自動(dòng)更新您自己的界面
如果您的應(yīng)用有自己的黑暗模式，您應(yīng)該在與系統(tǒng)黑暗模式設(shè)置同步時(shí)切換。 你可以通過 prefers-color-scheme CSS 媒體查詢來實(shí)現(xiàn)此功能.
手動(dòng)更新您自己的界面
如果你想在亮/暗模式之間手動(dòng)切換，你可以通過在 nativeTheme 模塊的 themeSource 屬性中設(shè)置所需的模式來實(shí)現(xiàn)。此屬性的值將傳播到您的渲染器進(jìn)程。任何與 prefers-color-scheme 相關(guān)的 CSS 規(guī)則都將相應(yīng)更新。
macOS 設(shè)置
在 macOS 10.14 Mojave 中， Apple 為所有 macOS 電腦引入了一個(gè)全新的 系統(tǒng)級(jí)暗色模式。 如果您的 Electron 應(yīng)用具有深色模式，您可以 使用"本機(jī) api" 應(yīng)用。
在 macOS 10.15 Catalina 中，Apple 為所有 macOS 計(jì)算機(jī)引入了一個(gè)新的“自動(dòng)”暗模式選項(xiàng)。為了讓API isDarkMode 和 Tray 在這個(gè)模式中正常工作，你需要在 Info.plist 文件里把 NSRequiresAquaSystemAppearance 設(shè)置為 false ，或者使用 >=7.0.0 的Electron。
Electron Packager 和 Electron Forge 都有一個(gè) darwinDarkModeSupport 選項(xiàng)，可以在應(yīng)用程序構(gòu)建期間自動(dòng)更改 Info.plist。
如果您希望在使用 Electron > 8.0.0 時(shí)選擇退出，則必須將 Info.plist 文件中的 NSRequiresAquaSystemAppearance 鍵設(shè)置為 true。請(qǐng)注意，由于使用 macOS 10.14 SDK，Electron 8.0.0 及更高版本不會(huì)讓您選擇退出此主題。
示例
此示例演示了Electron 應(yīng)用程序從nativeTheme中獲取主題顏色。 此外，它還使用 IPC 通道提供主題切換和重置控制。
| main.js | preload.js | index.html | renderer.js | style.css |
|
|
|
|
|
DOCS/FIDDLES/FEATURES/MACOS-DARK-MODE (22.0.2)
它是如何工作的呢？
從 index.html 文件開始：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</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>Hello World!</h1>
<p>Current theme source: <strong id="theme-source">System</strong></p>
<button id="toggle-dark-mode">Toggle Dark Mode</button>
<button id="reset-to-system">Reset to System Theme</button>
<script src="renderer.js"></script>
</body>
</body>
</html>以及 styles.css 文件：
@media (prefers-color-scheme: dark) {
body { background: #333; color: white; }
}
@media (prefers-color-scheme: light) {
body { background: #ddd; color: black; }
}該示例渲染一個(gè)包含幾個(gè)元素的 HTML 頁面。 <strong id="theme-source"> 元素顯示當(dāng)前選中的主題，兩個(gè) <button> 元素是 控件。 CSS 文件使用 prefers-color-scheme 媒體查詢
設(shè)置 <body> 元素背景和文本顏色。
preload.js 腳本在 window對(duì)象中添加了一個(gè)新的 API叫做 深色模式。 此 API 暴露兩個(gè)IPC 通道到渲染器進(jìn)程，分別為 'dark-mode:toggle' 和 'dark-mode:system'。 它還分配了兩個(gè)方法， toggle 和 system，它們將渲染器中的信息傳遞到
主進(jìn)程。
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('darkMode', {
toggle: () => ipcRenderer.invoke('dark-mode:toggle'),
system: () => ipcRenderer.invoke('dark-mode:system')
})現(xiàn)在，渲染器進(jìn)程可以安全地與主進(jìn)程通信，并對(duì)nativeTheme 對(duì)象執(zhí)行必要的變更。
renderer.js 文件負(fù)責(zé)控制 <button> 功能。
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'
})使用 addEventListener， renderer.js 文件將'click' 事件監(jiān)聽器添加到每個(gè)按鈕元素上。 每個(gè)事件監(jiān)聽處理器都會(huì)調(diào)用到相關(guān)的 window.darkmode API
方法。
最后， main.js 文件代表了主進(jìn)程并包含實(shí)際的 nativeTheme API。
const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron')
const path = require('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 方法表明主進(jìn)程如何響應(yīng)來自 HTML 頁面上 按鈕的點(diǎn)擊事件。
'dark-mode:toggle' IPC 通道處理器方法檢查 shouldUseDarkColors boolean屬性 設(shè)置對(duì)應(yīng)的 themeSource, 然后返回當(dāng)前的 shouldUseDarkColors 屬性。 回顧此 IPC 通道的渲染器進(jìn)程事件監(jiān)聽器，此處理器的返回值為 <strong id='theme-source'> 元素指定正確的文本。
'dark-mode:system' IPC 通道處理器方法將字符串 'system' 賦值到 themeSource 同時(shí)無返回值。 這也對(duì)應(yīng)于相應(yīng)的渲染器進(jìn)程事件監(jiān)聽器，因?yàn)榉椒ㄕ诘却?，且不需要返回值?
使用Electron Fiddle運(yùn)行示例，然后點(diǎn)擊“切換深色模式”按鈕； 應(yīng)用程序應(yīng)該開始在亮色和黑色背景顏色之間交替。
更多建議：