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.
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
application:
- 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. Low contrast warning
- 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. Link to theme editor in the preview - Click Save.
Previous topic Branding your application Next topic Adding custom fonts to a Cosmos React theme