White-labeling

ThingsBoard white-labeling allows you to configure your company or product logo and color scheme. In addition to the web interface, white-label settings also apply to the ThingsBoard app. You can customize the login screen and the main app interface.

As a System or Tenant Administrator, configure the login screen logo and color palette in the Login white labeling form.

1. Go to White labeling → Login in the main menu.
2. Enter your domain in the Domain name field for tenant-level settings.
3. Enter the base URL in the Base URL field (includes protocol — http or https — and port if it differs from the standard 80 or 443).
4. Upload your logo image in the Logo field.
5. Specify the logo height if necessary in the Logo height field.
6. Select a primary color palette in the Primary palette field and, optionally, an accent palette and the Dark foreground option.
7. Click Save to apply changes.

Starting with version 1.9.1, the mobile login screen uses these settings the same way the web login page does:

Setting	On the mobile login screen
Primary palette	Background of the login screen.
Accent palette	Color of the sign-in button. The button text is light or dark, whichever contrasts better.
Dark foreground	Switches text, icons, field borders, the status bar and the default logo between dark (on) and light (off). Turn it off for a dark primary palette.
Logo and Logo height	Logo centered above the form at the configured height (50 px by default, 200 px at most). A logo wider than the screen is scaled down.
Page background color	Not used: on the web it fills the area around the login form, which the mobile screen doesn’t have.

Open the mobile app to verify. Your logo should appear at the top of the login form, and the background and buttons should use the selected palettes.

As a System or Tenant Administrator, configure the main app interface logo and color palette in the White labeling form.

1. Go to White labeling → General in the main menu.
2. Upload your logo image in the Logo field.
3. Select a primary color palette in the Primary palette field and, optionally, an accent palette.
4. Click Save to apply changes.

Open the mobile app and log in to verify. Your logo should appear on the top bar of the home screen, and buttons and icons should use the selected color palette.

Starting with version 1.9.1, an app that is already running picks up white-labeling changes on its own, with no re-login or restart:

• as soon as the app returns to the foreground, for example when the user switches back to it;
• within an hour, if the app stays open on screen.

Earlier versions apply changes only after the user logs in again or restarts the app.