Theme
The Theme block drives the design for the rest of your app making sure that consistency and control are the most important factors in your app's design.
Every app deserves a great design. To set the overall design settings in your app, AppMachine has created the Theme block. It is the green block next to the blue Home in your block list:
Clicking on the Theme block opens a unique screen in the previewer section that allows you to quickly see the impact of any changes you make to these design settings. There are two sections available in the right side menu;
- Settings for basic design settings that allow for quick control of common design features in the app
- Advanced settings that grant more granular control of specific design features of the app.
The Theme block largely determines the look and feel of the app. The menu on the right side of your screen opens to Settings as a default. AppMachine encourages that you play with these settings so that you can see these changes immediately in the responsive previewer.
We've named the block Theme because the design choices you make in the Theme block will be visible in and largely determine the options available to you when designing subsequent blocks. The Elements editor will draw from your Theme block when you start building your custom screens, as well.
The base shape determines the rounding of the button and text field shapes.
You can define the fonts for the heading and body sections of text in your app.
AppMachine offers an algorithm that automatically chooses complementary colors based on the main color that you select. These colors can be determined in the Color Theme section.
By clicking on the Primary button, you can select your desired color.
To add a secondary color, click on Add a color.
You can also add custom colors to the palette of colors in your app.
In this section, you can assign which font you want to use for specific text types/sections in your app.
This section allows you to change the color settings for the background of the navigation bar (and the color's opacity), the color of the text on the navigation bar, the logo shown on the navigation bar, and whether or not the text (or title) is shown in the navigation bar.
You can choose to have no background, a color background, a background with a color gradient, or a custom image. You can further customize the image with filter options or a color overlay. Color overlays can help make text pop or be more visible in front of busy background images.
This allows you to customize the rounding on buttons, input fields, and/or card in your app.
Last modified 4mo ago