Dark Mode for In App Messages

Dark Mode offers users the opportunity to set a system-wide color preference (introduced on Android 10 and iOS 13). “Dark Mode” themes are intended to conserve battery life and reduce strain on users’ eyes, while providing app developers an easier way to implement the dark color themes that many users prefer.

Braze supports adding an alternate Dark Mode theme to in-app messages that help deliver the right color message to your users based on their preference, and helps provide consistency with your app’s design.

How Dark Mode Works

Users with the latest versions of Android (10+) and iOS (13+) can toggle Dark Mode on or off in their phone’s settings.

When Dark Mode is enabled on a user’s device, the phone’s native menus and screens (push notifications, phone settings, etc.) will change to a dark grey or other dark color palette. Apps can also choose to support dark mode by specifying the alternate themes in the app’s code.

Setting a Dark Mode Theme

The new Dark Mode option, located in the Style tab when creating an in-app message, lets you easily add an alternate color theme for users who are in Dark Mode on their device.

When this option is enabled, you can choose dark theme colors for your in-app message using the color picker, or by selecting existing Color Profiles to re-use existing Dark or Light themes.

Using Dark Mode Consistently

To use Dark Mode for all in-app messages, go to Templates & Media, then In-App Message Templates. From there, select Create Color Profile from the dropdown. Create a Color Profile that aligns with your Dark Mode theme. Then, anytime you create a Dark Mode version of an in-app message, you can select that Color Profile and keep the look of your in-app messages consistent.

Compatibility

  • End users must be on iOS devices version 13 or higher, or Android devices version 10 or higher.
  • Braze iOS SDK v3.21.0+ Braze Android SDK v3.8.0+ is required.

Using HTML In App Messages

To create a Dark and Light theme for HTML In App Messages, you can use the prefers-color-scheme CSS media feature to detect the user’s preference.

For example:

1
2
3
4
5
6
7
8
9
10
11
12
13
@media (prefers-color-scheme: dark) {
  body {
    background: #333;
    color: white;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background: white;
    color: #555;
  }
}
WAS THIS PAGE HELPFUL?
New Stuff!