Xamarin Forms: Temas y Estilos Dinámicos

En el desarrollo de aplicaciones modernas, la capacidad de personalizar la apariencia con temas claros y oscuros es fundamental para ofrecer una experiencia de usuario atractiva y coherente. Xamarin Forms proporciona una forma flexible de implementar temas dinámicos que se pueden cambiar en tiempo de ejecución, permitiendo al usuario elegir su preferencia.

En este artículo, implementaremos una aplicación de ejemplo en la que los usuarios pueden alternar entre un tema claro y un tema oscuro. Seguiremos una estructura paso a paso para que puedas reproducir este ejemplo en Visual Studio.

 

Configurar el Proyecto en Visual Studio

1. Abrir Visual Studio: Crea un nuevo proyecto de Aplicación móvil (Xamarin.Forms).
2. Nombre del proyecto: Asigna un nombre como ThemedApp.
3. Plantilla: Elige la plantilla en blanco.

Al crear el proyecto, Visual Studio generará una estructura básica de tres proyectos:

• Proyecto Android: Código específico para Android.
• Proyecto iOS: Código específico para iOS.
• Proyecto Compartido: Donde se coloca la lógica y la interfaz compartida.

 

Definir Recursos para Temas Claros y Oscuros

Primero, vamos a definir los estilos para los temas claro y oscuro en archivos de recursos XAML que podemos aplicar dinámicamente.

Archivo de Tema Claro (LightTheme.xaml)

En la carpeta Resources, crea un nuevo archivo llamado LightTheme.xaml y define los estilos que se aplicarán cuando el tema claro esté activo.

<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <!-- Definimos los colores principales para el tema claro -->
    <Color x:Key="PrimaryColor">#FFFFFF</Color>
    <Color x:Key="SecondaryColor">#E0E0E0</Color>
    <Color x:Key="TextColor">#000000</Color>

    <!-- Definimos un estilo para el botón -->
    <Style TargetType="Button">
        <Setter Property="BackgroundColor" Value="{StaticResource PrimaryColor}" />
        <Setter Property="TextColor" Value="{StaticResource TextColor}" />
        <Setter Property="FontAttributes" Value="Bold" />
        <Setter Property="Padding" Value="10" />
    </Style>

    <!-- Definimos un estilo para las etiquetas (Label) -->
    <Style TargetType="Label">
        <Setter Property="TextColor" Value="{StaticResource TextColor}" />
        <Setter Property="FontSize" Value="Medium" />
    </Style>

</ResourceDictionary>

Archivo de Tema Oscuro (DarkTheme.xaml)

Ahora, crea un archivo similar para el tema oscuro en la misma carpeta llamado DarkTheme.xaml.

<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <!-- Definimos los colores principales para el tema oscuro -->
    <Color x:Key="PrimaryColor">#000000</Color>
    <Color x:Key="SecondaryColor">#333333</Color>
    <Color x:Key="TextColor">#FFFFFF</Color>

    <!-- Estilo para el botón en tema oscuro -->
    <Style TargetType="Button">
        <Setter Property="BackgroundColor" Value="{StaticResource PrimaryColor}" />
        <Setter Property="TextColor" Value="{StaticResource TextColor}" />
        <Setter Property="FontAttributes" Value="Bold" />
        <Setter Property="Padding" Value="10" />
    </Style>

    <!-- Estilo para las etiquetas (Label) en tema oscuro -->
    <Style TargetType="Label">
        <Setter Property="TextColor" Value="{StaticResource TextColor}" />
        <Setter Property="FontSize" Value="Medium" />
    </Style>

</ResourceDictionary>

• Colores: Definimos colores clave como PrimaryColor, SecondaryColor y TextColor. Estos se aplicarán a varios elementos de la interfaz.
• Estilos: Creamos estilos básicos para los controles Button y Label, que utilizarán los colores definidos.

 

Aplicar los Temas de Forma Dinámica

