Managing Themes in ElectronJS

ElectronJS is an Open Source Framework used for building Cross-Platform native desktop applications using web technologies such as HTML, CSS, and JavaScript which are capable of running on Windows, macOS, and Linux operating systems. It combines the Chromium engine and NodeJS into a Single Runtime.

To make desktop applications more attractive and engaging for the users, developers in addition to using CSS should also develop the application to make it compatible with the native System Theme. The application should provide a feature wherein the user can control the look and feel of the application and change the theme dynamically during runtime. This enhances the UI of the application and makes it blend in with the System environment. Electron provides a way by which we can achieve this using the Instance properties and events of the built-in nativeTheme module. This tutorial will demonstrate how to use the nativeTheme module. Any additional CSS should only be applied over the native System theme for Styling the application. 

We assume that you are familiar with the prerequisites as covered in the above-mentioned link. For Electron to work, node and npm need to be pre-installed in the system.

Project Structure:

Example: Follow the Steps given in Dynamic Styling in ElectronJS to set up the basic Electron Application. Copy the Boilerplate code for the main.js file and the index.html file as provided in the article. Also, perform the necessary changes mentioned for the package.json file to launch the Electron Application. We will continue building our application using the same code base. 

package.json:

{
    "name": "electron-theme",
        "version": "1.0.0",
            "description": "Themes in Electron",
                "main": "main.js",
                    "scripts": {
        "start": "electron ."
    },
    "keywords": [
        "electron"
    ],
        "author": "Radhesh Khanna",
            "license": "ISC",
                "dependencies": {
        "electron": "^8.3.0"
    }
}

Create the assets folder according to the project structure and create the light.css file and dark.css file respectively. We will be injecting these CSS files into the application dynamically during execution.

Output: At this point, our basic Electron Application is set up. Upon launching the application, we should see the following result.

Native Theme in Electron: The nativeTheme module is used to read, respond and apply changes to the Chromium's native color Theme. The native System Theme applies to the Chromium's native color theme as well. This module is part of the Main Process. To import and use nativeTheme module in the Renderer Process, we will be using Electron remote module. 

Note: The nativeTheme module supports only Instance Events and Instance Properties. It does have any Instance methods associated with it.

index.html: The Enable Dark Theme and Enable Light Theme buttons do not have any functionality associated with them yet. To change this, add the following code in the index.js file.

<br><br>
<button id="dark">
    Enable Dark Theme
</button>
<button id="light">
    Enable Light Theme
</button>

index.js: Add the following snippet in that file.  

const electron = require("electron");

// Importing the nativeTheme module
// using Electron remote
const nativeTheme = electron.remote.nativeTheme;
const path = require("path");

console.log("By Default, Dark Theme Enabled - ",
    nativeTheme.shouldUseDarkColors);
console.log("High Contrast Colors - ",
    nativeTheme.shouldUseHighContrastColors);
console.log("Inverted Colors - ",
    nativeTheme.shouldUseInvertedColorScheme);

nativeTheme.on("updated", () => {
    console.log("Updated Event has been Emitted");

    if (nativeTheme.shouldUseDarkColors) {
        console.log("Dark Theme Chosen by User");
    } else {
        console.log("Light Theme Chosen by User");
    }
});

let dark = document.getElementById("dark");
dark.addEventListener("click", () => {
    nativeTheme.themeSource = "dark";
});

let light = document.getElementById("light");
light.addEventListener("click", () => {
    nativeTheme.themeSource = "light";
});

 A detailed explanation of all the Instance Properties of the nativeTheme module used in the code is given below:  

