Theme
Theme
Last updated
Theme
Last updated
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.
Locate the left bar menu in the app builder.
In the theme function, you'll find a list of available themes.
Click on a theme to select it and the selected theme will be applied to the app immediately.
In the theme panel, look for the option to create a new theme set.
Click on the Create a new theme button.
Enter a name for the new theme set and confirm the creation.
To duplicate the current theme, find the option to duplicate a theme.
Click on the Duplicate the current theme.
A duplicate of the theme will be created and applied, which can be modified independently.
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.
Each color option represents a specific aspect of the app's design.
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
To utilize theme colors for elements such as background color, text color, or border color, follow these steps:
Select the desired element for which you want to apply the theme color.
Navigate to the corresponding style settings for that element.
Choose the specific theme color you wish to use for the element.
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":
Click on the Theme option to access the theme function.
