What’s New in Electron 20? Dark Mode, macOS Panels, Sandbox & More

Electron 20.0.0 has been released, bringing several notable changes and new features for developers.

1. Support for Windows immersive dark mode

Electron now allows enabling dark mode via the setting: nativeTheme.themeSource = 'dark' However, testing on Windows 10 shows limited visual differences, affecting only the context menu and DevTools. A related PR (#32913) aims to support title‑bar matching dark mode with: nativeTheme.themeSource = 'system' Current behavior still shows a bright title bar when the system theme is dark, indicating a possible bug.

2. macOS adds a new panel BrowserWindow type

On macOS, BrowserWindow now supports three types: textured: adds a metallic appearance (NSTexturedBackgroundWindowMask). desktop: places the window at the desktop level (kCGDesktopWindowLevel - 1) and does not receive focus or input. panel: allows the window to float above full‑screen apps.

3. Renderer processes are sandboxed by default

Previously, preload scripts could use Node.js directly. Starting with Electron 20, the renderer is sandboxed unless you explicitly enable: nodeIntegration: true or sandbox: false Without these options, Node.js APIs are unavailable in the renderer.

4. Native module build requirements

When building native modules, it is recommended to use at least node‑gyp version 8.4.0 and electron‑rebuild version 3.2.9.

5. Chrome 104/103 changes

Local font access

You can retrieve all local fonts with:

const pickedFonts = await window.queryLocalFonts();
const fontData = pickedFonts[0];
console.log(fontData.postscriptName);
console.log(fontData.fullName);
console.log(fontData.family);
console.log(fontData.style);

HTTP 103 – Early Hints

This status code allows browsers to preload resources while the server is still preparing the full response:

<link as="font" crossorigin="anonymous" href="..." rel="preload">
<link as="font" crossorigin="anonymous" href="..." rel="preload">
<link href="https://web-dev.imgix.net" rel="preconnect">

For more details, see the Chrome release notes for versions 104 and 103.

Note: The Yuque desktop client is built with Electron; you can download it at https://www.yuque.com/download.