Skip to content

AlexTorresDev/custom-electron-titlebar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

389 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Custom Electron Titlebar

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

CI License NPM Install size

๐Ÿ“„ Documentation

Standard Title Bar

Screenshot 1

Bottom Menu Bar

Screenshot 2

Menu

Screenshot 3

Custom color

Screenshot 4

๐Ÿ“ฆ Installing

You can install this package with npm, pnpm or yarn.

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 { setupTitlebarAndAttachToWindow } from "custom-electron-titlebar/main";

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')
    }
  });
  
  ...

  // 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)

import { createTitlebarOnDOMContentLoaded } from "custom-electron-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):

{
  "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

๐Ÿ’ฐ 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.

โœ… License

This project is under the MIT license.

Sponsor this project

 

Contributors