Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/AlexTorresDev/custom-electron-titlebar
Custom electon title bar inpire on VS Code title bar
https://github.com/AlexTorresDev/custom-electron-titlebar
cross-platform custom-electron-titlebar customizable electron electron-app icons javascript linux menu theme titlebar typescript windows
Last synced: about 2 months ago
JSON representation
Custom electon title bar inpire on VS Code title bar
- Host: GitHub
- URL: https://github.com/AlexTorresDev/custom-electron-titlebar
- Owner: AlexTorresDev
- License: mit
- Created: 2018-12-16T13:18:08.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2024-05-11T01:07:13.000Z (8 months ago)
- Last Synced: 2024-05-20T05:02:44.161Z (7 months ago)
- Topics: cross-platform, custom-electron-titlebar, customizable, electron, electron-app, icons, javascript, linux, menu, theme, titlebar, typescript, windows
- Language: TypeScript
- Homepage:
- Size: 5.32 MB
- Stars: 840
- Watchers: 11
- Forks: 143
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Custom Electron Titlebar
This project is a typescript library for electron that allows you to configure a fully customizable title bar.
[](https://github.com/AlexTorresDev/custom-electron-titlebar/actions/workflows/build-release.yml)
[](https://github.com/AlexTorresDev/custom-electron-titlebar/blob/master/LICENSE)
[](https://npmjs.org/package/custom-electron-titlebar)
[](https://packagephobia.com/result?p=custom-electron-titlebar)
[📄 Documentation](https://github.com/AlexTorresDev/custom-electron-titlebar/wiki)
### Standard Title Bar
### Bottom Menu Bar
### Menu
### Custom color
# 📦 Installing
You can install this package with `npm`, `pnpm` or `yarn`.
```sh
npm install custom-electron-titlebar
```
```sh
pnpm add custom-electron-titlebar
```
```sh
yarn add custom-electron-titlebar
```
# 🛠️ Usage
The implementation is done as follows:
In the main application file (main.js or .ts)
```js
import { setupTitlebar, attachTitlebarToWindow } from "custom-electron-titlebar/main";
// setup the titlebar main process
setupTitlebar();
function createWindow() {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
//frame: false, // needed if process.versions.electron < 14
titleBarStyle: '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 listeners
attachTitlebarToWindow(mainWindow);
}
```
In the preload file (preload.js or .ts)
```js
import { Titlebar } from "custom-electron-titlebar";
window.addEventListener('DOMContentLoaded', () => {
// Title bar implementation
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](https://github.com/AlexTorresDev/custom-electron-titlebar/wiki)
## 💰 Support
If you want to support my development, you can do so by donating through [💖 Sponsor](https://github.com/sponsors/AlexTorresDev)
## 📝 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.
[](https://github.com/AlexTorresDev/custom-electron-titlebar/graphs/contributors)
## ✅ License
This project is under the [MIT](https://github.com/AlexTorresDev/custom-electron-titlebar/blob/master/LICENSE) license.