How to Change ElectronJS Window Color

In this lesson i want to show you How to Change ElectronJS Window Color, ElectronJS is a framework that allows developers to build cross-platform desktop applications using web technologies such as JavaScript, HTML, and CSS. It is built on top of Chromium, the open-source version of Google Chrome, and Node.js, which provides a runtime environment for JavaScript.



First of all Navigate to an Empty Directory to setup the project, and run the following command, this command generate the package.json file.



Install Electron using npm if it is not installed.



To change the window color of an ElectronJS app, you can use the backgroundColor property of the BrowserWindow object. You can set this property to any valid CSS color value, such as '#ff0000' for red, or 'rgb(0, 255, 0)' for green.

Here is an example of how to change the window color to red in the main process of an Electron app:


This is the index.html file



More on ElectronJS



You can also change the color after the window is created by using the webContents property of the BrowserWindow object:


Note: The above code snippet works only if you load a HTML file in the window, If you are using the loadURL method to load a local or remote HTML file, you can use the executeJavaScript method to execute any JavaScript code in the renderer process.




Run the code using npm start and this will be the result.

How to Change ElectronJS Window Color
How to Change ElectronJS Window Color

Leave a Comment