How to add a background color to Electron JS BrowserWindow?

Electron JS | Adding Background Color to BrowserWindow: In this tutorial, we are going to see how to add/ change the background color of an Electron JS BrowserWindow?
Submitted by Godwill Tetah, on June 15, 2020

There are some reasons why one might want to change the background color of an Electron JS BrowserWindow,

You may have a complex app that takes some time to load its content completely where you will need to add a background color which will blend with the color of the application's user interface (HTML, CSS, and JavaScript).
It's another way of styling an Electron JS Application.

To add a background color, we will simply add a backgroundColor as an option to the new browser window instance. The value of the backgroundColor option is set to the color of your choice.
Take note: The value of the background color option must be a hexadecimal color.
Below is an example where our Electron JS browser window loads a local HTML file in the src folder.

Notice the HTML file has no background color.

const electron = require ('electron')
const app = electron.app // electron module
const BrowserWindow = electron.BrowserWindow //enables UI
let mainWindow
app.on ('ready', _ => {
    mainWindow = new BrowserWindow({
        height : 400,
        width : 1000,
        backgroundColor: '#FFFF00' // background color
    })

    mainWindow.loadFile('src/index.html')

    mainWindow.on ('closed', _ => { //detect when window is closed.
        console.log ('closed!')
        mainWindow = null
    })
})

Below is the index.html file in the src folder,

<!DOCTYPE html>
<html>
    <head>
        <title>BORN AGAIN</title>
    </head>
    <body>
        <h1>I LOVE ELECTRON!!!</h1>
    </body>
</html>

Run the code and see output,

background color to Electron JS BrowserWindow (1)

background color to Electron JS BrowserWindow (2)

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples