Theming using App Studio
App Studio allows you to quickly re-theme and rebrand your application by offering a couple of design tokens to be updated. The changes that are performed in App Studio update your application skin by overriding existing mixins or formats.
For this App Studio theming to work, your application should inherit from the skin called pyEndUser_ExpressDefault at a certain level of the stack. Changing the theme palette of color will update your application skin to point to a variation of the pyEndUser_ExpressDefault skin like pyEndUser_HoneyFlower.
Changing the theme in App Studio
In App Studio, you can access the theme landing page by clicking Settings > Theme.
On this page you can modify the following settings:
- Change the application name
- Set what is visible in the header
- Logo + application name (default)
- Logo only
- Application name only
- None
- Change the logo to be used in the header
- Can choose an icon from the Icon font or an image file
- Set the pre-canned theme palette
- Update a couple of design tokens, including some colors and typography settings
Note: Before trying to save the theme in App Studio, you need to make sure that you have an unlocked ruleset in your application stack.
You can also write CSS content directly BY using the button. If clicked, a CSS file is automatically added as an additional file to your skin.
Finally, you can reset the design tokens and revert to the original pre-canned palette of color by clicking on .
The following image shows a quick view of changing some of the settings and the effects on the end-user portal using UI-Kit.
Reviewing changes done in the skin
When using the App Studio theme landing page, a couple of mixins and formats are updated by using this tool. You can see the changes by opening your application skin in Dev Studio.
In the following image, a couple of mixins related to typography, backgrounds, and borders were updated.
Note: Updating the mixins defined by the COE layer or the platform layer like UI-Kit or Theme-Cosmos is best practice. Mixins are a higher-level abstract that can affect multiple components at once. As such it is important to use mixins as much as possible to define the tokens of your design system and then refer to these mixins in your component formats rather than making every format a custom style.
The following image shows how the three main button formats were updated to use the new design token set on the landing page.
One of the critical features that the skin provides is the ability to automatically calculate the focus, active, and hover styles from the default color. This is achieved by setting each style to Auto. With this configuration, changing the background color of the button format automatically generates the most appropriate style for the other three states of the button.
Viewing the theme values from the skin rule
You can view what themes are used by this skin by clicking View theme action in the Actions menu. Doing so opens a new window that renders a similar UI as the Theme landing page in App Studio, except that the settings are read-only. Hover on each design token to review details in a tooltip on how this token is defined inside the skin (mixin or format).
Check your knowledge with the following interaction
If you are having problems with your training, please review the Pega Academy Support FAQs.
Want to help us improve this content?