• nativeTheme.shouldUseDarkColors This Instance property is a Readonly Property. This property returns a Boolean value stating whether the System OS or Chromium currently has a dark mode enabled or it is being instructed to show a dark-themed UI. To modify this property (change the theme of application), we need use the nativeTheme.themeSource Instance property.
• nativeTheme.shouldUseHighContrastColors This Instance property is a Readonly Property. This Instance property is supported on Windows and macOS only. This property returns a Boolean value stating whether the System OS or Chromium currently has a high-contrast mode enabled or it is being instructed to show a high-contrast themed UI. This property cannot be directly modified from code using the nativeTheme module. To modify this property, the user needs to enable high-contrast UI from within System Settings.
• nativeTheme.shouldUseInvertedColorScheme This Instance property is a Readonly Property. This Instance property is supported on Windows and macOS only. This property returns a Boolean value stating whether the System OS or Chromium currently has an inverted color scheme enabled or it is being instructed to use an inverted color scheme in the UI. This property cannot be directly modified from code using the nativeTheme module. To modify this property, the user needs to enable an inverted color scheme from within System Settings.
• nativeTheme.themeSource This Instance property is used to change the theme of the application. This property can be changed dynamically during execution. This String property is used to Override and supersede the value (specifying the theme) that Chromium has chosen to use internally in accordance with the System Theme. This Property can take one of the following String values:
  • system Setting this Instance property to the system will remove the override values and will reset everything to OS default. This means that if the System theme has dark mode enabled, then chromium will automatically take this as its default theme and will apply it to the Electron application. The same case is also applicable when the System theme has light mode enabled. By default, the value of the themeSource property is system. This value aligns with the Default OS mode of the System.
  • dark Setting this Instance Property to dark will have the following effects on the application. This value aligns with the Dark mode of the System.
    • The nativeTheme.shouldUseDarkColors Instance property will be set to true.
    • Any UI rendered by the Electron application on Linux and Windows including context-menus, devTools, etc will use the dark-themed UI. The same has been demonstrated in the Output. Any UI rendered by the System on macOS including menus, window frames, etc will use the dark-themed UI.
    • The prefers-color-scheme CSS query will match dark mode.
    • The Updated Instance event will be Emitted as shown in the code. The same is demonstrated in the Output.
  • light Setting this Instance property to light will have the following effects on the application. This value aligns with the Light mode of the System.
    • The nativeTheme.shouldUseDarkColors Instance property will be set to false.
    • Any UI rendered by the Electron application on Linux and Windows including context-menus, devTools, etc will use the light-themed UI. The same has been demonstrated in the Output. Any UI rendered by the System on macOS including menus, window frames, etc will use the light-themed UI.
    • The prefers-color-scheme CSS query will match light mode.
    • The Updated Instance event will be Emitted as shown in the code. The same is demonstrated in the Output.

A detailed Explanation of the Instance Event of the nativeTheme module used in the code is given below: 

• updated: Event This Instance Event is emitted when some property in the underlying native Chromium Theme has been changed. This means that the value of any of the Readonly Instance properties has changed. As discussed above, the value of nativeTheme.shouldUseDarkColors property can be changed by changing the value of nativeTheme.themeSource property. After this event is emitted, we need to manually check which Readonly property has changed as described above since this Instance event does not return any Promise/Callback.

At this point, we should successfully be able to determine and change the Native Theme of the Electron application from the above code. 

Output: 

Note: In the above output, the System OS theme is set to dark mode by default and hence the nativeTheme.shouldUseDarkColors Instance property returns true. Also, upon reloading the application, any changes made to the theme will be reverted back to the default System OS theme since we are not persisting the value of nativeTheme.themeSource Instance property within the local storage of the application.

After we have made the application successfully adapt to the native System Theme, we need to dynamically apply the respective CSS which is compatible with that theme for the application. This is important because some properties of styling cannot be applied to both themes. For example, we cannot use the same font-color for dark mode as well as for light mode. The following tutorial will demonstrate how to dynamically inject the respective CSS based on the theme applied. 

• dark.css: Add the following snippet in that file.

body {
    background-color: darkgray;
    color: white;
}

• light.css: Add the following snippet in that file.

body {
    background-color: lightgray;
    color: black;
}

index.js: Make the following changes to this file. The function loadCSS(load) dynamically inserts CSS into the HTML DOM structure based on the light or dark String value passed to it. We are simply appending another link tag with the respective CSS file and properties to the head tag of the index.html document using the appendChild method. 

const electron = require("electron");

// Importing the nativeTheme module 
// using Electron remote
const nativeTheme = electron.remote.nativeTheme;
const path = require("path");

console.log("By Default, Dark Theme Enabled - ",
    nativeTheme.shouldUseDarkColors);
console.log("High Contrast Colors - ",
    nativeTheme.shouldUseHighContrastColors);
console.log("Inverted Colors - ",
    nativeTheme.shouldUseInvertedColorScheme);

function loadCSS(load) {
    var head = document.getElementsByTagName("head")[0];
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = path.join(__dirname, "../assets/"
        + load + ".css");
    head.appendChild(link);
}

nativeTheme.on("updated", () => {
    console.log("Updated Event has been Emitted");

    if (nativeTheme.shouldUseDarkColors) {
        console.log("Dark Theme Chosen by User");
        console.log("Dark Theme Enabled - ",
            nativeTheme.shouldUseDarkColors);

        loadCSS("dark");
    } else {
        console.log("Light Theme Chosen by User");
        console.log("Dark Theme Enabled - ",
            nativeTheme.shouldUseDarkColors);

        loadCSS("light");
    }
});

let dark = document.getElementById("dark");
dark.addEventListener("click", () => {
    nativeTheme.themeSource = "dark";
});

let light = document.getElementById("light");
light.addEventListener("click", () => {
    nativeTheme.themeSource = "light";
});

Output: When dynamically specifying the CSS file, we are not removing the previous CSS file, if any and hence styling applied to the Application is inclusive of both the CSS files. In case, we miss a property in any one of the CSS files, it will still be applied to the application upon changing the theme. Hence we can either remove the link tag first and then re-append it dynamically using JS or override all the properties of the previous CSS file, by making identical copies and simply changing the values.