Configuring App Colors in MemberPress App

Consistent brand colors enhance app design, reinforce identity, and improve usability. MemberPress App colors settings enable customization of backgrounds, buttons, navigation elements, and content highlights. This document explains how to configure color schemes for all app sections and preview changes across iOS and Android platforms.

Understanding Color Configuration

Color settings control visual appearance throughout the app, including backgrounds, text, buttons, navigation bars, and interactive elements. Each color setting affects specific interface components. Real-time previews display color changes on iOS and Android mockups. Proper color configuration ensures brand consistency and maintains readability across different screen contexts.

Accessing Color Settings

All color configuration occurs within the branding colors interface.

1. Naviguez jusqu'à Dashboard > MP App > Branding > Colors.

Configuring General Colors

General colors define primary interface elements throughout the app.

1. Naviguez jusqu'à Dashboard > MP App > Branding > Colors.
   
2. Localiser le Général section.
   
3. Cliquez sur le bouton Background Color swatch.
   
4. Select a color using the color picker or enter a hex code.
   
5. Cliquez sur le bouton Alternate Background Color swatch.
   
6. Select a contrasting color for alternate content sections.
   
7. Cliquez sur le bouton Color Image Background swatch.
   
8. Select a color for image placeholder backgrounds.
   
9. Cliquez sur le bouton Border Color swatch.
   
10. Select a subtle color for element borders and dividers.
    
11. Cliquez sur le bouton Couleur d'accent swatch.
    
12. Select a prominent color for highlights and emphasis.

Changes preview immediately on App Page, Directory Page, and Menu Page mockups.

Understanding General Color Purposes

Each general color serves specific interface functions.

Background Color fills primary content areas and pages. This color should provide optimal contrast with text colors for readability.

Alternate Background Color differentiates sections or cards within pages. This color should contrast subtly with the primary background while maintaining a cohesive appearance.

Color Image Background displays behind images during loading or when images are unavailable. This color should complement typical image content without creating jarring transitions.

Border Color defines element boundaries and dividers. This color should be subtle enough not to dominate but visible enough to provide structure.

Couleur d'accent highlights interactive elements and important information. This color should stand out prominently while complementing the overall color scheme.

Customizing Navigation Bar Colors

Navigation bar colors affect app headers and top navigation elements.

1. Naviguez jusqu'à Dashboard > MemberPress App > Branding > Colors.
   
2. Localiser le Navigation Bar section.
   
3. Cliquez sur le bouton Background Color swatch.
   
4. Select a color for the navigation bar backgrounds.
   
5. Cliquez sur le bouton Text Color swatch.
   
6. Select a color ensuring readability against the background.
   
7. Cliquez sur le bouton Link Color swatch.
   
8. Select a color for navigation links and interactive text.

Navigation bar preview updates immediately in the header mockup.

Ensuring Navigation Readability

Navigation colors must maintain sufficient contrast for accessibility.

Styling Tab Bar and More Screen

Tab Bar and More Screen colors control the bottom navigation and overflow menu appearance.

1. Naviguez jusqu'à Dashboard > MP App > Branding > Colors.
   
2. Localiser le Tab Bar & More section.
   
3. Cliquez sur le bouton Tab Bar Background Color swatch.
   
4. Select a color for tab bar backgrounds.
   
5. Cliquez sur le bouton Icon Default Color swatch.
   
6. Select a color for inactive navigation icons.
   
7. Cliquez sur le bouton Icon Active Color swatch.
   
8. Select a prominent color for active navigation icons.

Preview mockups update to show tab bar appearance with selected colors.

Differentiating Active and Inactive Icons

Icon colors should clearly indicate the navigation state.

Active icon color should contrast strongly with the default color to indicate the current location. Members should immediately recognize which section they are viewing. Insufficient differentiation causes navigation confusion and poor user experience.

Customizing Button Styles

Button colors define interactive element appearance throughout the app.

1. Naviguez jusqu'à Dashboard > MP App > Branding > Colors.
   
2. Localiser le Buttons section.
   
3. Cliquez sur le bouton Primary Button Background Color swatch.
   
4. Select a prominent color for primary action buttons.
   
5. Cliquez sur le bouton Primary Button Text Color swatch.
   
6. Select a contrasting color for button text.
   
7. Cliquez sur le bouton Secondary Button Background Color swatch.
   
8. Select a subtle color for secondary action buttons.
   
9. Cliquez sur le bouton Secondary Button Text Color swatch.
   
10. Select an appropriate text color for secondary buttons.

Button preview updates show how buttons appear in various contexts.

Distinguishing Button Hierarchies

Primary and secondary buttons should clearly indicate action importance.

