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: 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.
- 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.
Note: The Cosmos theme is the default for all new applications. For more information on creating new themes in Cosmos React, see Defining themes.
- Click Save.
Previous topic Branding your application Next topic Defining a logo for an application