Creating a Colour Palette for your Xamarin.Forms Application

Learn how to define your design system colours, using Xamarin.Forms resource dictionaries.

Introduction

Central to any design system, is a pre-defined colour palette, the colour palette defines which colours and in what context they should be used.  We are going to get started in this series, by defining our colour pallete.  In this post you'll learn how to define your colour palette in a resource file.

In this series of articles, we are using the Australian Government Design System, as a target for the design system component set that we are going to create.

Colours

For our example, we'll just implement the light theme colours, which are as follows:

Defining Colours in XAML using External Resource Dictionary

For our example we are going to use XAML to define our styles, you can also use CSS as described here.

For my example, I'm going to define my colours in a seperate resource file.  I'm also going to create a new folder to contain all of my XAML files related to styling.

The first thing we need to do is create a new folder in our Xamarin.Forms project called "Styles".  In that folder create a new XAML file called "Colors.xaml".  This is the file we will use to define all of the colours that can be used by our design system component set.

Ensure that the file has the Build action set to "EmbeddedResource".

Once you have created your file, simply define the colours as shown in below example:

<?xml version="1.0" encoding="UTF-8"?>
<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms" 
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <!-- Colours Light Theme -->
    <Color x:Key="ColorForegroundText">#414141</Color>
    <Color x:Key="ColorForegroundAction">#00698F</Color>
    <Color x:Key="ColorForegroundFocus">#9163DE</Color>
    <Color x:Key="ColorForegroundMuted">#636363</Color>
    <Color x:Key="ColorForegroundBorder">#808080</Color>
    <Color x:Key="ColorBackground">#FFFFFF</Color>
    <Color x:Key="ColorBackgroundShade">#F5F5F5</Color>
    <Color x:Key="ColorBackgroundAlt">#EBEBEB</Color>
    <Color x:Key="ColorBackgroundAltShade">#E0E0E0</Color>
</ResourceDictionary>

Referencing an External Dictionary into XAML

Now that we've created our external resource dictionary, we need to reference it into our App.xaml file.

To do this, you can use the source attribute of a Resource element to specify which XAML file that you'd like to reference.

...
<Application.Resources>
        <ResourceDictionary Source="Styles/Colors.xaml"/>
...

You can reference as many external resource dictionaries as you'd like using this syntax.

Summary

In this post we covered the basics of how to define our design systems colour palette in Xamarin.Forms using an external resource dictionary.

For more information on using resource dictionaries in Xamarin.Forms go here: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/resource-dictionaries

For more information on Australian Government Design System colours go here: https://designsystem.gov.au/components/core/

If you want some help implementing a Xamarin.Forms component set for your Design System contact me at Pattern.

This is part of my "Implementing a design system in Xamarin.Forms" series of posts.