docs: improve dark mode example fiddle (#36596)

This commit is contained in:
David Sanders 2023-01-02 02:02:15 -08:00 committed by GitHub
parent 644243efd6
commit 327abb4b52
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 18 additions and 14 deletions

View file

@ -11,6 +11,7 @@ function createWindow () {
}) })
win.loadFile('index.html') win.loadFile('index.html')
}
ipcMain.handle('dark-mode:toggle', () => { ipcMain.handle('dark-mode:toggle', () => {
if (nativeTheme.shouldUseDarkColors) { if (nativeTheme.shouldUseDarkColors) {
@ -24,7 +25,6 @@ function createWindow () {
ipcMain.handle('dark-mode:system', () => { ipcMain.handle('dark-mode:system', () => {
nativeTheme.themeSource = 'system' nativeTheme.themeSource = 'system'
}) })
}
app.whenReady().then(() => { app.whenReady().then(() => {
createWindow() createWindow()

View file

@ -1,3 +1,7 @@
:root {
color-scheme: light dark;
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { background: #333; color: white; } body { background: #333; color: white; }
} }

View file

@ -50,7 +50,7 @@ of this theming, due to the use of the macOS 10.14 SDK.
This example demonstrates an Electron application that derives its theme colors from the 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. `nativeTheme`. Additionally, it provides theme toggle and reset controls using IPC channels.
```javascript fiddle='docs/fiddles/features/macos-dark-mode' ```javascript fiddle='docs/fiddles/features/dark-mode'
``` ```