Skip to main content

Defining themes

Suggest edit
Updated on May 6, 2021
Applicable to Cosmos React applications

Ensure that your applications meet the branding requirements of your business by configuring the graphic design of your portal. By setting a distinct color palette for UI elements such as buttons, links, or headers, you can create a consistent visual identity.

Note: Cosmos React applications come with two ready-to-use themes: Cosmos and Dark. These themes are the system default and you cannot edit them.
  1. In the navigation pane of App Studio, click SettingsBranding and themes.
  2. Click Add, and then, in the Create new theme dialog box, provide a name for the theme.
  3. In the Themes list, click the theme that you want to edit.
    Tip: Any change that you make to the theme is reflected in the interactive preview.
  4. In the list of UI components, change the colors of the components in your application:
    1. Click the square representing the component color that you want to change.
    2. Use the color picker to select a color.
      Tip: You can also enter the color code manually. If you click the RGB button below the text fields, you can switch the color standard to HEX or HSL.
  5. In the Base font field, define the default size of text in the application.
  6. In the Font family field, define the default font for the application.
  7. In the Card border radius field, define the shape of the sections that constitute the user interface.
  8. In the Button border radius field, define the shape of the buttons in the application.
  9. In the Input border radius field, define the shape of the fields in your application.
  10. Click Save.
What to do next: Attach the theme to a portal. For more information, see Selecting a theme for a Cosmos React portal.

Selecting a theme for a Cosmos React portal

Applicable to Cosmos React applications

Assign a distinct theme to your portal to ensure that its color palette, font use, and UI component styling matches the branding requirements of your business.

  1. Open your portal:
    1. In the navigation pane of App Studio, click Channels.
    2. In the Current channel interfaces section, click the icon that represents the portal whose header you want to edit.
  2. On the Configuration tab, in the Theme list, choose the color scheme that you want to use for the portal.
    Note: The Cosmos theme is the default for all new applications. For more information on creating new themes in Cosmos React, see Defining themes.
  3. Click Save.
Did you find this content helpful? YesNo

100% found this useful

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us