docs: update macos-dark-mode fiddle and guide content (#29198)
* update macos dark mode docs for Electron v12 * pr review fixes * more pr review fixes * reorg paragraphs for better flow * Update docs/tutorial/dark-mode.md Co-authored-by: Erick Zhao <erick@hotmail.ca> * pr fixes Co-authored-by: Erick Zhao <erick@hotmail.ca>
This commit is contained in:
parent
adb85f341b
commit
5656493676
4 changed files with 93 additions and 83 deletions
|
@ -1,11 +1,12 @@
|
|||
const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron')
|
||||
const path = require('path')
|
||||
|
||||
function createWindow () {
|
||||
const win = new BrowserWindow({
|
||||
width: 800,
|
||||
height: 600,
|
||||
webPreferences: {
|
||||
nodeIntegration: true
|
||||
preload: path.join(__dirname, 'preload.js')
|
||||
}
|
||||
})
|
||||
|
||||
|
@ -25,16 +26,18 @@ function createWindow () {
|
|||
})
|
||||
}
|
||||
|
||||
app.whenReady().then(createWindow)
|
||||
app.whenReady().then(() => {
|
||||
createWindow()
|
||||
|
||||
app.on('activate', () => {
|
||||
if (BrowserWindow.getAllWindows().length === 0) {
|
||||
createWindow()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
app.on('window-all-closed', () => {
|
||||
if (process.platform !== 'darwin') {
|
||||
app.quit()
|
||||
}
|
||||
})
|
||||
|
||||
app.on('activate', () => {
|
||||
if (BrowserWindow.getAllWindows().length === 0) {
|
||||
createWindow()
|
||||
}
|
||||
})
|
||||
|
|
6
docs/fiddles/features/macos-dark-mode/preload.js
Normal file
6
docs/fiddles/features/macos-dark-mode/preload.js
Normal file
|
@ -0,0 +1,6 @@
|
|||
const { contextBridge, ipcRenderer } = require('electron')
|
||||
|
||||
contextBridge.exposeInMainWorld('darkMode', {
|
||||
toggle: () => ipcRenderer.invoke('dark-mode:toggle'),
|
||||
system: () => ipcRenderer.invoke('dark-mode:system')
|
||||
})
|
|
@ -1,11 +1,9 @@
|
|||
const { ipcRenderer } = require('electron')
|
||||
|
||||
document.getElementById('toggle-dark-mode').addEventListener('click', async () => {
|
||||
const isDarkMode = await ipcRenderer.invoke('dark-mode:toggle')
|
||||
const isDarkMode = await window.darkMode.toggle()
|
||||
document.getElementById('theme-source').innerHTML = isDarkMode ? 'Dark' : 'Light'
|
||||
})
|
||||
|
||||
document.getElementById('reset-to-system').addEventListener('click', async () => {
|
||||
await ipcRenderer.invoke('dark-mode:system')
|
||||
await window.darkMode.system()
|
||||
document.getElementById('theme-source').innerHTML = 'System'
|
||||
})
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue