This project is a typescript library for electron that allows you to configure a fully customizable title bar.

The project was abandoned archived by its original author. Just prior to being archived, #154 had been merged which makes use of @electron/remote instead of the deprecated electron.remote that was removed in electron v14. To be frank, I just wanted support for v14. That's why I forked and will be publishing to npm under the @rozzzly scope. I don't really have any intention of adding new features. If some bug is affecting me, I'll patch and release. But can't promise that I'll have much time to fixing any reported bugs. If anyone PR's a bugfix or new feature, I'll try to merge them and publish promptly. Otherwise, 🤷‍♂️ "when I get around to it."

yarn add @rozzzly/custom-electron-titlebar

or if you prefer the more vanilla npm:

npm i @rozzzly/custom-electron-titlebar

In your app's renderer entrypoint or in an HTML script tag add:

import { Titlebar, Color } from 'custom-electron-titlebar'

new Titlebar({
	backgroundColor: Color.fromHex('#ECECEC')
});

The parameter backgroundColor: Color is required, this should be Color type. (View Update Background for more details).

Import initialize from @electron/remote/main then call it (ie: initialize()) somewhere near the top of your app's main entrypoint/

/* ...other imports... */
import { initialize } from '@electron/remote/main';
/* ...other imports... */

initialize(); // invoke @electron/remote/main.initialize

// the rest of your app's main entrypoint
app.on('ready', () => {
	// ...
});

Update the code that launches browser window

mainWindow = new BrowserWindow({
    width: 1000,
    height: 600,
    titleBarStyle: 'hidden', // add this line
});

Until #72 gets merged in @electron/remoteand published, you'll still need to specify webPreferences: { enableRemoteModule: true } when creating a new BrowserWindow. In electron v14 that option has been "removed" from the docs and typescript definitions but adding the enableRemoteModule still works.

If you're a typescript user, try the following little hack:

mainWindow = new BrowserWindow({
    width: 1000,
    height: 600,
    titleBarStyle: 'hidden',
	webPreferences: {
		['enableRemoteModule' as any]: true
	}
});

After that gets merged and published, it looks like (although it may change) the new API will be the following:

import { app, BrowserWindow } from 'electron';
import { initialize, permit } from '@electron/remote/main';

initialize();
let mainWindow;

app.on('ready', () => {
	mainWindow = new BrowserWindow({
		width: 1000,
		height: 600,
		titleBarStyle: 'hidden'
	});

 	// permit() must be called on the webContents of each BrowserWindow that will get a custom titlebar
	permit(mainWindow.webContents);
})

The Titlebar constructor takes several options:

This change the color of titlebar and it's checked whether the color is light or dark, so that the color of the icons adapts to the background of the title bar.

titlebar.updateBackground(new Color(new RGBA(0, 0, 0, .7)));

To assign colors you can use the following options: Color.fromHex(), new Color(new RGBA(r, g, b, a)), new Color(new HSLA(h, s, l, a)), new Color(new HSVA(h, s, v, a)) or Color.BLUE, Color.RED, etc.

This method change background color on hover of items of menubar.

titlebar.updateItemBGColor(new Color(new RGBA(0, 0, 0, .7)));

To assign colors you can use the following options: Color.fromHex(), new Color(new RGBA(r, g, b, a)), new Color(new HSLA(h, s, l, a)), new Color(new HSVA(h, s, v, a)) or Color.BLUE, Color.RED, etc.

This method updated the title of the title bar, If you change the content of the title tag, you should call this method for update the title.

document.title = 'My new title';
titlebar.updateTitle();

// Or you can do as follows and avoid writing document.title
titlebar.updateTitle('New Title');

if this method is called and the title parameter is added, the title of the document is changed to that of the parameter.

With this method you can update the icon. This method receives the url of the image (it is advisable to use transparent image formats)

titlebar.updateIcon('./images/my-icon.svg');

This method updates or creates the menu, to create the menu use remote.Menu and remote.MenuItem.

const menu = new Menu();
menu.append(new MenuItem({
	label: 'Item 1',
	submenu: [
		{
			label: 'Subitem 1',
			click: () => console.log('Click on subitem 1')
		},
		{
			type: 'separator'
		}
	]
}));

menu.append(new MenuItem({
	label: 'Item 2',
	submenu: [
		{
			label: 'Subitem checkbox',
			type: 'checkbox',
			checked: true
		},
		{
			type: 'separator'
		},
		{
			label: 'Subitem with submenu',
			submenu: [
				{
					label: 'Submenu &item 1',
					accelerator: 'Ctrl+T'
				}
			]
		}
	]
}));

titlebar.updateMenu(menu);

You can change the position of the menu bar. left and bottom are allowed.

titlebar.updateMenuPosition('bottom');

setHorizontalAlignment method was contributed by @MairwunNx 👊

left, center and right are allowed

titlebar.setHorizontalAlignment('right');

This method removes the title bar completely and all recorded events.

titlebar.dispose();

The following CSS classes exist and can be used to customize the titlebar

Many thanks to all the people who support this project through issues and pull request. If you want to contribute with this project, all the issues and pull request are welcome, or we can chat a bit in the discussions

You can also:

This project is under the MIT license.