Al igual que hacía Xamarin Forms, Maui también nos proporciona las herramientas para poder tener el modo oscuro en nuestra app.
Para empezar tenemos un método para saber si el sistema tiene activado el modo oscuro, es decir, el usuario desde los ajustes de su dispositivo, tiene activado el modo oscuro o no.
OSAppTheme currentTheme = Application.Current.RequestedTheme;OSAppTheme es un enumerado que puede tener los valores "Unspecified,Light y Dark"
Independientemente del sistema tenemos el tema de nuestra app, por ejemplo, podemos tener solo el modo light implementado o incluso tener una sección de ajustes dentro de nuestra app para permitir al usuario elegir usar el del sistema o seleccionar Light/Dark independientemente del sistema.
Entonces, ¿Cómo establezco el tema en mi app?
Application.Current.UserAppTheme = OSAppTheme.Dark;Seteando OSAppTheme.Dark a UserAppTheme seleccionamos el tema oscuro en nuestra app independientemente del modo seleccionado en el sistema.
Una vez que ya sabemos como seleccionar el modo oscuro o light en nuestra app nos quedaría ver como definiríamos los diferentes estilos según el tema seleccionado.
Al igual que en Xamarin, tenemos la extensión de marcado AppThemeBinding que nos permite elegir entre diferentes estilos según el tema que este seleccionado en la app; tema que se selecciona tal como hemos visto más arriba.
Usando AppThemeBinding para definir por ejemplo el color de un Label seria algo asi:
<Label
Text="Hello"
TextColor="{AppThemeBinding Dark=White,Light=Black}"/>Con este código, el color del Label cambiaria según el valor que metamos en "Application.Current.UserAppTheme". En lugar de llamar directamente al Color, tambien podriamos llamar a StaticResource y apuntar a un recurso.
Para ayudar a comprender todo esto, he modificado la plantilla de cuando creas un nuevo proyecto en .Net Maui para soportar el modo oscuro. Os dejo un gif para que veais como se ve. Tambien podeis descargaros el código en este git en https://github.com/migueBarrera/.NetMaui-DarkLightMode
Comments