Serving Industries Worldwide

Innovative Ways - Satisfied Clientele

Incredible App Themes for Xamarin.Forms


Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

 
 

Themes-for-Xamarin

Predefined and used all over the application is called Application theme. In various popular apps like YouTube, Skype, WhatsApp, Instagram, etc. is providing themes like Light, dark mode to the user. We can change the color of the application using themes by a predefined set of a color scheme like dark, light, or any other color.

We can create a theme using Resources, ResourceDictionary, and Styles in Xamarin Forms. Resources are commonly shared values in the application. It is responsible for the reusability of values that highly scale. It reduces the hard code values in the application, so when we have to change the theme we have to change only a defined set of resources only. We do not have to change all the values.

ResourceDictionary is a group of resources. Resources are stored in ResourceDictionary. In a single ResourceDictionary, we can add multiple resources. We will find ResourceDictionary in App.XAML file.

Styles means assigning various properties to the UI Control for a better look and feel. We can use these defined styles all over the application to give the same look to the application. We do not have to write code on every page for the same control to give the same look in the app we can define a style for that control and bind the style where ever it is needed. Styles are defined in the app. XAML file. Each style has a unique key and target type.

We can define style in App.xaml file in the following way and display in the Xaml page inside the control.
 

<style targettype="Button" type="text/css" x:key="ButtonStyle"><Setter Property="BackgroundColor"
                    Value="Gray" />
            <Setter Property="TextColor"
                    Value="Black" />
            <Setter Property="HeightRequest"
                    Value="45" />
            <Setter Property="WidthRequest"
                    Value="190" />
            <Setter Property="CornerRadius"
                    Value="18" /></style><style targettype="Label" type="text/css" x:key="LabelStyle1"><Setter Property="TextColor"
                    Value="Blue" />
            <Setter Property="FontSize"
                    Value="30" /></style><style targettype="Label" type="text/css" x:key="LabelStyle2"><Setter Property="TextColor"
                    Value="Grey" />
            <Setter Property="FontSize"
                    Value="25" /></style><style targettype="Label" type="text/css" x:key="LabelStyle3"><Setter Property="TextColor"
                    Value="Green" />
            <Setter Property="FontSize"
                    Value="15" /></style>      

Applying style to Label

Let's see the example of applying a theme.

We will be going to create a simple application in which we will apply Light and Dark mode to the application. By default, we will set the theme as Light.

First, we will create a theme using ResourceDictionary and then set a default theme using ResourceDictionary in App.Xaml file.

Code for Light Mode
 


<resourcedictionary x:class="ThemingDemo.LightTheme" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <color x:key="PageBackgroundColor"> White </color>
    <color x:key="NavigationBarColor"> WhiteSmoke </color>
    <color x:key="PrimaryColor"> WhiteSmoke </color>
    <color x:key="SecondaryColor"> Black </color>
    <color x:key="PrimaryTextColor"> blue </color>
    <color x:key="SecondaryTextColor"> White </color>
    <color x:key="TertiaryTextColor"> Gray </color>
    <color x:key="TransparentColor"> Transparent </color>

</resourcedictionary>

CS file

public partial class LightTheme : ResourceDictionary
    {
        public LightTheme()
        {
            InitializeComponent();
        }
    }
   

Code for Dark Mode
 


<resourcedictionary x:class="ThemingDemo.DarkTheme" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <color x:key="PageBackgroundColor"> Black </color>
    <color x:key="NavigationBarColor"> Gray </color>
    <color x:key="PrimaryColor"> Skyblue </color>
     <color x:key="SecondaryColor"> White </color>
    <color x:key="PrimaryTextColor"> White </color>
    <color x:key="SecondaryTextColor"> White </color>
    <color x:key="TertiaryTextColor"> WhiteSmoke </color>
    <color x:key="TransparentColor"> Transparent </color>

</resourcedictionary>

CS File
 

 public partial class DarkTheme : ResourceDictionary
    {
        public DarkTheme()
        {
            InitializeComponent();
        }
    }

Now, we will set Light mode as default and add style for UI control we are going to use in our application.
 


