Question
Wellsfargo
IN
Last activity: 21 Mar 2024 13:24 EDT
Can we customize theme rule in pega constellation?
Hi ,
Can we customize theme rule in pega constellation ?
This requirement is to check is there any way to change background color to webportal header part (search portion).
Accepted Solution
Updated: 18 Mar 2024 13:44 EDT
Pegasystems Inc.
GB
Wellsfargo
IN
Thank you @Marc Alderman.
Is there any way to change background color for banner(in webportal) in pega constellation.
Pegasystems Inc.
GB
I don't believe you can do this via the Theme Landing page. If you are trying to set a darker colour for a dark theme then you can save one of the existing OOTB dark themes (Aries (2023) - Dark for example) and make any adjustments to the other colours via the Theme Landing Page.
The banner is getting the colour from the primary-background design token, so if you open the theme rule in Dev Studio (either locate the Rule-UI-Theme rule, or click the 3 dots next to the theme in App Studio and select "Open in Dev Studio") then you can experiment with updating this token. However please keep in mind the advice from the above linked Design Tokens documentation regarding limiting the use of manual overrides, and potential unexpected results. You will notice for example that this design token also affects the background colour used for interactive elements such as text fields and radio buttons.
Wellsfargo
IN
Hi @Marc Alderman,
Thank you for post.
I have tried changing the color for primary-background css class and it's reflecting in all over the application like for tables and etc..
Is there a way to define for custom css class for specific fields are like that in pega constellation?
@SreenivasuluV16633502
The recommended best practice for updating constellation themes is via App Studio using the Themes landing page.
In the navigation pane of App Studio, click Settings > Themes to access the Themes landing page, where themes can be created and customized. Once you have created a theme it can be applied to the portal by updating the the theme setting in the configuration tab.
You should also review the following documentation:
Branding your application (pega.com) (See Selecting a theme for a Constellation Portal section)
Configuring a Constellation Portal (pega.com)
If required you can gain a more granular level of control over your theme by manually editing the theme JSON file in Dev Studio to update individual design tokens as described in the below documentation. However as per the note in this document, overriding the tokens manually should be reserved for advanced use cases as some of the design tokens might produce unexpected results.
@SreenivasuluV16633502
The recommended best practice for updating constellation themes is via App Studio using the Themes landing page.
In the navigation pane of App Studio, click Settings > Themes to access the Themes landing page, where themes can be created and customized. Once you have created a theme it can be applied to the portal by updating the the theme setting in the configuration tab.
You should also review the following documentation:
Branding your application (pega.com) (See Selecting a theme for a Constellation Portal section)
Configuring a Constellation Portal (pega.com)
If required you can gain a more granular level of control over your theme by manually editing the theme JSON file in Dev Studio to update individual design tokens as described in the below documentation. However as per the note in this document, overriding the tokens manually should be reserved for advanced use cases as some of the design tokens might produce unexpected results.
Design tokens (pega.com)