Mango Sample: Resources Part 2: Colors

This is part 2 in the Resource series.

1. Part 1: Themes
2. Part 2: Colors
3. Part 3: Sizes
4. Part 4: Styles

What Accent Colors are there?

Windows Phone supports 10 standard accent colors. The user selects the accent color per their preferences. Your application can read this color, but not influence it in any way. In fact, your application cannot (at least right now) impact the value of any phone setting.

 

Note: There is also an eleventh accent color that the mobile operator or hardware manufacturer can add to the phone. Your application should be aware of this extra color and not make assumptions on just the 10 system-wide colors. For example, do not have code that checks for the standard 10 accent colors and then performs a specific operation. If an eleventh color is present, it can break your code.

	blue 27,161,226		pink 230,113,184
	brown 160,80,0		purple 162,0,255
	green 51,153,51		red 229,20,0
	lime 162,193,57		teal (viridian) 0,171,169
	magenta 216,0,115		mango (orange) 240,150,9

Determine the Accent Color

If might be important for you to know what the current accent color is. Here’s a nice snippet to help you do just that:

Next: What Color Resources are there?

 

What Color Resources are there?

the Windows Phone SDK conveniently gives you the raw XAML of each theme’s resource. Find them here:

64-bit Operating Systems: C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Design
32-bit Operating Systems: C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Design

Note: The most important part of these XAML files is that you can include them in your Windows Phone application for to emulate a specific theme – without requiring the phone to have that theme selected. They can also be a nice starting point to create a fully custom theme for your application.

The base colors are:

PhoneForegroundColor Default foreground and border color PhoneBackgroundColor Default background for pages PhoneDisabledColor Disabled foreground color PhoneAccentColor Foreground color to single-out items of interest

PhoneContrastBackgroundColor Background for contrasting elements PhoneContrastForegroundColor Foreground for contrasting elements PhoneSubtleColor Subtle foreground and border PhoneSemitransparentColor Partially transparent color used to provide contrast against image backgrounds

Specifically, Dark theme colors are:

Specifically, Light theme colors are:

Here’s how to use them

You reference System Resources like normal Static Resources you might add on your own.

Like this:

About Brushes

Please note that some properties require a color. While some properties require a brush. The system brushes are solid color implementations of the system colors. Using a brush or a color should render the same result – just match the expected data type of the property.

Next: Part 3 – Sizes