Set the app theme

Set the app theme

With our app builder, you are empowered to define the look and feel of your app by customizing the theme. In this article, we will discover where and how to customize a visually stunning and user-centric theme.

1. About app theme

An app theme is a collection of color schemes and other design attributes that create a sense of visual consistency throughout the entire app.

With Alphonso, you can configure the following components:
  1. Brand logo
  2. Colors
  3. Image ratio

2. How to create an app theme? 

To create your unique app theme, simply follow these steps:
Step 1: Go to Design > Theme.

Step 2: Customize the components.
  1. Brand logo: Upload your logo to display in the middle of the home screen’s header. For optimal results, we recommend the following practices:
    1. Logo color: The background of the header is white by default, so you should choose a logo with high contrast for better visibility and recognition.
    2. Size: The logo should be a PNG or JPG image file with 50px width and custom height. 
  2. Colors
    1. Top navigation color:  Customize the top navigation color for the header background.
    2. Primary color: Set the primary color for buttons, bottom bar components, tab bar, and variants.
    3. Secondary color: Define the color used for text buttons in your app, such as “Signup“ and “Forgot your password?”.
    4. Badge color: Choose the badge color to highlight special offers, promotions, or product features, instantly grabbing users' attention. This color is used for badges to highlight important information or notifications.

  1. Image ratio: Select one of the three aspect ratios available for your product images, namely Square 1:1, Rectangle 2:3, or Rectangle 3:4. 
Tip: Select a proper image ratio based on the majority of your product images. For images with different ratios, they can fit into the designated container without being cropped. However, it's advisable to replace them with images having the same ratio as the others to enhance a sense of harmony and unity throughout your design.

Step 3: To finish, click Save draft in the bottom right corner. 
Please note that saving a draft affects only the design page, allowing you to make further changes. To make the current design available to all mobile users, click Publish to Mobile. 

If you have any further questions, please reach out to us at customer.success@jmango360.com!


    • Related Articles

    • Getting started with Alphonso

      Welcome to Alphonso - the advanced app builder designed to empower you to create exceptional mobile apps. This article will take you on a guided tour of the Alphonso app builder and the core pages in the app builder. By the end, you'll have a general ...

    • App listing

      Providing an app store profile is a crucial step when your app is ready to be published to users on app distribution platforms. You can create an app store profile via the App Listing in Alphonso by sharing the required input. In this article, we’ll ...

    • User management

      This guide will walk you through a system of secure and scalable permissions and role management. Whether you're the app owner or an authorized team member, understanding how to manage roles and permissions is crucial for effective collaboration and ...

    • Configure My Account page

      In this article, we'll explore the elements and configuration options that allow you to create a tailored and engaging experience for your app users. 1. About My Account The My Account screen in your app is a crucial hub of information and ...

    • Configure the product detail page

      In this article, we'll walk you through the introduction of product detail blocks how to leverage them to create an impactful product detail page. 1. About product detail blocks When you open the Product Detail module, you will see the default view ...