Document List
On This Page

Themes / White labeling

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 three 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.
  • Dataset Colors: Here you can customize the colors of the dataset attributes. This is useful when you want to have a different color for the datasets than the rest of the application.
  • Chart Colors: Here you can customize the colors used in charts. This is useful when you want to have a different color scheme for your charts 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 application colors

Personalize the application colors for both Light and Dark modes, giving you two complete theme settings for each environment. Test your changes 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, giving you two complete theme settings for each environment. Test your changes 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

Personalize the dataset object and canvas colors for both Light and Dark modes. This is useful if you add multiple datasets to your models, allowing you to distinguish between them. Dataset colors are used for attributes that have data attached, helping you visually identify attributes with active data links. The colors above are the default for attributes without data attached. You can also change the names to better reflect your own terminology.

Personalize your theme

Chart colors

Personalize the chart object colors for both Light and Dark modes. For example, this is used in the Norm settings of Gauge charts to indicate good, caution, and warning zones. You can also change the names to better reflect your own terminology.

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 make changes to the theme, the background of the color will indicate that updates 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. Updates happen immediately.

Example theme variations

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

From original

image

Blue theme example

Changes made include text color, body color, panel (light) color, logo image, logo text, and header background. image

Matrix green theme example

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

Process model color customization

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