docs: improve dark mode example fiddle (#36596)

docs/fiddles/features/macos-dark-mode/main.js → docs/fiddles/features/dark-mode/main.js

@@ -11,20 +11,20 @@ function createWindow () {
   })
 
   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:toggle', () => {
+  if (nativeTheme.shouldUseDarkColors) {
+    nativeTheme.themeSource = 'light'
+  } else {
+    nativeTheme.themeSource = 'dark'
+  }
+  return nativeTheme.shouldUseDarkColors
+})
 
-  ipcMain.handle('dark-mode:system', () => {
-    nativeTheme.themeSource = 'system'
-  })
-}
+ipcMain.handle('dark-mode:system', () => {
+  nativeTheme.themeSource = 'system'
+})
 
 app.whenReady().then(() => {
   createWindow()

docs/fiddles/features/macos-dark-mode/styles.css → docs/fiddles/features/dark-mode/styles.css

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

docs/tutorial/dark-mode.md

@@ -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
 `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'
 
 ```