Dark Mode themes

Dark Mode offers users the opportunity to set a system-wide color preference (introduced on Android 10 and iOS 13). The “Dark” 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 users prefer.

Braze in-app messages support adding an alternate Dark theme to 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 versions of at least Android 10 or iOS 13 and later can toggle Dark Mode on or off in their device’s settings.

When Dark Mode is enabled, the device’s native menus and screens (push notifications, device settings, etc.) will change to a dark gray. 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 > 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

• Your 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;
  }
}