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.
Here 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>Welcome to My Electron App</h1> </body> </html> |
More on ElectronJS
- How to Build GUI Applications with JavaScript & ElectronJS
- Introduction to ElectronJS
- How to Build Custom Notification with ElectronJS
- Desktop Operations in ElectronJS
- How to Upload File in ElectronJS
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: 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.
