Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 367 Commits
.github		.github
.vscode		.vscode
__mocks__		__mocks__
__test__		__test__
docs		docs
example		example
screenshots		screenshots
src		src
static/theme		static/theme
.babelrc		.babelrc
.eslintrc		.eslintrc
.gitignore		.gitignore
.npmignore		.npmignore
.prettierrc		.prettierrc
.releaserc.yml		.releaserc.yml
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
jest.config.js		jest.config.js
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
revert.sh		revert.sh
tsconfig.json		tsconfig.json

Repository files navigation

Custom Electron Titlebar

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

Important

This project will no longer be maintained, because I am the only one working on it and I have no free time left to review the issues and incorporate new features or update the dependencies to the latest versions.

Thanks to all the contributors and dependents of this library.

📄 Documentation

Standard Title Bar

Bottom Menu Bar

Custom color

📦 Installing

You can install this package withnpm,pnpm oryarn.

npm install custom-electron-titlebar

pnpm add custom-electron-titlebar

yarn add 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 processsetupTitlebar();functioncreateWindow(){// Create the browser window.constmainWindow=newBrowserWindow({width:800,height:600,//frame: false, // needed if process.versions.electron < 14titleBarStyle:'hidden',/* You can use *titleBarOverlay: true* to use the original Windows controls */titleBarOverlay:true,webPreferences:{sandbox:false,preload:path.join(__dirname,'preload.js')}});    ...// attach fullScreen(f11 and not 'maximized') && focus listenersattachTitlebarToWindow(mainWindow);}

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

import{Titlebar}from"custom-electron-titlebar";window.addEventListener('DOMContentLoaded',()=>{// Title bar implementationnewTitlebar();});

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 thewiki

💰 Support

If you want to support my development, you can do so by donating through💖 Sponsor

📝 Contributors

I would like to express my sincere gratitude to all the people who have collaborated in the development and advancement of this project. I appreciate your contributions.