Skip to content
Contact us
  • There are no suggestions because the search field is empty.

Change Your App’s Colors

Style your app to match your brand identity ✨. Use the Style page to adjust colors, themes, and more.

In This Article

Change your app's colors

App colors guide

Primary color

Secondary background

Caption

Divider

Text color

Button text

 

 

Change your app’s colors

You can manage your app’s style from:

  • Your Apple or Google App

  • The Passion.io App

  • Your WebApp (https://yourappname.passion.io)

 

👉 Make sure you’re logged in with your Passion account to use Admin View.

  1. From Admin View, tap Style.

  2. Choose whether to view your app in Light mode or Dark mode.

  3. Select one of the preset color palettes on the right.

  4. Tap the multi-color palette to choose a custom color.

  5. Tap Advanced options to customize colors individually.

  6. Tap each element to adjust its color.

  7. Tap Save.

⚠️ Exiting the theme editor without saving will result in lost changes.

✨ Good to know: You can change your theme colors anytime — there’s no limit to how often you update them.

    Group 10 (3)

     


    App colors guide

    Here’s what each color setting controls in your app:

    Primary color

    • UPGRADE button for paid products

    • Bullets and highlight boxes in multipricing plans

    • Check marks on the Feature List widget

    • Terms of Use / Privacy Policy links

    • Action buttons

    • Community icons + member/channel labels

    • Tracking icon

    • Various widget and FAQ backgrounds

    👉 Note: When you click Channels, Messages, or Members in Community, the tab automatically turns white. This isn’t a bug. If you want tabs to stay visible, pick an off-white or colored background.

    Secondary background

    • Multipricing box background

    • Highlight boxes for Discover, Learn, Community, Tracking, Profile icons

    • Background for community sections and visibility text

    Caption

    • FAQ text

    • Channel titles and descriptions

    • Channels/Messages/Members tabs

    👉 Note: A channel with new updates stays highlighted until opened. This color difference is intentional.

    Divider

    • Lines below pricing or multipricing plan descriptions

    • Check mark/product list separators

    Text color

    • Headlines, captions, and body text throughout your app

    • Lesson labels and carousel text

    • Login page text

    • Discover, Learn, Community, Tracking, Profile icons (when clicked)

    Button text

    • Text inside action buttons across widgets and plans

    4.png

    ✨ Good to know: You can also change fonts. Passion offers six font styles to match your brand. Learn how to change fonts here.

    ✨ Branding tip: For best results, use these asset sizes:

    • Logo (Authentication, Welcome, Loading screens): 110 × 110 px

    • Background (Discover page, loading state): 750 × 1336 px

    • Header (Sequence overview): 657 × 289 px

    💡 Pro tip: Keep your color scheme consistent with your brand — it builds trust and makes your app feel polished and professional.