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. Vaya a Dashboard > MP App > Branding > Colors.

Configuring General Colors

General colors define primary interface elements throughout the app.

1. Vaya a Dashboard > MP App > Branding > Colors.
   
2. Localice el General sección.
   
3. Haga clic en el botón Background Color swatch.
   
4. Select a color using the color picker or enter a hex code.
   
5. Haga clic en el botón Alternate Background Color swatch.
   
6. Select a contrasting color for alternate content sections.
   
7. Haga clic en el botón Color Image Background swatch.
   
8. Select a color for image placeholder backgrounds.
   
9. Haga clic en el botón Border Color swatch.
   
10. Select a subtle color for element borders and dividers.
    
11. Haga clic en el botón Color de acento 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.

Color de acento 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. Vaya a Dashboard > MemberPress App > Branding > Colors.
   
2. Localice el Navigation Bar sección.
   
3. Haga clic en el botón Background Color swatch.
   
4. Select a color for the navigation bar backgrounds.
   
5. Haga clic en el botón Text Color swatch.
   
6. Select a color ensuring readability against the background.
   
7. Haga clic en el botón 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. Vaya a Dashboard > MP App > Branding > Colors.
   
2. Localice el Tab Bar & More sección.
   
3. Haga clic en el botón Tab Bar Background Color swatch.
   
4. Select a color for tab bar backgrounds.
   
5. Haga clic en el botón Icon Default Color swatch.
   
6. Select a color for inactive navigation icons.
   
7. Haga clic en el botón 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. Vaya a Dashboard > MP App > Branding > Colors.
   
2. Localice el Buttons sección.
   
3. Haga clic en el botón Primary Button Background Color swatch.
   
4. Select a prominent color for primary action buttons.
   
5. Haga clic en el botón Primary Button Text Color swatch.
   
6. Select a contrasting color for button text.
   
7. Haga clic en el botón Secondary Button Background Color swatch.
   
8. Select a subtle color for secondary action buttons.
   
9. Haga clic en el botón 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. Vaya a Dashboard > MP App > Branding > Colors.
   
2. Localice el Text Colors sección.
   
3. Haga clic en el botón Heading Text Color swatch.
   
4. Select a prominent color for section headings and titles.
   
5. Haga clic en el botón Body Text Color swatch.
   
6. Select a highly readable color for the main content text.
   
7. Haga clic en el botón Description Text Color swatch.
   
8. Select a slightly muted color for supplementary descriptions.
   
9. Haga clic en el botón 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. Vaya a Dashboard > MP App > Branding > Colors.
   
2. Localice el Labels sección.
   
3. Haga clic en el botón Label Background Color swatch.
   
4. Select a color for label backgrounds.
   
5. Haga clic en el botón 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. Vaya a Dashboard > MP App > Branding > Colors.
   
2. Localice el Login Screens sección.
   
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. Vaya a Dashboard > MP App > Branding > Colors.
   
2. Localice el Register Screens sección.
   
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. Vaya a Dashboard > MP App > Branding > Colors.
2. Localice el Android Status Bar sección.
3. Haga clic en el botón 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. Vaya a Dashboard > MP App > Branding > Colors.
   
2. Localice el In-App Purchases sección.
   
3. Haga clic en el botón Purchased Status Checkmark Color swatch.
   
4. Select a color for checkmarks indicating purchased memberships.
   
5. Haga clic en el botón 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 página.
3. Haga clic en Guardar cambios.
4. Wait for the confirmation message indicating successful save.

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