Mobi provides flexible and simple theme customization to meet the diverse visual requirements of businesses and brands.
Accessing application themes
Open the application theme configuration panel from the application settings sidebar.
Theme configuration
Basic configuration
In the application theme configuration panel, you can use the one-click configuration to set theme properties such as brand color, text color, border radius, and animation. After you modify the theme configuration, Mobi automatically generates the related gradient variables. For example, if you change the brand color to purple, the component's display and interaction colors also change, as shown in the figure below. For a button component, the corresponding brand-related colors are used for its hover and active states. When you move the mouse over the button, it uses the Brand Color Hover (light purple). When you click the button, it uses the Brand Color Active (dark purple).
Quick switch
Click the Quick Switch button at the top of the theme configuration panel to switch between three preset theme styles: Classic Blue, Tech Purple, and Simple Black. After you make a selection, the system automatically updates theme variables and their corresponding gradient values. These variables include brand color, success color, and warning color.
Advanced configuration
Advanced configuration lets you adjust theme variables and gradient values with fine granularity. Click the Advanced Configuration button in the lower-left corner of the theme configuration panel to open the advanced configuration interface.
You can enter property configurations that follow the Ant Design Theme specification, or import or export JSON files for local editing. For more information, see Ant Design Customize Theme.
You can also set global or component tokens using the Ant Design Theme Editor. Then, copy the generated JSON code to the Mobi platform. Theme variables that are not configured use the default values (Classic Blue style).
For example, to change the background and text colors for primary and default buttons in their active (on click) and hover (on mouseover) states, follow these steps:
Configure global and component tokens in the Ant Design Theme Editor.
Copy the JSON code for the theme configuration from the Ant Design Theme Editor. Paste the code into the Mobi advanced configuration panel. Save the changes to apply the theme configuration.
Using gradient variables
Mobi provides gradient variables derived from the theme as CSS variables. You can click a gradient variable to copy its value.
For example, you can use the brand's light background color, var(--mb-colorPrimaryBg), and the brand's outline color, var(--mb-colorPrimaryBorder), for the container's background and border colors. The container's appearance will then match the brand color.
Container appearance with the default brand color:
Container appearance with the purple brand color:
For buttons, you can also set CSS background color styles using gradient variables derived from the success color.
