Create Your App
      Back to home
      1. Help Center
      2. Get Started
      3. Create Your App

      How do I change my App's colors?

      Want to style your App and change its colors to match your Brand Identity? In this article, you will learn how to use the Style Page.

      You can manage your App's Style on the platforms below:

      • Your Apple or Google Creator App.
      • The Passion.io App 
      • Your Web App https://yourappname.passion.io

       

      You must be logged in with your Passion.io Account to use the In-App Admin View. 

      IN THIS ARTICLE

      1. How to change your App's colors

      2. App Colors' Guide

      3. Frequently Asked Questions (FAQs)

       


      1. How to change your App's colors

      • From your Admin View, tap on Style.

      Pricing trial (2)

      • Select to view your App in light or dark mode. 
      • Select any of the color pallets on the right side.
      • Tap the multi-color pallet to select a custom color.

      Group 9 (1)

      • Tap on Advanced options to customize colors individually.
      • Tap on each element to change its color individually. 
      • Tap Save. 

      Group 10 (3)

      • Exiting the Theme Editor without saving will result in losing all your changes.

      Group 11 (1)

       

      2. App Colors' Guide

      Here is a quick guide on customizing your App colors and theme. 

      4.png

      Primary Color

      • UPGRADE button for paid products
      • Bullet for Multipricing Plan Selection
      • Highlight box for Multipricing Plan
      • Check marks on the Feature List widget
      • Terms of Use
      • Privacy Policy
      • Action buttons
      • Community icon and labels for no. of channels & members
      • Tracking icon

      Background

      Note: When you click on Channels, Messages, or Members under Community, the tab automatically turns white. This is not a bug.  If you don't want those tabs to be invisible when clicked, you may opt for a Background that is off-white or colored

      • Overlay on Header Widget
      • Background on Feature List Settings
      • Background on FAQ widget
      • Background on Pricing Plan

      Secondary Background

      • Multipricing box
      • Highlight box for Discover, Learn, Community, Tracking, and Profile icon
      • Color background of Communities and Community/Tracking icon
      • Color background for tracking visibility text

      Caption

      Note: A channel with new updates will remain highlighted so you will notice that the title and description would be different in color from those that you have already opened or clicked on. It is not a bug.

      • FAQ Text
      • Channels, Messages, and Members Tab
      • Channel Title and Description

      Divider

      • The line below Pricing Plan price and "Products included"
      • The line below Multipricing Plan product description and "Products included" and check mark for product list

      Text Color

      • Header Widget: Headline, Caption
      • Hero Image Title
      • Feature List Title, Text
      • Pricing Plan Widget: Small Headline, Main Headline
      • Multipricing Plan Name, Plan Description, Products included in the plan
      • Lesson Labels: Week/Day
      • Text inside lessons
      • Carousel Text
      • Login Page text
      • Discover, Learn, Community, Tracking, and Profile icon (when clicked)

      Button Text

      • Text for action buttons of Header, Pricing, and Multipricing widgets

       

      3. Frequently Asked Questions (FAQs)

      • Can I change my theme colors anytime?

      Yes, you can change your theme as you would like. 

       

      • What are the size requirements for Branding Assets?

      Logo for Authentication Screen, Welcome Screen, Loading Screen: 110 x 110 px

      Background for Discover Page, Loading State Background: 750 x 1336 px

      Header for Sequence Overview: 657 x 289 px

       

      • Can I change the fonts in the app?

      Yes, you can choose between six different font styles. This article explains how to change your fonts.