Cuando el dispositivo del usuario tiene el modo oscuro activado, tu flow puede cambiar sus colores y fondos en consecuencia — mostrar un degradado más oscuro o una imagen acorde al tema. Para configurarlo, usas estilos con una versión independiente para cada tema: claro y oscuro.

Cada versión es un relleno: un color sólido, degradado, imagen o vídeo. Un único relleno puede combinar varios elementos: una capa de color semitransparente puede teñir la imagen que tiene debajo. Si no hay diferencia entre los dos temas, ambas versiones pueden ser idénticas.

Todo lo que tienes que hacer es aplicar el estilo a un elemento, y el flow usa automáticamente la versión correcta según el modo del dispositivo.

Añadir un tema oscuro

De forma predeterminada, un nuevo flow tiene un tema claro. Para añadir un tema oscuro:

1. Abre el panel Styles y selecciona la pestaña Colors.
2. Haz clic en el icono para abrir el menú de gestión de temas.
3. Selecciona Add dark theme. La variante oscura se añade a cada estilo de color, con dos valores idénticos. Ahora puedes configurar el tema oscuro.

Configura el tema oscuro

Después de añadir el tema oscuro, cada entrada de la lista Color Style tiene dos configuraciones específicas por tema: Light y Dark.

Para editar un estilo:

1. Abre el panel Styles
2. Selecciona la pestaña Colors.
3. Haz clic en una entrada de estilo. Si el estilo necesario aún no existe, crea uno nuevo.
4. El valor Light y el valor Dark aparecen uno tras otro. Cada valor puede contener varias capas. Haz clic en la muestra de color para configurar la capa según su tipo de relleno:
   • Color sólido
   • Degradado
   • Imagen o vídeo
5. Haz clic en Save.

Los valores Light y Dark pueden usar diferentes tipos de relleno.

Mezclar tipos de relleno

Puedes combinar tipos de relleno entre las dos versiones de un estilo:

• Colores sólidos, degradados e imágenes: En cualquier combinación. Por ejemplo, un fondo puede ser un color sólido en el modo claro y una imagen en el modo oscuro.
• Vídeos: Si la versión clara incluye un vídeo, la versión oscura también debe incluir un vídeo, y viceversa. Los dos vídeos pueden ser diferentes.

Aplicar el tema a un elemento

Si una propiedad de un elemento no usa un estilo de color, el tema oscuro no se aplica a ella. Los elementos de imagen y vídeo no tienen estilo de color: para cambiar su archivo en modo oscuro, añade un archivo oscuro.

Para que un elemento siga el tema, haz clic en la muestra de su capa de relleno, color de texto, color de borde o color de icono. Sustituye el valor estático por el estilo haciendo clic en la pestaña Styles y seleccionando la entrada de estilo. Si ningún estilo tiene el valor que necesitas, guarda el valor actual como estilo.

El fondo de una pantalla sigue el tema de la misma manera: aplica el estilo a su capa de relleno en Screen settings. Para ver los pasos, consulta Show a different background in dark mode.

Para aplicar un estilo a muchos elementos de una pantalla, consulta al AI Editor, por ejemplo: Apply the Card background style to all cards.

Vista previa del flow en modo oscuro

Haz clic en los iconos de tema que aparecen debajo del lienzo para cambiar entre Dark mode y Light mode.

Los iconos solo aparecen si el flow tiene un tema oscuro, o un elemento de imagen o vídeo con un archivo oscuro.

Mostrar una imagen o vídeo diferente en modo oscuro

Un elemento de imagen o vídeo muestra su archivo en ambos modos hasta que añades un archivo específico para el modo oscuro. Para mostrar un archivo diferente en modo oscuro:

1. Selecciona el elemento de imagen o vídeo.
2. En la sección Image o Video del panel de propiedades, selecciona la pestaña Dark. El lienzo cambia a la vista previa del modo oscuro.
3. Sube el archivo para el modo oscuro.

Para editar el archivo en modo claro de nuevo, selecciona la pestaña Light.

Configura el tema de la barra de estado

Los iconos de hora y batería de la barra de estado pueden no combinar con los colores de tu flow en alguno de los modos. Para que los iconos se vean bien, configura el Status bar theme en Screen settings con el interruptor Status bar activado:

• : Iconos blancos, para un fondo que es oscuro en ambos modos.
• : Iconos negros, para un fondo que es claro en ambos modos.
• : Iconos que siguen la configuración del dispositivo, para un fondo que es claro en un modo y oscuro en el otro.

Eliminar un tema

1. Abre el panel Styles y selecciona la pestaña Colors.
2. Haz clic en el icono de ajustes para abrir el menú de gestión de temas.
3. Selecciona una opción del menú:
   • Delete Dark theme: Conserva la versión clara de cada estilo de color en ambos modos.
   • Delete Light theme: Conserva la versión oscura de cada estilo de color en ambos modos.