Custom ElectronJS Titlebar Sample

This is a sample ElectronJS application demonstrating a customized titlebar. In this project, we have created an Electron application that replaces the default system titlebar with a custom titlebar, similar to the behavior of Windows.

Features

• Customized titlebar with a unique design.
• Minimize, maximize/restore, and close buttons with custom icons.
• Draggable window using the custom titlebar.
• Simple and clean design that you can customize further for your needs.

Prerequisites

Before you begin, ensure you have met the following requirements:

• Node.js and npm (Node Package Manager) installed on your system.
• Basic knowledge of JavaScript, HTML, and CSS.
• Familiarity with ElectronJS.

Getting Started

Follow these steps to get your project up and running:

1. Clone this repository to your local machine:

   git clone https://github.com/poralcode/custom-electron-titlebar.git

2. Navigate to the project directory:

   cd custom-electron-titlebar

3. Install the project dependencies:

   npm install

4. Start the Electron application:

   npm start

The Electron app will launch, and you will see the customized titlebar in action.

Customization

You can customize this project to fit your specific needs:

• Modify the titlebar design by editing the CSS in the style.css file.
• Add additional functionality to the titlebar buttons in the preload.js file.
• Customize the application's appearance and content in the index.html file.

Feel free to explore and adapt this project according to your requirements.

Acknowledgments

• Electron - The framework for building cross-platform applications.
• Node.js - The JavaScript runtime used in Electron.

Author

• Poralcode
• GitHub: https://github.com/poralcode

electron-custom-titlebar