Using the Accent Color - Page 1
       by kirupa  |  27 July 2010

With the Windows Phone, users have the ability to easily change what theme most of their native phone applications are running in:

[ the UI on the Windows Phone for changing the accent color ]

The concept of a theme is a scandalous combination (a dalliance…if you will) of two pieces – background and accent color. I’m going to table discussion of background in this article and focus primarily on the accent color instead.

The accent color defines the color your various controls and other parts of your UI such as the very prominent home screen will display in. While most of the native applications that come standard on the Windows Phone will gracefully adjust to deal with the accent color set, applications you create by default will not.

When it comes to accent color, your applications will need to be explicitly designed to take advantage of them. The following video shows an example of a very simple application whose colors change depending on what accent color is set on the phone:

[ this video shows how changing the theme changes the UI in m application ]

In this short article, I will briefly describe how you can customize your application using Expression Blend so that the accent color is reflected in your UI. Let’s get started!

Applying Accent Color
You are probably quite familiar with the Brushes panel – it is THE place for applying colors and color/brush resources:

[ let's all welcome our Brushes panel overlords ]

Your accent color is something that is defined as a resource. To access it, click on the Color resources tab:

[ click on the Color resources tab ]

You will see a list of color resources that you can select and apply for any brush that requires a color:

[ you will see a list of color resources that you can use ]

The resource that we are interested in is called PhoneAccentColor. When you select it, notice that whatever brush you had selected (in my case, Background) will now have the color value from PhoneAccentColor set instead:

[ the PhoneAccentColor is the resource that stores the accent color ]

When you apply this color via a resource, just for Windows Phone projects, you will not be able to edit the values or manipulate them in any way.

Onwards to the next page!

1 | 2