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.

npm init

npm init

Install Electron using npm if it is not installed.

npm install electron

1	npm install electron

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:

const { app, BrowserWindow } = require('electron');

app.on('ready', () => {
  let win = new BrowserWindow({ 
    width: 800, 
    height: 600,
    backgroundColor: 'red'
  });
  win.loadFile('index.html');
});

const { app, BrowserWindow } = require('electron');

app.on('ready', () => {

let win = new BrowserWindow({

width: 800,

height: 600,

backgroundColor: 'red'

});

win.loadFile('index.html');

});

This is the index.html file

<!DOCTYPE html>
<html>
  <head>
    <title>My Electron App</title>
  </head>
  <body>
    <h1>Welcome to My Electron App</h1>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>My Electron App</title>

</head>

<body>

<h1>Welcome to My Electron App</h1>

</body>

</html>

More on ElectronJS

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

win.webContents.executeJavaScript("document.body.style.backgroundColor = '#ff0000'")

1	win.webContents.executeJavaScript("document.body.style.backgroundColor = '#ff0000'")

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.