Temas para el modo oscuro

El Modo Oscuro ofrece a los usuarios la oportunidad de establecer una preferencia de color para todo el sistema (introducido en Android 10 e iOS 13). Los temas “oscuros” están pensados para ahorrar batería y reducir la fatiga visual de los usuarios, al tiempo que ofrecen a los desarrolladores de aplicaciones una forma más sencilla de implementar los temas de color oscuro que prefieren los usuarios.

Los mensajes Braze in-app admiten la adición de un tema oscuro alternativo para ayudar a transmitir el mensaje de color correcto a los usuarios en función de sus preferencias, y ayuda a mantener la coherencia con el diseño de la aplicación.

Cómo funciona el modo oscuro

Los usuarios con versiones de al menos Android 10 o iOS 13 y posteriores pueden activar o desactivar el Modo Oscuro en los ajustes de su dispositivo.

Cuando el Modo Oscuro está activado, los menús y pantallas nativos del dispositivo (notificaciones push, ajustes del dispositivo, etc.) cambiarán a un gris oscuro. Las aplicaciones también pueden elegir admitir el modo oscuro especificando los temas alternativos en el código de la aplicación.

Configuración de un tema en modo oscuro

La nueva opción Modo oscuro, situada en la pestaña Estilo al crear un mensaje dentro de la aplicación, te permite añadir fácilmente un tema de color alternativo para los usuarios que estén en Modo oscuro en su dispositivo.

Cuando esta opción está activada, puedes elegir colores oscuros para tu mensaje dentro de la aplicación utilizando el selector de color, o seleccionando los perfiles de color existentes para reutilizar los temas oscuros o claros.

Usar el modo oscuro de manera sistemática

Para utilizar el modo oscuro en todos los mensajes de la aplicación, ve a Plantillas > Plantillas de mensajes de la aplicación.

Desde allí, seleccione Crear perfil de color en el menú desplegable. Crea un Perfil de Color que se alinee con tu tema de Modo Oscuro. A continuación, cada vez que crees una versión en modo oscuro de un mensaje integrado en la aplicación, podrás seleccionar ese perfil de color y mantener la coherencia del aspecto de tus mensajes integrados en la aplicación.

Compatibilidad

• Tus usuarios deben tener dispositivos iOS versión 13 o superior, o dispositivos Android versión 10 o superior.
• Se requiere el SDK para iOS de Braze v3.21.0+ y el SDK para Android de Braze v3.8.0+.

Uso de mensajes HTML en la aplicación

Para crear un tema oscuro y claro para los mensajes HTML dentro de la aplicación, puedes utilizar la característica prefers-color-scheme multimedia CSS para detectar las preferencias del usuario.

Por ejemplo:

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