Primary buttons represent main actions like “Purchase,” “Submit,” or “Continue.” These buttons should use bold, attention-grabbing colors. Secondary buttons represent alternative actions like “Cancel” or “Go Back.” These buttons should use more subdued colors that complement but don't compete with the primary buttons.

Adjusting Text Colors

Text colors control readability and content hierarchy throughout the app.

1. Naviguez jusqu'à Dashboard > MP App > Branding > Colors.
   
2. Localiser le Text Colors section.
   
3. Cliquez sur le bouton Heading Text Color swatch.
   
4. Select a prominent color for section headings and titles.
   
5. Cliquez sur le bouton Body Text Color swatch.
   
6. Select a highly readable color for the main content text.
   
7. Cliquez sur le bouton Description Text Color swatch.
   
8. Select a slightly muted color for supplementary descriptions.
   
9. Cliquez sur le bouton Meta Text Color swatch.
   
10. Select a subtle color for timestamps and metadata.

Text preview displays how different text levels appear with selected colors.

Establishing Text Hierarchy

Text colors should create a clear visual hierarchy for content scanning.

Heading text should be the most prominent to indicate section starts. Body text should offer optimal readability for extended reading. Description text should be distinguishable but less prominent than body text. Meta text should be subtle enough not to distract from the primary content.

Styling Labels

Label colors affect tags, badges, and status indicators throughout the app.

1. Naviguez jusqu'à Dashboard > MP App > Branding > Colors.
   
2. Localiser le Labels section.
   
3. Cliquez sur le bouton Label Background Color swatch.
   
4. Select a color for label backgrounds.
   
5. Cliquez sur le bouton Label Text Color swatch.
   
6. Select a contrasting color for label text.

Label preview shows appearance in both list and detail views.

Ensuring Label Visibility

Labels must remain visible across different page backgrounds.

The label background color should contrast with the page backgrounds where labels appear. Label text should maintain a strong contrast with the label background for readability. Labels often appear on varying backgrounds, so color selection should account for multiple contexts.

Customizing Login Screen Colors

Login screen colors define the authentication page's appearance.

1. Naviguez jusqu'à Dashboard > MP App > Branding > Colors.
   
2. Localiser le Login Screens section.
   
3. Configure the following color swatches:
   
   • Background Color for the login page background;
   • Input Field Background for form field backgrounds;
   • Input Field Border for field outlines;
   • Input Field Text for entered text color;
   • Button Background for action button backgrounds;
   • Button Text for button text color.
     
4. Review both the Login and Forgot Password screen previews.

Login screen preview displays authentication pages with selected colors.

Styling Registration Screen Colors

Registration screen colors define the account creation page appearance.

1. Naviguez jusqu'à Dashboard > MP App > Branding > Colors.
   
2. Localiser le Register Screens section.
   
3. Configure the following color swatches:
   • Background Color for registration page background;
   • Input Field Background for form field backgrounds;
   • Input Field Border for field outlines;
   • Input Field Text for entered text color;
   • Button Background for action button backgrounds;
   • Button Text for button text color.
     
4. Review the registration screen preview.

Using consistent colors between login and registration screens creates cohesive authentication experiences.

Configuring Android Status Bar Color

Android status bar color affects the device's status bar appearance at the top of the screen.

1. Naviguez jusqu'à Dashboard > MP App > Branding > Colors.
2. Localiser le Android Status Bar section.
3. Cliquez sur le bouton Status Background Color swatch.
4. Select a color that matches or complements the navigation bar.

Status bar color preview updates on the Android device mockup only. This setting does not affect iOS devices.

Customizing In-App Purchase Colors

In-App Purchase colors highlight membership products and benefits.

1. Naviguez jusqu'à Dashboard > MP App > Branding > Colors.
   
2. Localiser le In-App Purchases section.
   
3. Cliquez sur le bouton Purchased Status Checkmark Color swatch.
   
4. Select a color for checkmarks indicating purchased memberships.
   
5. Cliquez sur le bouton Benefits Checkmark Color swatch.
   
6. Select a color for checkmarks listing membership benefits.

Purchase screen preview displays product listings with configured checkmark colors.

Highlighting Purchase Status

Checkmark colors should clearly indicate purchase completion and benefit inclusion.

Purchased status checkmarks should use positive, affirming colors like green to indicate successful transactions. Benefits checkmarks should complement the purchased status color while remaining distinct. Sufficient contrast with background colors ensures visibility across different screen contexts.

Saving Color Configuration

All color selections must be saved before taking effect.

1. Review all configured colors in the preview mockups.
2. Scroll to the bottom of the Dashboard > MemberPress App > Branding > Colors page.
3. Cliquez sur Enregistrer les modifications.
4. Wait for the confirmation message indicating successful save.

Remarque : Navigating away from the page without saving causes all unsaved color changes to be lost.