diff --git a/docs/fiddles/features/macos-dark-mode/main.js b/docs/fiddles/features/macos-dark-mode/main.js index e74b345d367a..4f0254e95bd8 100644 --- a/docs/fiddles/features/macos-dark-mode/main.js +++ b/docs/fiddles/features/macos-dark-mode/main.js @@ -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() - } -}) diff --git a/docs/fiddles/features/macos-dark-mode/preload.js b/docs/fiddles/features/macos-dark-mode/preload.js new file mode 100644 index 000000000000..3def9e06ed8e --- /dev/null +++ b/docs/fiddles/features/macos-dark-mode/preload.js @@ -0,0 +1,6 @@ +const { contextBridge, ipcRenderer } = require('electron') + +contextBridge.exposeInMainWorld('darkMode', { + toggle: () => ipcRenderer.invoke('dark-mode:toggle'), + system: () => ipcRenderer.invoke('dark-mode:system') +}) diff --git a/docs/fiddles/features/macos-dark-mode/renderer.js b/docs/fiddles/features/macos-dark-mode/renderer.js index 737f19f51cbe..637f714c2240 100644 --- a/docs/fiddles/features/macos-dark-mode/renderer.js +++ b/docs/fiddles/features/macos-dark-mode/renderer.js @@ -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' }) diff --git a/docs/tutorial/dark-mode.md b/docs/tutorial/dark-mode.md index 2bbda10435c7..5ac69241ebae 100644 --- a/docs/tutorial/dark-mode.md +++ b/docs/tutorial/dark-mode.md @@ -47,18 +47,18 @@ of this theming, due to the use of the macOS 10.14 SDK. ## Example -We'll start with a working application from the -[Quick Start Guide](quick-start.md) and add functionality gradually. +This example demonstrates an Electron application that derives its theme colors from the +`nativeTheme`. Additionally, it provides theme toggle and reset controls using IPC channels. -First, let's edit our interface so users can toggle between light and dark -modes. This basic UI contains buttons to change the `nativeTheme.themeSource` -setting and a text element indicating which `themeSource` value is selected. -By default, Electron follows the system's dark mode preference, so we -will hardcode the theme source as "System". +```javascript fiddle='docs/fiddles/features/macos-dark-mode' -Add the following lines to the `index.html` file: +``` -```html +### How does this work? + +Starting with the `index.html` file: + +```html title='index.html' @@ -80,65 +80,70 @@ Add the following lines to the `index.html` file: ``` -Next, add [event listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) -that listen for `click` events on the toggle buttons. Because the `nativeTheme` -module only exposed in the Main process, you need to set up each listener's -callback to use IPC to send messages to and handle responses from the Main -process: +And the `style.css` file: -* when the "Toggle Dark Mode" button is clicked, we send the -`dark-mode:toggle` message (event) to tell the Main process to trigger a theme -change, and update the "Current Theme Source" label in the UI based on the -response from the Main process. -* when the "Reset to System Theme" button is clicked, we send the -`dark-mode:system` message (event) to tell the Main process to use the system -color scheme, and update the "Current Theme Source" label to `System`. +```css title='style.css' +@media (prefers-color-scheme: dark) { + body { background: #333; color: white; } +} -To add listeners and handlers, add the following lines to the `renderer.js` file: +@media (prefers-color-scheme: light) { + body { background: #ddd; color: black; } +} +``` -```javascript -const { ipcRenderer } = require('electron') +The example renders an HTML page with a couple elements. The `` + element shows which theme is currently selected, and the two `