Jerry Nixon on Windows: Mango Sample: Resources Part 2: Colors

Monday, December 19, 2011

Mango Sample: Resources Part 2: Colors

image_thumb[11]

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.

THEME_Accents_Blue blue
27,161,226
THEME_Accents_Pink pink
230,113,184
THEME_Accents_Brown brown
160,80,0
THEME_Accents_Purple

purple
162,0,255

THEME_Accents_Green green
51,153,51
THEME_Accents_Red

red
229,20,0

THEME_Accents_Lime lime
162,193,57
THEME_Accents_Viridian

teal (viridian)
0,171,169

THEME_Accents_Magenta magenta
216,0,115
THEME_Accents_Orange 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:

image_thumb[8]

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:

image_thumb[7]

Specifically, Light theme colors are:

image_thumb[6]

Here’s how to use them

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

Like this:

image_thumb[2]

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