diff --git a/docs/fiddles/features/macos-dark-mode/index.html b/docs/fiddles/features/dark-mode/index.html
similarity index 100%
rename from docs/fiddles/features/macos-dark-mode/index.html
rename to docs/fiddles/features/dark-mode/index.html
diff --git a/docs/fiddles/features/macos-dark-mode/main.js b/docs/fiddles/features/dark-mode/main.js
similarity index 64%
rename from docs/fiddles/features/macos-dark-mode/main.js
rename to docs/fiddles/features/dark-mode/main.js
index 9503efb5f9..34c0211a43 100644
--- a/docs/fiddles/features/macos-dark-mode/main.js
+++ b/docs/fiddles/features/dark-mode/main.js
@@ -11,21 +11,21 @@ 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:system', () => {
-    nativeTheme.themeSource = 'system'
-  })
 }
 
+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()
 
diff --git a/docs/fiddles/features/macos-dark-mode/preload.js b/docs/fiddles/features/dark-mode/preload.js
similarity index 100%
rename from docs/fiddles/features/macos-dark-mode/preload.js
rename to docs/fiddles/features/dark-mode/preload.js
diff --git a/docs/fiddles/features/macos-dark-mode/renderer.js b/docs/fiddles/features/dark-mode/renderer.js
similarity index 100%
rename from docs/fiddles/features/macos-dark-mode/renderer.js
rename to docs/fiddles/features/dark-mode/renderer.js
diff --git a/docs/fiddles/features/macos-dark-mode/styles.css b/docs/fiddles/features/dark-mode/styles.css
similarity index 81%
rename from docs/fiddles/features/macos-dark-mode/styles.css
rename to docs/fiddles/features/dark-mode/styles.css
index eb6dd2f243..8f9ad8f04d 100644
--- a/docs/fiddles/features/macos-dark-mode/styles.css
+++ b/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; }
 }
diff --git a/docs/tutorial/dark-mode.md b/docs/tutorial/dark-mode.md
index 27fbff07d1..41e9fd3112 100644
--- a/docs/tutorial/dark-mode.md
+++ b/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'
 
 ```