<application.resources>
        <resourcedictionary source="Themes/LightTheme.xaml" /><style targettype="NavigationPage" type="text/css"><Setter Property="BarBackgroundColor"
                    Value="{DynamicResource NavigationBarColor}" />
            <Setter Property="BarTextColor"
                    Value="{DynamicResource SecondaryColor}" /></style><style targettype="Button" type="text/css" x:key="ButtonStyle"><Setter Property="BackgroundColor"
                    Value="{DynamicResource PrimaryColor}" />
            <Setter Property="TextColor"
                    Value="{DynamicResource SecondaryColor}" />
            <Setter Property="HeightRequest"
                    Value="45" />
            <Setter Property="WidthRequest"
                    Value="190" />
            <Setter Property="CornerRadius"
                    Value="18" /></style><style targettype="Label" type="text/css" x:key="LargeLabelStyle"><Setter Property="TextColor"
                    Value="{DynamicResource SecondaryTextColor}" />
            <Setter Property="FontSize"
                    Value="30" /></style><style targettype="Label" type="text/css" x:key="MediumLabelStyle"><Setter Property="TextColor"
                    Value="{DynamicResource PrimaryTextColor}" />
            <Setter Property="FontSize"
                    Value="25" /></style><style targettype="Label" type="text/css" x:key="SmallLabelStyle"><Setter Property="TextColor"
                    Value="{DynamicResource TertiaryTextColor}" />
            <Setter Property="FontSize"
                    Value="15" /></style>

</application.resources>

Now, we will create View pages that are one for changing the theme and the other two display detail and summary.

This code is for changing the theme of the app, and the second code is a cs file for a select theme.
 

<xmp>
<StackLayout Margin="20"
                 VerticalOptions="CenterAndExpand">
        <local:EnumPicker ios:Picker.UpdateMode="WhenFinished"
                          EnumType="{x:Type local:Theme}"
                          Title="Select Theme"
                          SelectedIndexChanged="OnPickerSelectionChanged" />
        <Label x:Name="statusLabel"
               HorizontalOptions="Center" />
    </StackLayout>


</xmp>
public partial class ThemeSelectionPage : ContentPage, IModalPage
    {
        public ThemeSelectionPage()
        {
            InitializeComponent();
        }

        void OnPickerSelectionChanged(object sender, EventArgs e)
        {
            Picker picker = sender as Picker;
            Theme theme = (Theme)picker.SelectedItem;

            ICollection<ResourceDictionary> mergedDictionaries = Application.Current.Resources.MergedDictionaries;
            if (mergedDictionaries != null)
            {
                mergedDictionaries.Clear();

                switch (theme)
                {
                    case Theme.Dark:
                        mergedDictionaries.Add(new DarkTheme());
                        break;
                    case Theme.Light:
                    default:
                        mergedDictionaries.Add(new LightTheme());
                        break;
                }
                statusLabel.Text = $"{theme.ToString()} theme loaded. Close this page.";
            }
        }

        public async Task Dismiss()
        {
            await Navigation.PopModalAsync();
        }
    }

theme1

Image: Theme selection page
 

Code for Summary and detail page.
 

<xmp>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ThemingDemo"
             x:Class="ThemingDemo.UserSummaryPage"
             Title=" Summary"
             BackgroundColor="{DynamicResource PageBackgroundColor}">
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Choose Theme"
                     Clicked="OnThemeToolbarItemClicked" />
    </ContentPage.ToolbarItems>
    <ScrollView>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="200" />
                <RowDefinition Height="120" />
                <RowDefinition Height="70" />
            </Grid.RowDefinitions>
            <Grid BackgroundColor="{DynamicResource PrimaryColor}">
                <Label Text="Xamarin Forms"
                       VerticalOptions="Center"
                       Margin="15"
                       Style="{StaticResource MediumLabelStyle}" />
                <Frame Margin="10"
                       CornerRadius="50"
                       HeightRequest="60"
                       WidthRequest="60"
                       IsClippedToBounds="True"
                       HorizontalOptions="End"
                       VerticalOptions="Center">
                    <Image Grid.Column="1" Source="xamarin.png" HeightRequest="100" WidthRequest="100"></Image>
                    
                </Frame>
            </Grid>
            <StackLayout Grid.Row="1"
                         Margin="10">
                <Label Text="Xamarin.Forms is Open source framwork to develope Android, iOS and windows Applications."
                       Style="{StaticResource SmallLabelStyle}" />
                <Label Text="  &#x2022; It provides various UI controls"
                       Style="{StaticResource SmallLabelStyle}" />
                <Label Text="  &#x2022; We can define various layout provided by xamarin.forms."
                       Style="{StaticResource SmallLabelStyle}" />
                
            </StackLayout>
            <Button Grid.Row="2"
                    Text="MORE INFORMATION"
                    Clicked="OnNavigation"
                    HorizontalOptions="Center"
                    VerticalOptions="Center"
                    Style="{StaticResource ButtonStyle}" />
        </Grid>
    </ScrollView>
