Xamarin Let’s Build - App Themes

The theme of your app is what makes it stand out, fit in with your brand identity and create a lasting impression. With Xamarin.Forms it’s simple to implement multiple themes and styles, and then use them throughout your application.

Defining the theme colours

The most important aspect of styling your application is the colours that you use. When it comes to creating themes for your application, it’s a good idea to keep the colours separate from the rest of the theme. This allows you to make changes to the app colours without worrying about breaking other elements of the visual style as well as making generating new colour schemes for your app easier, as you won’t have to worry about copying the whole theme everytime you want to create a set of colours.

Below is an example of a minimal set of colours for a light theme in Xamarin.Forms.

<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                    x:Class="XamarinFormsDarkTheme.Styles.LightTheme">
    <Color x:Key="NavigationPrimary">#2196F3</Color>
    <Color x:Key="BackgroundColor">#FFFFFF</Color>
    <Color x:Key="TextPrimaryColor">#B00000</Color>
    <Color x:Key="TextSecondaryColor">#800000</Color>
    <Color x:Key="TextTernaryColor">#C8C8C8</Color>
</ResourceDictionary>

Creating the app theme

Now that we have the colours defined, we can use them to make our app pop. Currently, we’re not using any of the colours that we’ve defined in our app. To do this, we need to start building the app theme. Before we start, there are a couple of terms to be aware of when working with styles in Xamarin.Forms.

• Explicit Styles - An explicit style is used for when you want to target a XAML element by using a key. These will have a x:Key defined.
• Implicit Styles - An implicit style will apply to all XAML elements of the targetted type.

If you want more information regarding any of these terms, Microsoft’s documentation explains explicit and implicit styles in more detail.

To start with, we need to import the colours that we defined earlier. This is achieved by adding a ResourceDictionary to the Application.Resources that references our colours. From there we can begin to build up the styles that we want to use throughout our application. I would recommend if you’re planning on adding theme switching of any kind (user selectable, or based on the device theme) to make sure that you reference the colours as a DyanmicResource. This will allow you to update the resource dynamically, which is not achievable with a StaticResource.

Below is an example of an app theme, using one set of colours

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamFormsAppTheme.App">
    <Application.Resources>
        <ResourceDictionary Source="/Themes/LightTheme.xaml"/>
        <Style TargetType="NavigationPage">
            <Setter Property="BarBackgroundColor" Value="{DynamicResource NavigationPrimary}" />
            <Setter Property="BarTextColor" Value="White" />
            <Setter Property="BackgroundColor" Value="{DynamicResource BackgroundColor}" />
        </Style>
        <Style TargetType="Label">
            <Setter Property="TextColor" Value="{DynamicResource TextPrimaryColor}" />
        </Style>
    </Application.Resources>
</Application>

Let’s break the example code from above down further to examine what is happening.

<ResourceDictionary Source="/Themes/LightTheme.xaml"/>

This will import the colours that we defined earlier, and make them available for use throughout your application. It’s merely a pointer to our LightTheme.xaml file and will make the colours that we have set in there available to use.

<Style TargetType="Label">
    <Setter Property="TextColor" Value="{DynamicResource TextPrimaryColor}" />
</Style>

This is an implicit style, that will target all XAML elements with a type of Label. We’re using the TextPrimaryColor that we previously declared in LightTheme.xaml and we’re setting the TextColor to be that, in our example this will make all of the text contained in a Label use the colour grey. Any property that you can alter on a XAML element can be overridden in this part.

Resources

If you want to read more about app themes, for example implementing dark mode, you can find more information in my other posts

• Automatic Dark Mode
• Supporting Dark Mode with Xamarin.Forms

You can find a link to the GitHub repo with the code for this post here