Awesome Open Source
Awesome Open Source

Custom Electron Titlebar

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

LICENSE NPM Version

Screenshot 1

Screenshot 2

Screenshot 3

📦 Intalling

You can install this package with npm.

npm install custom-electron-titlebar

🛠️ Usage

The implementation is done as follows:

In the main application file (main.js or .ts)

import { setupTitlebar, attachTitlebarToWindow } from "custom-electron-titlebar/main";

// setup the titlebar main process
setupTitlebar();

function createWindow() {
  ...

  // attach fullscreen(f11 and not 'maximized') && focus listeners
  attachTitlebarToWindow(mainWindow);
}

In the preload file (preload.js or .ts)

import { Titlebar } from "custom-electron-titlebar";

window.addEventListener('DOMContentLoaded', () => {
  // Title bar implemenation
  new Titlebar();
});

To see the options you can include in the Title Bar constructor, such as color of elements, icons, menu position, and much more, and the methods you can use, go to the wiki

💰 Support

If you want to support my development, you can do so by donating through Buy me a coffee or Patreon

✅ License

This project is under the MIT license.

Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,049,824
Typescript (240,386
Theme (43,559
Icons (15,109
Menu (13,218
Boolean (8,355
Titlebar (39