</ContentPage>

</xmp>

CS file
 

public partial class UserSummaryPage : ContentPage
    {
        public UserSummaryPage()
        {
            InitializeComponent();
        }

        async void OnNavigation(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new UserDetailsPage());
        }

        async void OnThemeToolbarItemClicked(object sender, EventArgs e)
        {
            await Navigation.PushModalAsync(new NavigationPage(new ThemeSelectionPage()));
        }
    }

theme2

Image: Summary page (Light Mode)
 

theme3

Image: Summary (Dark mode)
 

Planning to Hire Xamarin App Development Company ?

Your Search ends here.

 

Code for detail page
 

<xmp>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ThemingDemo"
             x:Class="ThemingDemo.UserDetailsPage"
             Title="Details"
             BackgroundColor="{DynamicResource PageBackgroundColor}">
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Choose Theme"
                     Clicked="OnThemeToolbarClicked" />
    </ContentPage.ToolbarItems>
    <ScrollView>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.6*" />
                <RowDefinition Height="0.1*" />
                <RowDefinition Height="0.1*" />
                <RowDefinition Height="0.2*" />
            </Grid.RowDefinitions>
            <Image Source="xamarin.png"
                    HeightRequest="100" WidthRequest="100"/>
            <Grid BackgroundColor="{DynamicResource TransparentBackgroundColor}">
                <Label VerticalOptions="End"
                       Margin="15"
                       Style="{StaticResource MediumLabelStyle}">
                    <Label.FormattedText>
                        <FormattedString>
                            <Span Text="Xamarin" />
                            <Span Text="&#x0a;" />
                            <Span Text="Forms" />
                        </FormattedString>
                    </Label.FormattedText>
                </Label>
            </Grid>
            <Grid Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.5*" />
                    <ColumnDefinition Width="0.5*" />
                </Grid.ColumnDefinitions>
                <Label VerticalOptions="Start"
                       Margin="10">
                    <Label.FormattedText>
                        <FormattedString>
                            <Span Text="Use"
                                  Style="{StaticResource MediumLabelStyle}" />
                            <Span Text="&#x0a;" />
                            <Span Text="Framwork for android,iOS and windows app"
                                  Style="{StaticResource SmallLabelStyle}" />
                        </FormattedString>
                    </Label.FormattedText>
                </Label>
                <Label Grid.Column="1"
                       VerticalOptions="Start"
                       Margin="10">
                    <Label.FormattedText>
                        <FormattedString>
                            <Span Text="Owner"
                                  Style="{StaticResource MediumLabelStyle}" />
                            <Span Text="&#x0a;" />
                            <Span Text="Microsoft"
                                  Style="{StaticResource SmallLabelStyle}" />
                        </FormattedString>
                    </Label.FormattedText>
                </Label>
            </Grid>
           
        </Grid>
    </ScrollView>
</ContentPage>

</xmp>

Cs file
 

public partial class UserDetailsPage : ContentPage
    {
        public UserDetailsPage()
        {
            InitializeComponent();
        }

        async void OnThemeToolbarClicked(object sender, EventArgs e)
        {
            await Navigation.PushModalAsync(new NavigationPage(new ThemeSelectionPage()));
        }
    }

theme4

Image: Detail page (Light Mode)
 

theme5

Image: Detail page (Dark Mode)
 

Conclusion

In this blog we have learned about what is themes in Xamarin forms and how we can apply to the application. Using ResourceDictionary and Styles we can create and apply themes. We have seen an example in which we have change the theme from light to dark mode dynamically. We have created two ResourceDictionary for both modes and set Light mode as default in app.xaml file.

