Applicable to Cosmos React
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.
What to do next: Attach the theme to a portal. For more information, see
Selecting a theme for a Cosmos React portal.
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
- 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
- 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
- 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 portalApplicable to Cosmos React
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
- 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
- Click Save.