Dark Mode

    If your app has its own dark mode, you should toggle it on and off in sync with the system’s dark mode setting. You can do this by using the CSS media query.

    If you want to manually switch between light/dark modes, you can do this by setting the desired mode in the property of the module. This property’s value will be propagated to your Renderer process. Any CSS rules related to prefers-color-scheme will be updated accordingly.

    In macOS 10.14 Mojave, Apple introduced a new for all macOS computers. If your Electron app has a dark mode, you can make it follow the system-wide dark mode setting using the nativeTheme api.

    In macOS 10.15 Catalina, Apple introduced a new “automatic” dark mode option for all macOS computers. In order for the nativeTheme.shouldUseDarkColors and Tray APIs to work correctly in this mode on Catalina, you need to use Electron >=7.0.0, or set NSRequiresAquaSystemAppearance to false in your Info.plist file for older versions. Both and Electron Forge have a to automate the Info.plist changes during app build time.

    If you wish to opt-out while using Electron > 8.0.0, you must set the NSRequiresAquaSystemAppearance key in the Info.plist file to true. Please note that Electron 8.0.0 and above will not let you opt-out 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.

    Open in Fiddle

    • main.js
    • preload.js
    • index.html
    • renderer.js
    • styles.css
    1. const { contextBridge, ipcRenderer } = require('electron')
    3. contextBridge.exposeInMainWorld('darkMode', {
    4.   toggle: () => ipcRenderer.invoke('dark-mode:toggle'),
    5.   system: () => ipcRenderer.invoke('dark-mode:system')
    6. })
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Hello World!</title>
    6.     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    7.     <link rel="stylesheet" type="text/css" href="./styles.css">
    8. <body>
    9.     <h1>Hello World!</h1>
    10.     <p>Current theme source: <strong id="theme-source">System</strong></p>
    12.     <button id="toggle-dark-mode">Toggle Dark Mode</button>
    13.     <button id="reset-to-system">Reset to System Theme</button>
    15.     <script src="renderer.js"></script>
    16.   </body>
    18. </html>
    1. @media (prefers-color-scheme: dark) {
    2.   body { background: #333; color: white; }
    3. }
    5. @media (prefers-color-scheme: light) {
    6.   body { background: #ddd; color: black; }
    7. }

    index.html

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Hello World!</title>
    6.     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    7.     <link rel="stylesheet" type="text/css" href="./styles.css">
    8. <body>
    9.     <h1>Hello World!</h1>
    10.     <p>Current theme source: <strong id="theme-source">System</strong></p>
    12.     <button id="toggle-dark-mode">Toggle Dark Mode</button>
    13.     <button id="reset-to-system">Reset to System Theme</button>
    15.     <script src="renderer.js"></script>
    16.   </body>
    17. </body>
    18. </html>

    And the styles.css file:

    styles.css

    The example renders an HTML page with a couple elements. The <strong id="theme-source"> element shows which theme is currently selected, and the two <button> elements are the controls. The CSS file uses the prefers-color-scheme media query to set the <body> element background and text colors.

    The preload.js script adds a new API to the window object called darkMode. This API exposes two IPC channels to the renderer process, and 'dark-mode:system'. It also assigns two methods, toggle and system, which pass messages from the renderer to the main process.

    preload.js

    1. const { contextBridge, ipcRenderer } = require('electron')
    3. contextBridge.exposeInMainWorld('darkMode', {
    4.   toggle: () => ipcRenderer.invoke('dark-mode:toggle'),
    5.   system: () => ipcRenderer.invoke('dark-mode:system')
    6. })

    Now the renderer process can communicate with the main process securely and perform the necessary mutations to the nativeTheme object.

    renderer.js

    1. document.getElementById('toggle-dark-mode').addEventListener('click', async () => {
    2.   const isDarkMode = await window.darkMode.toggle()
    3.   document.getElementById('theme-source').innerHTML = isDarkMode ? 'Dark' : 'Light'
    4. })
    6. document.getElementById('reset-to-system').addEventListener('click', async () => {
    7.   await window.darkMode.system()
    8.   document.getElementById('theme-source').innerHTML = 'System'

    Using addEventListener, the renderer.js file adds 'click' to each button element. Each event listener handler makes calls to the respective window.darkMode API methods.

    Finally, the main.js file represents the main process and contains the actual nativeTheme API.

    The ipcMain.handle methods are how the main process responds to the click events from the buttons on the HTML page.

    The 'dark-mode:toggle' IPC channel handler method checks the shouldUseDarkColors boolean property, sets the corresponding themeSource, and then returns the current shouldUseDarkColors property. Looking back on the renderer process event listener for this IPC channel, the return value from this handler is utilized to assign the correct text to the <strong id='theme-source'> element.

    The 'dark-mode:system' IPC channel handler method assigns the string 'system' to the and returns nothing. This also corresponds with the relative renderer process event listener as the method is awaited with no return value expected.

    Run the example using Electron Fiddle and then click the “Toggle Dark Mode” button; the app should start alternating between a light and dark background color.