> For the complete documentation index, see [llms.txt](https://docs.rewst.help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rewst.help/documentation/app-builder/themes.md).
# 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](https://mui.com/material-ui/customization/theming/).
## 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.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.rewst.help/documentation/app-builder/themes.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
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.
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.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.rewst.help/documentation/app-builder/themes.md?ask=