What you’ll do

When your app shows a quick confirmation (“Added to favorites”, “Message sent”) or a brief error, a short-lived bar slides up across the bottom of the screen — a snackbar (sometimes called a toast). Separately, an accent color adds a tint to small interactive highlights throughout the app.

Here’s how to set all three so they match your brand:

• Snackbar Background Color — the bar behind the message
• Snackbar Text Color — the message text on that bar
• Preferred Accent Color — the app-wide accent for highlights and interactive elements

All three are no-code color settings: pick a color, save, and rebuild the app feed. No design files, no code.

Where these settings live

All three settings are in Mobile App Manager → App Settings → Misc.

They’re simple WordPress color fields — click the field, choose a color (or paste a hex value), and save. Each one ships with a sensible default already in place, so an app that never touches these screens still looks usable and neutral.

The setting keys above are the stored option names. You only need them if you’re scripting or debugging — in normal use you work entirely from the labels in the Misc tab.

Style the snackbar

A snackbar is that short bar that pops up at the bottom of the screen right after something happens — a confirmation, a status message, a lightweight error. It disappears on its own after a few seconds; nobody has to tap anything to close it.

Two settings control how it looks:

1. Open Mobile App Manager → App Settings → Misc.
2. Set Snackbar Background Color to the bar’s fill color.
3. Set Snackbar Text Color to the color of the message text on that bar.
4. Save, then rebuild or refresh your app so it picks up the new colors.

Picking a readable pair

A snackbar only works if people can actually read it in the second or two it’s on screen, so here contrast matters more than matching your brand exactly.

• The defaults — dark gray background (#696969) with white text (#ffffff) — are deliberately high-contrast and neutral. They work on top of almost any screen.
• Switching to a brand-colored background? Choose text that stays legible against it: a dark brand color generally wants light text, while a light or pastel background wants dark text.
• Keep background and text from landing close in brightness (mid-gray text on a mid-gray bar, say) — in that brief window it’s shown, the message just becomes hard to read.

Snackbars are meant to stay low-key. They’re for “this happened” confirmations and minor errors, not for messages the user must act on — for anything that needs a decision or a tap, the app reaches for a different, blocking element instead.

Set the accent color

Preferred Accent Color (colors_prefered_accent_color) is the app’s accent — the color applied to small highlights and interactive elements throughout the app. Think of it as the “this is tappable / this is selected / this is emphasized” tint, distinct from the larger surfaces you set elsewhere (header background, tab bar, status bar).

1. Open Mobile App Manager → App Settings → Misc.
2. Set Preferred Accent Color to your brand’s accent color.
3. Save and rebuild/refresh the app.

The default is black (#000000) — neutral, but it doesn’t say anything about your brand. Most apps swap it out for their primary brand color.

How the accent relates to your other colors

The accent color is just one of several independent color controls in MAM Suite, and it does not override your larger surface colors — those are set on their own tabs:

• Header background and header text → Nav Header tab
• Bottom tab bar color and selected/unselected icon colors → Bottom Tab Bar tab
• Snackbar background and text → Misc tab (above)

Because the accent sits on top of those surfaces, test it against the backgrounds it’ll actually appear over — an accent that looks great on a white content screen can vanish against a dark header or a dark snackbar.

A related accent: the QR scan button

Right next to the accent setting in the Misc tab sits QR Code Scan Button Color (button_scan_qr_code_color, default #000000) — a single-purpose accent for the scan-a-QR-code button, in apps that have one. It’s kept separate from the app-wide accent so you can give the scan action its own emphasis. No QR scan button in your app? Skip it.

“Alerts” — a note on terminology

The word alert shows up in a few different places in MAM Suite, and they don’t all mean the same thing. Here’s how to keep them straight:

• Snackbars (this article) are the brief, auto-dismissing confirmation/error bars. They are styled by the two snackbar color settings above.
• App-update alert — a separate yes/no setting, Alert for new app updates (alert_for_new_version), prompts users to update when a newer version is in the store. It controls whether the prompt appears, not its color.
• Alert preferences in the nav header — a separate home-screen setting, Show Alert Preferences in Nav Header? (home_nav_show_alerts), surfaces a notification/alert-preferences control in the header.

The two snackbar color settings and the accent color don’t restyle those other “alert” features — each one has its own setting. They’re listed here only so you’re not hunting for a single “alerts color” control that doesn’t exist.

Verify your changes

1. Save all three settings in the Misc tab.
2. Rebuild or refresh the app feed so the new color values are published.
3. In the app, do something that triggers a snackbar — favoriting an item or submitting a short form both work — and confirm the bar and its text use your colors and stay readable.
4. Tap through a few screens that use highlights or interactive accents and confirm the accent color looks right against each background (content, header, tab bar).

Troubleshooting

• The snackbar text is hard to read. Your background and text colors are sitting too close in brightness. Push them further apart — or fall back to the high-contrast default pairing (dark background, white text) if you’re not sure.
• My accent color disappears on some screens. It’s likely sitting against a surface color too close to it. Check it against your Nav Header and Bottom Tab Bar colors, not just the white content area.
• Colors didn’t change in the app. The settings saved fine, but the app is still running on the old feed. Rebuild/refresh the app so the new values publish, then relaunch.
• I changed an “alert” but the snackbar still looks the same. “Alert for new app updates” and “Show Alert Preferences in Nav Header?” are different features from the snackbar — they don’t affect snackbar color. Use the two Snackbar color settings for that instead.

Verification

This article was last verified against:

• Source: mam-main/includes/app-settings/admin-settings-page.php — snackbar_background_color (default #696969), snackbar_text_color (default #ffffff), colors_prefered_accent_color (default #000000), button_scan_qr_code_color (default #000000), all under the misc settings category; the Misc tab is registered in the same file.
• App-setting reference docs: app-setting-reference/app-setting-snackbar_background_color.md, app-setting-reference/app-setting-snackbar_text_color.md, app-setting-reference/app-setting-colors_prefered_accent_color.md, app-setting-reference/app-setting-alert_for_new_version.md, app-setting-reference/app-setting-home_nav_show_alerts.md.

Re-verify whenever a snackbar or accent color setting is renamed, moved to a different tab, or has its default changed, or when the app’s snackbar/accent rendering behavior changes.

Related articles

• Set your header and navigation colors
• Style the bottom tab bar
• Preferred Accent Color (app setting reference)
• Snackbar Background Color (app setting reference)
• Snackbar Text Color (app setting reference)