Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Defining themes

Updated on October 21, 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: The color picker displays a warning icon if the color combinations in the palette do not meet WCAG Level AA contrast ratios.
      Low contrast warning
      The warning icon appears to the left of the color miniature.
  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

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.

Cosmos React applications come with two ready-to-use themes: Cosmos and Dark. The Cosmos theme is the default for all new applications. For more information on creating new themes in Cosmos React, see Defining themes.
  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 theme you want to change.
  2. On the Configuration tab, in the Theme list, choose the color scheme that you want to use for the portal.
    Tip: The following preview shows the selected color scheme, and a quick link to the theme editor.
    Link to theme editor in the preview
    A blue color scheme on a sample case preview. A link to the right side of the preview reads "Open".
  3. Click Save.

Tags

Pega Platform 8.7 User Experience

Have a question? Get answers now.

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

Visit the Support Center

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

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