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.
- 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
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.
- 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.
Previous topic Branding your application Next topic Adding custom fonts to a Cosmos React theme