Themes / White labeling

Tue Oct 01 2024

Theme settings

On the theme configuration page, you can customize the look and feel of your environment. Change background images, upload logos, and adjust branding elements like colors and typography to match your unique style. Tailor the user interface to reflect your company’s identity, ensuring a consistent experience for users across your platform. The theme settings are divided into 3 main sections: Branding, General Colors and Model Colors.

  • Branding: Here you can personalize key visual elements of your environment, including header backgrounds, logos, and thumbnails. This allows you to create a consistent brand identity across the platform.
  • General Colors: Customize all the application colors for both Light and Dark modes, effectively giving you two complete theme settings for each environment.
  • Model Colors: Here you can customize the colors of the modeling attributes. This is useful when you want to have a different color for the models than the rest of the application.

Brand your environment

Here you can personalize key visual elements of your environment, including header backgrounds, logos, and thumbnails. This allows you to create a consistent brand identity across the platform. Whether you’re updating your company logo or setting a custom background, these tools help you refine the look and feel of your application.

Personalize your theme with custom branding

info

Always preview and test your image selections to ensure they match your overall theme and deliver a seamless user experience.

General app colors

Personalize the application colors for both Light and Dark modes, effectively giving you two complete theme settings for each environment. Be sure to test your changes carefully to ensure good contrast between text and backgrounds for optimal readability and user experience. With this flexibility, you can fully tailor the look and feel of your platform to match your brand’s identity across different modes.

Personalize your theme

Process Model colors

Personalize the Modeling object and canvas colors for both Light and Dark modes, effectively giving you two complete theme settings for each environment. Be sure to test your changes carefully to ensure good contrast between text and backgrounds for optimal readability and user experience. With this flexibility, you can fully tailor the look and feel of your platform to match your brand’s identity across different modes.

Personalize your theme

Dataset Colors

Attributes that have data attached will automatically adopt the dataset color specified in the modeler. This helps visually distinguish attributes with active data links. The colors mentioned above are the default colors for attributes without data attached to them.

Visual helpers

image If you made changes to the theme, the background of the color will indicate that changes have been made to that specific attribute.

image To change a color, click on a colored circle for the chosen theme (Light or Dark). A color picker appears, letting you select a shade or input a HEX / RGB / HSL value. If you’re unsure of the color values, use the “PipetIcon” to select a color from anywhere on the screen. Immediate updates occur.

Example of a theme

Explore different ways to transform your application’s theme. Here, the original theme has been customized to showcase blue and green variations.

From Original

image

To Blue

Changes that were made were Text Color, Body Color, Panel (light) color, Logo image, Logo Text, and Header BG.

image

To Matrix Green

”Choice. The problem is choice” – Neo (The Matrix Reloaded)

image

Process Model Colors

Adjust the colors of the modeling attributes to differ from the rest of the application. This ensures a distinctive look for your models.

image