Theme

Theme

Theme

The theming feature in our app builder allows users to customize the color style of their apps easily. With themes, users can apply predefined color styles or create their own unique theme sets to enhance the app's design.

The use of theme color enables effortless management of consistent color styles for elements in the app. When modifying a theme color, all elements using this theme color will apply the color change at the same time. This simplifies the process optimizing consistent color style and finding the best color arrangement for you app.

Accessing the Theme Function

1. Locate the left bar menu in the app builder.

2. Click on the Theme option to access the theme function.

Using Existing Themes

1. In the theme function, you'll find a list of available themes.

2. Click on a theme to select it and the selected theme will be applied to the app immediately.

Creating New Theme Sets

1. In the theme panel, look for the option to create a new theme set.

2. Click on the Create a new theme button.

3. Enter a name for the new theme set and confirm the creation.

Duplicating Themes

1. To duplicate the current theme, find the option to duplicate a theme.

2. Click on the Duplicate the current theme.

3. A duplicate of the theme will be created and applied, which can be modified independently.

Customizing Theme Colors

1. Within the theme settings, you will find various color options. Click on it to use color selector to pick a color you want. The change will be applied immediately.

2. Each color option represents a specific aspect of the app's design.

3. The default color values for the theme are as follows:

   • Color Primary: #4985F4

   • Color On Primary: #FFFFFF

   • Color Secondary: #F2A91E

   • Color On Secondary: #FFFFFF

   • Color Background: #FFFFFF

   • Color On Background: #000000

   • Color Surface: #FFFFFF

   • Color On Surface: #000000

   • Color Success: #2E7D32

   • Color On Success: #FFFFFF

   • Color Error: #D32F2F

   • Color On Error: #FFFFFF

   • Color Warning: #F9A825

   • Color On Warning: #000000

   • Color Border: #CCCCCC

   • Color Tooltip Background: #333333

   • Color Tooltip On Background: #FFFFFF

   • Color Scrollbar Background: #FAFAFA

   • Color Scrollbar On Background: #C3C3C3

Use theme color in elements

To utilize theme colors for elements such as background color, text color, or border color, follow these steps:

1. Select the desired element for which you want to apply the theme color.

2. Navigate to the corresponding style settings for that element.

3. Choose the specific theme color you wish to use for the element.

4. Once the theme color is selected, any changes made to that theme color will automatically reflect in the corresponding color of the element.

For instance, in the example below, I set the background color to "color success":