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.
|
1 |
npm init |
Install Electron using npm if it is not installed.
|
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.
This is is an example of how to change the window color to red in the main process of an Electron app:
|
1 2 3 4 5 6 7 8 9 10 |
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
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head> <title>My Electron App</title> </head> <body> <h1>Hello from Codeloop.org</h1> </body> </html> |
You can also change the color after the window is created by using the webContents property of the BrowserWindow object:
|
1 |
win.webContents.executeJavaScript("document.body.style.backgroundColor = '#ff0000'") |
Note: 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.
Subscribe and Get Free Video Courses & Articles in your Email