Ahora, vamos a implementar la funcionalidad que permite alternar entre estos dos temas en tiempo de ejecución. Para ello, utilizaremos la clase ResourceDictionary en el archivo App.xaml.cs.

Modificar App.xaml.cs para Manejar Temas

Ve al archivo App.xaml.cs y añade el siguiente código para cargar y cambiar entre los temas.

using Xamarin.Forms;

namespace ThemedApp
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
            
            // Cargar el tema claro por defecto
            ApplyTheme(Theme.Light);
            
            MainPage = new MainPage();
        }

        // Enum para definir los temas
        public enum Theme
        {
            Light,
            Dark
        }

        // Método para aplicar un tema
        public void ApplyTheme(Theme theme)
        {
            ResourceDictionary themeResources = new ResourceDictionary();
            
            switch (theme)
            {
                case Theme.Light:
                    themeResources = new LightTheme();
                    break;
                case Theme.Dark:
                    themeResources = new DarkTheme();
                    break;
            }

            // Limpiamos los recursos actuales y aplicamos los nuevos
            Resources.MergedDictionaries.Clear();
            Resources.MergedDictionaries.Add(themeResources);
        }
    }
}

• ApplyTheme(Theme theme): Este método limpia los estilos actuales y aplica los correspondientes al tema seleccionado. Usamos un switch para decidir qué tema cargar.
• ResourceDictionary: Permite almacenar y gestionar los recursos de la aplicación como colores y estilos.

 

Crear la Interfaz para Cambiar Temas

En la MainPage.xaml, vamos a crear una interfaz simple que permita al usuario alternar entre el tema claro y el tema oscuro.

Diseño de la Interfaz en MainPage.xaml

Reemplaza el contenido de MainPage.xaml con el siguiente código:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ThemedApp.MainPage"
             Title="Temas Dinámicos">

    <StackLayout Padding="20" Spacing="20">
        <Label Text="Bienvenido a la Aplicación Temática" />

        <!-- Botón para cambiar a tema claro -->
        <Button Text="Tema Claro" Clicked="OnLightThemeClicked" />

        <!-- Botón para cambiar a tema oscuro -->
        <Button Text="Tema Oscuro" Clicked="OnDarkThemeClicked" />
    </StackLayout>
</ContentPage>

Implementar la Lógica en MainPage.xaml.cs

Ahora, veamos cómo cambiar los temas en tiempo de ejecución. En MainPage.xaml.cs, implementa la lógica de los botones.

using System;
using Xamarin.Forms;

namespace ThemedApp
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        // Evento para cambiar al tema claro
        private void OnLightThemeClicked(object sender, EventArgs e)
        {
            ((App)Application.Current).ApplyTheme(App.Theme.Light);
        }

        // Evento para cambiar al tema oscuro
        private void OnDarkThemeClicked(object sender, EventArgs e)
        {
            ((App)Application.Current).ApplyTheme(App.Theme.Dark);
        }
    }
}

• Eventos OnLightThemeClicked y OnDarkThemeClicked: Cada botón ejecuta su respectivo evento, que llama al método ApplyTheme de la clase App para cambiar el tema dinámicamente.
• Application.Current: Nos permite acceder a la instancia actual de la aplicación para aplicar el tema globalmente.

 

Probar la Aplicación

1. Ejecuta la Aplicación: Selecciona un emulador o dispositivo físico en Visual Studio y haz clic en Iniciar.
2. Interactúa con los Botones: Verás que los botones te permiten alternar entre el tema claro y oscuro. La interfaz cambiará de acuerdo con el tema que se aplique en tiempo de ejecución.

 

Conclusión

Este ejemplo completo ha cubierto cómo implementar temas dinámicos en una aplicación Xamarin Forms. Hemos definido dos archivos de recursos separados para el tema claro y el tema oscuro, y hemos implementado la lógica para cambiar entre estos temas en tiempo real. Este es un enfoque escalable que puedes adaptar y extender fácilmente para más complejidad o más temas.