Themes-for-Xamarin

Predefined and used all over the application is called Application theme. In various popular apps like YouTube, Skype, WhatsApp, Instagram, etc. is providing themes like Light, dark mode to the user. We can change the color of the application using themes by a predefined set of a color scheme like dark, light, or any other color.

We can create a theme using Resources, ResourceDictionary, and Styles in Xamarin Forms. Resources are commonly shared values in the application. It is responsible for the reusability of values that highly scale. It reduces the hard code values in the application, so when we have to change the theme we have to change only a defined set of resources only. We do not have to change all the values.

ResourceDictionary is a group of resources. Resources are stored in ResourceDictionary. In a single ResourceDictionary, we can add multiple resources. We will find ResourceDictionary in App.XAML file.

Styles means assigning various properties to the UI Control for a better look and feel. We can use these defined styles all over the application to give the same look to the application. We do not have to write code on every page for the same control to give the same look in the app we can define a style for that control and bind the style where ever it is needed. Styles are defined in the app. XAML file. Each style has a unique key and target type.

We can define style in App.xaml file in the following way and display in the Xaml page inside the control.
 

<style targettype="Button" type="text/css" x:key="ButtonStyle"><Setter Property="BackgroundColor"
                    Value="Gray" />
            <Setter Property="TextColor"
                    Value="Black" />
            <Setter Property="HeightRequest"
                    Value="45" />
            <Setter Property="WidthRequest"
                    Value="190" />
            <Setter Property="CornerRadius"
                    Value="18" /></style><style targettype="Label" type="text/css" x:key="LabelStyle1"><Setter Property="TextColor"
                    Value="Blue" />
            <Setter Property="FontSize"
                    Value="30" /></style><style targettype="Label" type="text/css" x:key="LabelStyle2"><Setter Property="TextColor"
                    Value="Grey" />
            <Setter Property="FontSize"
                    Value="25" /></style><style targettype="Label" type="text/css" x:key="LabelStyle3"><Setter Property="TextColor"
                    Value="Green" />
            <Setter Property="FontSize"
                    Value="15" /></style>      

Applying style to Label

Let's see the example of applying a theme.

We will be going to create a simple application in which we will apply Light and Dark mode to the application. By default, we will set the theme as Light.

First, we will create a theme using ResourceDictionary and then set a default theme using ResourceDictionary in App.Xaml file.

Code for Light Mode
 


<resourcedictionary x:class="ThemingDemo.LightTheme" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <color x:key="PageBackgroundColor"> White </color>
    <color x:key="NavigationBarColor"> WhiteSmoke </color>
    <color x:key="PrimaryColor"> WhiteSmoke </color>
    <color x:key="SecondaryColor"> Black </color>
    <color x:key="PrimaryTextColor"> blue </color>
    <color x:key="SecondaryTextColor"> White </color>
    <color x:key="TertiaryTextColor"> Gray </color>
    <color x:key="TransparentColor"> Transparent </color>

</resourcedictionary>

CS file

public partial class LightTheme : ResourceDictionary
    {
        public LightTheme()
        {
            InitializeComponent();
        }
    }
   

Code for Dark Mode
 


<resourcedictionary x:class="ThemingDemo.DarkTheme" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <color x:key="PageBackgroundColor"> Black </color>
    <color x:key="NavigationBarColor"> Gray </color>
    <color x:key="PrimaryColor"> Skyblue </color>
     <color x:key="SecondaryColor"> White </color>
    <color x:key="PrimaryTextColor"> White </color>
    <color x:key="SecondaryTextColor"> White </color>
    <color x:key="TertiaryTextColor"> WhiteSmoke </color>
    <color x:key="TransparentColor"> Transparent </color>

</resourcedictionary>

CS File
 

 public partial class DarkTheme : ResourceDictionary
    {
        public DarkTheme()
        {
            InitializeComponent();
        }
    }

Now, we will set Light mode as default and add style for UI control we are going to use in our application.
 


