Skip to main content
LinkedIn
Copied!

Table of Contents

Defining themes

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.

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 Settings Branding 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.

    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.

      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.

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.

    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?

Have a question? Get answers now.

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

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

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

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us