App Builder: Themes

Themes provide a powerful way to customize the cohesive look and feel of your app. App Builder follows Material UI (MUI) theming principles.

Apply themes

Themes are applied globally to all app pages. Here's how you can manage and customize them:

1. Navigate to App Builder > Apps in the left side menu of your Rewst platform.

2. Locate the app you want to edit permissions for in your app list and click on it.

3. Find your desired page in the Pages list of the App Builder

4. Click > to open the page in the Page Builder Canvas.

5. Click to open the Themes Settings menu.

Theme options: Theme Settings menu

The Theme Settings menu three tabs at the top: Palette, Typography, and Editor. At any time during your theme application process, click to reset all changes made since opening the Theme Settings menu.

Palette tab

1. Generate Color

   1. Click to open the Select Org Variable dialog. Select an organization variable to use as a theme reference. Note that the reference value must be a valid JSON string of Material UI theme options.

   2. Click to extract color from an uploaded image.

   3. Click to try out random color combinations for your theme.

2. Type: Toggle between light and dark mode for your app.

3. Click ⌄ next to each of the following color accordion menus to expand the accordion and reveal fields, where you can paste enter your desired color codes or click into each field to reveal the manual color picker.

   1. Background

   2. Text

   3. Primary

   4. Secondary

   5. Divider

   6. Error

   7. Warning

   8. Info

   9. Success

   10. Add a Custom Color

Typography tab

Each of the accordion menus in this tab offer settings for the colors of the text in different page elements. The stock font options are Work Sans and Roboto.

Enter the name of a Google Font into the Add Fonts field to use a different font not included in the stock options.

Editor tab

For advanced customization, edit the CSS directly in the Editor tab.

Saving changes

Remember to save your changes after customizing the theme to ensure they take effect.