<application.resources>
        <resourcedictionary source="Themes/LightTheme.xaml" /><style targettype="NavigationPage" type="text/css"><Setter Property="BarBackgroundColor"
                    Value="{DynamicResource NavigationBarColor}" />
            <Setter Property="BarTextColor"
                    Value="{DynamicResource SecondaryColor}" /></style><style targettype="Button" type="text/css" x:key="ButtonStyle"><Setter Property="BackgroundColor"
                    Value="{DynamicResource PrimaryColor}" />
            <Setter Property="TextColor"
                    Value="{DynamicResource SecondaryColor}" />
            <Setter Property="HeightRequest"
                    Value="45" />
            <Setter Property="WidthRequest"
                    Value="190" />
            <Setter Property="CornerRadius"
                    Value="18" /></style><style targettype="Label" type="text/css" x:key="LargeLabelStyle"><Setter Property="TextColor"
                    Value="{DynamicResource SecondaryTextColor}" />
            <Setter Property="FontSize"
                    Value="30" /></style><style targettype="Label" type="text/css" x:key="MediumLabelStyle"><Setter Property="TextColor"
                    Value="{DynamicResource PrimaryTextColor}" />
            <Setter Property="FontSize"
                    Value="25" /></style><style targettype="Label" type="text/css" x:key="SmallLabelStyle"><Setter Property="TextColor"
                    Value="{DynamicResource TertiaryTextColor}" />
            <Setter Property="FontSize"
                    Value="15" /></style>

</application.resources>

Now, we will create View pages that are one for changing the theme and the other two display detail and summary.

This code is for changing the theme of the app, and the second code is a cs file for a select theme.
 

<xmp>
<StackLayout Margin="20"
                 VerticalOptions="CenterAndExpand">
        <local:EnumPicker ios:Picker.UpdateMode="WhenFinished"
                          EnumType="{x:Type local:Theme}"
                          Title="Select Theme"
                          SelectedIndexChanged="OnPickerSelectionChanged" />
        <Label x:Name="statusLabel"
               HorizontalOptions="Center" />
    </StackLayout>


</xmp>
public partial class ThemeSelectionPage : ContentPage, IModalPage
    {
        public ThemeSelectionPage()
        {
            InitializeComponent();
        }

        void OnPickerSelectionChanged(object sender, EventArgs e)
        {
            Picker picker = sender as Picker;
            Theme theme = (Theme)picker.SelectedItem;

            ICollection<ResourceDictionary> mergedDictionaries = Application.Current.Resources.MergedDictionaries;
            if (mergedDictionaries != null)
            {
                mergedDictionaries.Clear();

                switch (theme)
                {
                    case Theme.Dark:
                        mergedDictionaries.Add(new DarkTheme());
                        break;
                    case Theme.Light:
                    default:
                        mergedDictionaries.Add(new LightTheme());
                        break;
                }
                statusLabel.Text = $"{theme.ToString()} theme loaded. Close this page.";
            }
        }

        public async Task Dismiss()
        {
            await Navigation.PopModalAsync();
        }
    }

theme1

Image: Theme selection page
 

Code for Summary and detail page.
 

<xmp>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ThemingDemo"
             x:Class="ThemingDemo.UserSummaryPage"
             Title=" Summary"
             BackgroundColor="{DynamicResource PageBackgroundColor}">
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Choose Theme"
                     Clicked="OnThemeToolbarItemClicked" />
    </ContentPage.ToolbarItems>
    <ScrollView>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="200" />
                <RowDefinition Height="120" />
                <RowDefinition Height="70" />
            </Grid.RowDefinitions>
            <Grid BackgroundColor="{DynamicResource PrimaryColor}">
                <Label Text="Xamarin Forms"
                       VerticalOptions="Center"
                       Margin="15"
                       Style="{StaticResource MediumLabelStyle}" />
                <Frame Margin="10"
                       CornerRadius="50"
                       HeightRequest="60"
                       WidthRequest="60"
                       IsClippedToBounds="True"
                       HorizontalOptions="End"
                       VerticalOptions="Center">
                    <Image Grid.Column="1" Source="xamarin.png" HeightRequest="100" WidthRequest="100"></Image>
                    
                </Frame>
            </Grid>
            <StackLayout Grid.Row="1"
                         Margin="10">
                <Label Text="Xamarin.Forms is Open source framwork to develope Android, iOS and windows Applications."
                       Style="{StaticResource SmallLabelStyle}" />
                <Label Text="  &#x2022; It provides various UI controls"
                       Style="{StaticResource SmallLabelStyle}" />
                <Label Text="  &#x2022; We can define various layout provided by xamarin.forms."
                       Style="{StaticResource SmallLabelStyle}" />
                
            </StackLayout>
            <Button Grid.Row="2"
                    Text="MORE INFORMATION"
                    Clicked="OnNavigation"
                    HorizontalOptions="Center"
                    VerticalOptions="Center"
                    Style="{StaticResource ButtonStyle}" />
        </Grid>
    </ScrollView>
