LogoLogo
HomepageResellerPricingSign in
  • AppMachine
  • ๐Ÿ“ƒProduct Updates
  • ๐Ÿ‘ทBuild your app
    • Preview your app
    • App templates
    • App Settings
    • Update payment method
    • Cancel subscription
  • โ”General App Building FAQ
  • How to
  • ๐ŸงฑBlocks
    • ๐Ÿ” Admin
    • ๐Ÿ“„Blank Page
    • ๐Ÿ“žCall
    • ๐ŸขContact
    • ๐Ÿ“Contact Us
    • ๐ŸงพCoupons
    • ๐Ÿ“ƒCustom Form
    • ๐Ÿ“งEmail
    • ๐Ÿ—“๏ธEvents
    • โ”FAQ
    • ๐ŸŒFacebook
    • ๐Ÿ•‘Hours
    • โ„น๏ธInformation
    • ๐Ÿ“ฃIntro
    • โ˜•JavaScript
    • ๐Ÿ”’Lock
    • ๐ŸŽงMusic
    • ๐Ÿ“ฐNews
    • ๐Ÿ“ƒPDF
    • ๐Ÿ—บ๏ธPOI
    • ๐Ÿ‘ฅPeople
    • ๐Ÿ“ทPhotos
    • ๐ŸฌProducts
    • ๐Ÿ“ฉPush Messages
    • ๐Ÿ“ปRadio
    • โ†ช๏ธSubmenu
    • ๐ŸฆTwitter
    • ๐Ÿ‘จโ€๐Ÿ’ปURLs
    • ๐Ÿ–ฅ๏ธWeb Page
    • ๐Ÿ“บVideo
    • ๐Ÿ“ฑWhatsApp
  • ๐Ÿ“ƒData
    • Appmachine Data
    • Delete (test) data from Custom Form
    • Google Sheets
    • Web services
  • ๐Ÿ–Œ๏ธStyle your app
    • Theme
    • Home Screen
    • FAQ Style
  • ๐ŸŽจStyle your screens
    • Elements
  • Share your app
    • โœˆ๏ธPublishing your app
      • Technical Setup Quick Start Guide
      • Update your app
      • Unpublish an app from the app stores
    • ๐ŸŒWeb App Publishing
      • Hosting on custom domain
    • ๐ŸApple App Store
      • iOS developer account
      • App Store Connect API keys
      • Link your app
      • New app record in App Store Connect
      • App privacy details
      • Edit Store information
      • Fix App publish issues
      • Push certificates
      • App Store Connect app status overview
      • App Store Review Guidelines
      • Publish app Unlisted
      • Accept updated License agreement
      • Apple App Store FAQ
      • iPad
      • Enterprise
        • Setup your Enterprise app
        • Create iOS Distribution Certificate
        • Create App ID
        • Create Mobile Provisioning Profile
        • Downloading and installing an Enterprise app
    • ๐ŸGoogle Play
      • Create a Google Developer Account
      • Setup your Android app
      • How to request a Google Maps API Key
      • Test your Android app before publishing to Google Play
      • Upload your Android app to Google Play Store for the first time
      • Update Android app (short)
      • Update an Android app (extended)
      • Data safety details on the Google Play Store
      • Sell your app in Google Play Store
      • Create Google merchant account
      • Force Store Update for your Android App
      • Authorise an additional user to your Google Play developer account
      • What if my app is suspended by Google?
  • App details
    • ๐Ÿ•ต๏ธGoogle Analytics
      • Google Analytics setup overview
      • Setup iOS analytics
      • Setup Android analytics
      • Inviting a new Google Analytics user
    • ๐Ÿ”ฅFirebase
      • Create Firebase project
      • Locate Firebase Server key
      • Renew Firebase Server Key
      • Register iOS app
      • Register Android app
      • Enable Cloud Messaging
      • Enable Google Analytics
      • Google Analytics via Firebase
    • ๐Ÿ“จPush notifications
      • Setup Apple Push certificate
    • ๐Ÿง‘โ€๐Ÿคโ€๐Ÿง‘User management
      • Create Apple Sign In key
      • Setup Azure Active Directory
      • Create Facebook App ID Secret
    • ๐ŸฆTwitter API keys
    • ๐Ÿ”Privacy policy
    • ๐Ÿ‘ฉโ€๐Ÿ”งYour Account
      • Account Settings
      • Account FAQ
      • Payment FAQ
    • ๐Ÿ“ฑAdmin CMS
  • Developers
    • ๐Ÿ‘ฉโ€๐Ÿ’ปJavaScript
      • Develop locally
      • SDK
        • Core
        • JS Data
        • Media
        • Navigation
        • Notification
        • User
      • CLI
        • CLI Token and Secret
        • Errors
          • CONFIG_PROPERTIES_INVALID
          • CONFIG_VALUES_INVALID
          • ENTRY_FILE_NOT_FOUND
          • OUTPUT_DIRECTORY_IS_EMPTY
          • OUTPUT_DIRECTORY_NOT_FOUND
          • TOKEN_SECRET_NOT_PROVIDED
          • TOKEN_SECRET_NOT_VALID
      • Migrate from old Custom JS
    • ๐Ÿ’ปWeb services
Powered by GitBook
On this page
  • Settings
  • Advanced

Was this helpful?

  1. Style your app

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.

PreviousStyle your appNextHome Screen

Last updated 2 years ago

Was this helpful?

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.

Settings

Base Shape

The base shape determines the rounding of the button and text field shapes.

Fonts

You can define the fonts for the heading and body sections of text in your app.

Colors

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.

Advanced

Font Settings

In this section, you can assign which font you want to use for specific text types/sections in your app.

Navigation Bar

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.

Background

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.

Element Shapes

This allows you to customize the rounding on buttons, input fields, and/or card in your app.

๐Ÿ–Œ๏ธ