{"id":13596155,"url":"https://github.com/AlexTorresDev/custom-electron-titlebar","last_synced_at":"2025-04-09T16:31:39.545Z","repository":{"id":37270574,"uuid":"162002891","full_name":"AlexTorresDev/custom-electron-titlebar","owner":"AlexTorresDev","description":"Custom electon title bar inpire on VS Code title bar","archived":false,"fork":false,"pushed_at":"2024-05-11T01:07:13.000Z","size":5575,"stargazers_count":840,"open_issues_count":17,"forks_count":143,"subscribers_count":11,"default_branch":"main","last_synced_at":"2024-05-20T05:02:44.161Z","etag":null,"topics":["cross-platform","custom-electron-titlebar","customizable","electron","electron-app","icons","javascript","linux","menu","theme","titlebar","typescript","windows"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AlexTorresDev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"AlexTorresDev"}},"created_at":"2018-12-16T13:18:08.000Z","updated_at":"2024-05-16T01:04:44.000Z","dependencies_parsed_at":"2024-01-16T22:19:12.661Z","dependency_job_id":"c806cf09-fd3c-4a0e-bcb6-f8f4e3a2b669","html_url":"https://github.com/AlexTorresDev/custom-electron-titlebar","commit_stats":null,"previous_names":["alextorressk/custom-electron-titlebar"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexTorresDev%2Fcustom-electron-titlebar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexTorresDev%2Fcustom-electron-titlebar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexTorresDev%2Fcustom-electron-titlebar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexTorresDev%2Fcustom-electron-titlebar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlexTorresDev","download_url":"https://codeload.github.com/AlexTorresDev/custom-electron-titlebar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248067773,"owners_count":21042353,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cross-platform","custom-electron-titlebar","customizable","electron","electron-app","icons","javascript","linux","menu","theme","titlebar","typescript","windows"],"created_at":"2024-08-01T16:02:10.549Z","updated_at":"2025-04-09T16:31:39.539Z","avatar_url":"https://github.com/AlexTorresDev.png","language":"TypeScript","funding_links":["https://github.com/sponsors/AlexTorresDev"],"categories":["TypeScript"],"sub_categories":[],"readme":"# Custom Electron Titlebar\n\nThis project is a typescript library for electron that allows you to configure a fully customizable title bar.\n\n[![CI](https://badgen.net/github/checks/AlexTorresDev/custom-electron-titlebar?label=CI)](https://github.com/AlexTorresDev/custom-electron-titlebar/actions/workflows/build-release.yml)\n[![License](https://badgen.net/github/license/AlexTorresDev/custom-electron-titlebar?label=License)](https://github.com/AlexTorresDev/custom-electron-titlebar/blob/master/LICENSE)\n[![NPM](https://badgen.net/npm/v/custom-electron-titlebar?label=NPM)](https://npmjs.org/package/custom-electron-titlebar)\n[![Install size](https://badgen.net/packagephobia/install/custom-electron-titlebar?label=Install%20size)](https://packagephobia.com/result?p=custom-electron-titlebar)\n\n\u003e [!IMPORTANT]  \n\u003e 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.\n\u003e\n\u003e **Thanks to all the contributors and dependents of this library.**\n\n[📄 Documentation](https://github.com/AlexTorresDev/custom-electron-titlebar/wiki)\n\n### Standard Title Bar\n\n![Screenshot 1](screenshots/70shots_so.jpg)\n\n### Bottom Menu Bar\n\n![Screenshot 2](screenshots/544shots_so.jpg)\n\n### Menu\n\n![Screenshot 3](screenshots/780shots_so.jpg)\n\n### Custom color\n\n![Screenshot 4](screenshots/262shots_so.jpg)\n\n# 📦 Installing\nYou can install this package with `npm`, `pnpm` or `yarn`.\n```sh\nnpm install custom-electron-titlebar\n```\n```sh\npnpm add custom-electron-titlebar\n```\n```sh\nyarn add custom-electron-titlebar\n```\n\n# 🛠️ Usage\nThe implementation is done as follows:\n\nIn the main application file (main.js or .ts)\n```js\nimport { setupTitlebar, attachTitlebarToWindow } from \"custom-electron-titlebar/main\";\n\n// setup the titlebar main process\nsetupTitlebar();\n\nfunction createWindow() {\n  // Create the browser window.\n  const mainWindow = new BrowserWindow({\n    width: 800,\n    height: 600,\n    //frame: false, // needed if process.versions.electron \u003c 14\n    titleBarStyle: 'hidden',\n    /* You can use *titleBarOverlay: true* to use the original Windows controls */\n    titleBarOverlay: true,\n    webPreferences: {\n      sandbox: false,\n      preload: path.join(__dirname, 'preload.js')\n    }\n  });\n  \n  ...\n\n  // attach fullScreen(f11 and not 'maximized') \u0026\u0026 focus listeners\n  attachTitlebarToWindow(mainWindow);\n}\n```\n\nIn the preload file (preload.js or .ts)\n```js\nimport { Titlebar } from \"custom-electron-titlebar\";\n\nwindow.addEventListener('DOMContentLoaded', () =\u003e {\n  // Title bar implementation\n  new Titlebar();\n});\n```\nTo 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)\n\n## 💰 Support\nIf you want to support my development, you can do so by donating through [💖 Sponsor](https://github.com/sponsors/AlexTorresDev)\n\n\n## 📝 Contributors\nI 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.\n\n[![](https://contrib.rocks/image?repo=AlexTorresDev/custom-electron-titlebar)](https://github.com/AlexTorresDev/custom-electron-titlebar/graphs/contributors)\n\n\n## ✅ License\nThis project is under the [MIT](https://github.com/AlexTorresDev/custom-electron-titlebar/blob/master/LICENSE) license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAlexTorresDev%2Fcustom-electron-titlebar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAlexTorresDev%2Fcustom-electron-titlebar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAlexTorresDev%2Fcustom-electron-titlebar/lists"}