Temas

Los dispositivos móviles incluyen la opción de usar un tema claro u oscuro a nivel de sistema operativo. Las aplicaciones pueden detectar y responder al cambio del tema del sistema.

NOTA: El tema del sistema puede cambiar por diversos motivos dependiendo de la la configuración del dispositivo. Además de la elección explícita por parte del usuario, puede cambiar en base a factores ambientales como un nivel bajo de luz.

En Xamarin.Forms 4.6 se añade AppTheme. Ahora las aplicaciones de Xamarin. Forms pueden responder a los cambios de tema usado por el sistema y en este artículo vamos a ver como hacerlo.

Definir y utilizar recursos por tema

Utilizando AppThemeColor podemos definir un color para los temas del sistema Light y Dark.

<AppThemeColor x:Key="ThemeColor" Light="DarkRed" Dark="LightPink" />

Podemos usar el color como hemos estado haciendo hasta ahora:

<Label 
     Text="AppTheme Color"
     TextColor="{DynamicResource ThemeColor}"/>

De forma automática se aplicará el color rojo oscuro usando el tema claro, y rosa claro al usar el oscuro. También podemos definir un AppThemeColor usando estilos utilizando la extensión de marcado OnAppTheme:

<Style x:Key="OSThemeStyle" TargetType="Label" >
     <Setter Property="TextColor" Value="{OnAppTheme Black, Light=DarkRed, Dark=LightPink}" />
</Style>

Aplicamos el estilo:

<Label 
     Text="Using Style"
     Style="{DynamicResource OSThemeStyle}"/>

Detectar el tema actual usado por el sistema

Podemos saber el tema usado por el sistema utilizando la propiedad Application.RequestedTheme:

OSAppTheme currentTheme = Application.Current.RequestedTheme;

Obtenemos un valor de tipo enumeración OSAppTheme. La enumeración puede tener uno de los siguientes valores:

• Unspecified, que indica que el dispositivo está utilizando un tema no especificado.
• Light, que indica que el dispositivo está usando el tema claro.
• Dark, que indica que el dispositivo está usando el tema oscuro.

Reaccionar al cambio de tema

El tema usado por el puede cambiar y desde nuestra aplicación, podemos detectar el cambio. Para detectar el cambio de tema podemos usar el evento Application.RequestedThemeChanged:

Application.Current.RequestedThemeChanged += (s, a) =>
{
     AppTheme requestedTheme = a.RequestedTheme;
};

Puedes encontrar un ejemplo de AppTheme en GitHub:

¿Qué te parece esta nueva API?. Recuerda, puedes dejar un comentario con cualquier pregunta o duda!.

Más información

• Microsoft Docs: Responder a los cambios de tema del sistema en las aplicaciones de Xamarin.Forms