</ContentPage>

</xmp>

CS file
 

public partial class UserSummaryPage : ContentPage
    {
        public UserSummaryPage()
        {
            InitializeComponent();
        }

        async void OnNavigation(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new UserDetailsPage());
        }

        async void OnThemeToolbarItemClicked(object sender, EventArgs e)
        {
            await Navigation.PushModalAsync(new NavigationPage(new ThemeSelectionPage()));
        }
    }

theme2

Image: Summary page (Light Mode)
 

theme3

Image: Summary (Dark mode)
 

Planning to Hire Xamarin App Development Company ?

Your Search ends here.

 

Code for detail page
 

<xmp>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ThemingDemo"
             x:Class="ThemingDemo.UserDetailsPage"
             Title="Details"
             BackgroundColor="{DynamicResource PageBackgroundColor}">
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Choose Theme"
                     Clicked="OnThemeToolbarClicked" />
    </ContentPage.ToolbarItems>
    <ScrollView>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.6*" />
                <RowDefinition Height="0.1*" />
                <RowDefinition Height="0.1*" />
                <RowDefinition Height="0.2*" />
            </Grid.RowDefinitions>
            <Image Source="xamarin.png"
                    HeightRequest="100" WidthRequest="100"/>
            <Grid BackgroundColor="{DynamicResource TransparentBackgroundColor}">
                <Label VerticalOptions="End"
                       Margin="15"
                       Style="{StaticResource MediumLabelStyle}">
                    <Label.FormattedText>
                        <FormattedString>
                            <Span Text="Xamarin" />
                            <Span Text="&#x0a;" />
                            <Span Text="Forms" />
                        </FormattedString>
                    </Label.FormattedText>
                </Label>
            </Grid>
            <Grid Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.5*" />
                    <ColumnDefinition Width="0.5*" />
                </Grid.ColumnDefinitions>
                <Label VerticalOptions="Start"
                       Margin="10">
                    <Label.FormattedText>
                        <FormattedString>
                            <Span Text="Use"
                                  Style="{StaticResource MediumLabelStyle}" />
                            <Span Text="&#x0a;" />
                            <Span Text="Framwork for android,iOS and windows app"
                                  Style="{StaticResource SmallLabelStyle}" />
                        </FormattedString>
                    </Label.FormattedText>
                </Label>
                <Label Grid.Column="1"
                       VerticalOptions="Start"
                       Margin="10">
                    <Label.FormattedText>
                        <FormattedString>
                            <Span Text="Owner"
                                  Style="{StaticResource MediumLabelStyle}" />
                            <Span Text="&#x0a;" />
                            <Span Text="Microsoft"
                                  Style="{StaticResource SmallLabelStyle}" />
                        </FormattedString>
                    </Label.FormattedText>
                </Label>
            </Grid>
           
        </Grid>
    </ScrollView>
</ContentPage>

</xmp>

Cs file
 

public partial class UserDetailsPage : ContentPage
    {
        public UserDetailsPage()
        {
            InitializeComponent();
        }

        async void OnThemeToolbarClicked(object sender, EventArgs e)
        {
            await Navigation.PushModalAsync(new NavigationPage(new ThemeSelectionPage()));
        }
    }

theme4

Image: Detail page (Light Mode)
 

theme5

Image: Detail page (Dark Mode)
 

Conclusion

In this blog we have learned about what is themes in Xamarin forms and how we can apply to the application. Using ResourceDictionary and Styles we can create and apply themes. We have seen an example in which we have change the theme from light to dark mode dynamically. We have created two ResourceDictionary for both modes and set Light mode as default in app.xaml file.