custom-electron-titlebar 4.2.7 → 4.4.0

package/README.md

@@ -7,23 +7,28 @@ This project is a typescript library for electron that allows you to configure a
 [![NPM](https://badgen.net/npm/v/custom-electron-titlebar?label=NPM)](https://npmjs.org/package/custom-electron-titlebar)
 [![Install size](https://badgen.net/packagephobia/install/custom-electron-titlebar?label=Install%20size)](https://packagephobia.com/result?p=custom-electron-titlebar)
 
+> [!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](https://github.com/AlexTorresDev/custom-electron-titlebar/wiki)
 
-Standard Title Bar
+### Standard Title Bar
 
-![Screenshot 1](screenshots/cet-1.png)
+![Screenshot 1](screenshots/70shots_so.jpg)
 
-Bottom Menu Bar
+### Bottom Menu Bar
 
-![Screenshot 2](screenshots/cet-2.png)
+![Screenshot 2](screenshots/544shots_so.jpg)
 
-Menu
+### Menu
 
-![Screenshot 3](screenshots/cet-3.png)
+![Screenshot 3](screenshots/780shots_so.jpg)
 
-Custom color
+### Custom color
 
-![Screenshot 4](screenshots/cet-4.png)
+![Screenshot 4](screenshots/262shots_so.jpg)
 
 # 📦 Installing
 You can install this package with `npm`, `pnpm` or `yarn`.
@@ -42,10 +47,7 @@ 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();
+import { setupTitlebarAndAttachToWindow } from "custom-electron-titlebar/main";
 
 function createWindow() {
   // Create the browser window.
@@ -64,20 +66,42 @@ function createWindow() {
   
   ...
 
-  // attach fullScreen(f11 and not 'maximized') && focus listeners
-  attachTitlebarToWindow(mainWindow);
+  // Setup main IPC + attach window listeners + load theme config
+  setupTitlebarAndAttachToWindow(mainWindow, {
+    themeConfigPath: path.join(__dirname, "titlebar.theme.json")
+  });
 }
 ```
 
 In the preload file (preload.js or .ts)
 ```js
-import { Titlebar } from "custom-electron-titlebar";
+import { createTitlebarOnDOMContentLoaded } from "custom-electron-titlebar";
 
-window.addEventListener('DOMContentLoaded', () => {
-  // Title bar implementation
-  new Titlebar();
-});
+// Theme configuration is automatically loaded from main process
+createTitlebarOnDOMContentLoaded();
 ```
+
+**Theme Configuration:**
+
+Themes are loaded in the main process and delivered to the renderer via IPC. Specify the theme file path in `setupTitlebarAndAttachToWindow()` options:
+
+Theme JSON schema (v1):
+```json
+{
+  "version": 1,
+  "fontFamily": "Segoe UI, Arial, sans-serif",
+  "fontSize": 13,
+  "colors": {
+    "titlebar": "#1f2430",
+    "titlebarForeground": "#f3f4f6",
+    "menuBar": "#181c25",
+    "menuItemSelection": "#2f3a4f",
+    "menuSeparator": "#4b5563",
+    "svg": "#e5e7eb"
+  }
+}
+```
+
 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