White Label Your Desktop App

Whitelabeling Rocket.Chat desktop app lets you customize the branding and appearance to match your organization's identity.

This document provides a step-by-step process for white labeling your app. To follow the instructions, you must have a basic understanding of Git, Node.js, JavaScript, and Electron.

Theming for Rocket.Chat is still under development. You can follow the discussion to learn more about it.

Assets

Commonly, the primary adjustment is altering icons. Some specific folders in your root project directory where assets can be customized include:

./src/ui/icons/
./src/ui/assets/

Take caution as these files are React components, so ensure that you modify them correctly. When the changes are done, generate your new files by running this command:

yarn build-assets

Tray icon

There are two options for customizing the TrayIcon:

Navigate to public/images/tray to review and potentially modify the icons used by the application.
Alternatively, open and modify ui/icon/AppIcon.tsx. This is the icon base for automatically generating all the icons. If you're familiar with tsx/jsx, this might be the more straightforward approach to take.

After making the changes, run this command:

yarn build-assets

Configure notification preferences to stay in tune with notifications in your workspace

About screen

To change this screen, navigate to ./src/ui/components/AboutDialog/index.tsx - you can also change the copyright. If you've changed the logo already, it will automatically reflect on this page.

const copyright = `© 2016-${new Date().getFullYear()}, Rocket.Chat`;

Building and packaging

We use electron-builder to "compile" and produce the executable files. To make any updates, check the file electron-builder.json. Update all references to the term rocket.chat/rocket/chat.rocket/rocketchat based on the context of each setting.

See the electron-builder configuration guide for more details.
To maintain automatic updates, see the electron-builder publish guide.

After making any change in the configuration, build a new release by running these commands:

yarn build
yarn release

See the GitHub repository for more information on configuring CI/CD.