- In the navigation pane of App Studio, click .
- Click Add, and then, in the Create new theme dialog box, provide a name for the theme.
- In the Themes list, click the theme that you want to
Tip: Any change that you make to the theme is reflected in the interactive preview.
- In the list of UI components, change the colors of the components in your
- Click the square representing the component color that you want to change.
- 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.
- In the Base font field, define the default size of text in the application.
- In the Font family field, define the default font for the application.
- In the Card border radius field, define the shape of the sections that constitute the user interface.
- In the Button border radius field, define the shape of the buttons in the application.
- In the Input border radius field, define the shape of the fields in your application.
- Click Save.
Selecting a theme for a Cosmos React portal
- Open your portal:
- In the navigation pane of App Studio, click Channels.
- In the Current channel interfaces section, click the icon that represents the portal whose theme you want to change.
- 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.
- Click Save.