Your app really only needs two colors to start feeling like yours: a light one and a dark one. This tutorial walks you through picking both in the Colors and Branding step of the MAM Setup Wizard. By the end you’ll have both saved to your app, you’ll have watched the live preview recolor to match your dark pick, and you’ll know exactly where to go later to fine-tune every other color.

This step sits in the middle of the larger wizard — right after App Navigation and right before App Previewer — so the colors you choose here are the very ones you’ll see when you load the app onto a real device a few minutes from now.

What you’ll have at the end

• A light (Text & Icon) color and a dark (Brand) color saved for your app.
• A live preview of your selected home screen that has been recolored to match your dark color.
• A clear next step for previewing the app and for fine-tuning individual colors.

Prerequisites

• You’re a WordPress admin (you can manage options on the site).
• A supported content plugin (GeoDirectory) is installed and active, so the full wizard is available. Without it, the wizard shows only the Welcome step.
• You’ve worked through the earlier wizard steps — Home Screen Setup and App Navigation — at least far enough to reach Colors and Branding. The home layout you picked determines which preview image you’ll see recolored here.

Tip: Had to step away? Pick up right where you left off — resume from the admin notice that reads “Make sure you finish configuring your app in the MAM Main Setup Wizard,” or reopen the wizard from the MAM menu.

Steps

1. Open the Colors and Branding step

From the App Navigation step, click the Next Step: Colors and Branding → button. The wizard advances to a screen titled Customize Your App Colors.

You won’t need to re-confirm anything from the steps before this one — reaching this screen quietly saves your navigation and home-layout choices behind the scenes.

You’ll see two areas: the color pickers on the left and an app preview on the right.

2. Choose your light color

This picker decides what your text and active icons look like when they sit on top of a colored background — it’s labeled Text & Icon Color (Light).

Click the color swatch to open your browser’s color picker, then choose your light color. It starts at white (#ffffff) by default.

Pick it and you’re done — there’s no separate Save button on this step, the wizard saves your choice the moment you make it. (Behind the scenes, it’s stored as your app’s light theme color.)

3. Choose your dark color and watch the preview recolor

This is the color that does the heavy lifting — the bolder brand color used for headers, buttons, and highlights, and the one that actually redraws the preview. It’s labeled Brand Color (Dark).

Click the swatch and choose your dark color. It starts at MAM’s template red (#E70000) by default.

Change it and two things happen at once:

• The color is saved automatically, just like the light color.
• The app preview on the right recolors to match. The wizard regenerates the preview image, swapping the template red for the dark color you just chose, then drops the new image in once it’s ready. You’ll see a brief “wait” cursor while it works.

Only the dark color triggers this live recolor. Changing the light color still saves it, but it won’t repaint the preview image — so if the preview looks unchanged after you adjust the light color, that’s exactly what’s supposed to happen.

Note: The preview only recolors the red accents in the mockup of the home layout you selected earlier. Exactly which areas change depends on which layout — Classic Directory, Modern Carousel, or Events and Venues — you chose back in the Home Screen step.

4. Adjust until you’re happy

Both pickers update instantly, so feel free to bounce back and forth between light and dark as many times as you like — every change saves itself as you make it. Pick whatever combination feels most like your brand, and give the preview a moment to settle on the recolored image.

You don’t need to get this perfect right now. These two colors just set sensible defaults across your app — you’ll be able to fine-tune each one individually later (see What’s next).

5. Continue to the App Previewer

Happy with what you see? Click Next Step: Get the App Previewer → and the wizard moves you on to the App Previewer step, where you’ll scan a QR code to load your app — with these colors applied — onto your phone or tablet.

What’s next

• See your colors on a real device. Continue to the App Previewer step and load your app in the WP Mobile App Manager Previewer to see your light and dark colors in context.
• Fine-tune every color. The two colors you picked here are starting points. To adjust individual colors across screens — headers, buttons, tag clouds, and more — open MAM → App Settings Manager after the wizard. The branding and design controls there give you full per-element control.
• Refine branding anytime. Your color choices aren’t locked. You can revisit the wizard or App Settings whenever you want to rebrand, and your published app will pick up the changes on its next content refresh.