Defining themes
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
edit.
- In the list of UI components, change the colors of the components in your
application:
- Click the square representing the component color that you want to change.
- Use the color picker to select a color.
- 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.
- 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 header you want to edit.
- On the Configuration tab, in the
Theme list, choose the color scheme that you want to
use for the portal.
- Click Save.
Previous topic Branding your application Next topic Defining a logo for an application