Theme Design Decisions for Windows Phone
March 22, 2012
A theme is a user-selected combination of background and accent colors that personalizes the visual elements on a Windows Phone. Only colors are part of a theme; other elements, such as fonts or control sizing, do not change.
There are two background colors, dark or light, and 10 accent colors.
As a part of the Windows Phone Application Platform, applications automatically take on the selected theme and ensure that system controls and UI elements appear consistently across the platform to prevent a jarring, unsettled user experience.
You can override the theme within an application if you want to set your own theme. A custom theme can establish quality, originality, or familiarity in a branded app. Decide ahead of time how much of your app’s visual design will be customized, and plan those elements accordingly. Developers can provide their own resources and override any themed properties, but cannot turn off themes.
A theme is a set of resources used to personalize the visual elements on a Windows Phone. Theme elements can be set by the user in the Settings menu under Theme.
With theme resources in the Windows Phone SDK, you can create applications that preserve the look and feel of the native UI. Theme properties are directly accessible in your code, meaning that you can explicitly change the value of any themed property to match your own branding or color scheme.
Backgrounds
Backgrounds appear behind the functional elements of your application. Consider this an opportunity to display branding or other custom art to set the tone for your app. Backgrounds can also be dynamic, presenting new or changing information or images at specific intervals. Panoramas for example can contain a background image that spans all of its panels. An Application Tile can have its background image updated at any time using the Microsoft Push Notification Service or a Tile Schedule.
Supported Accent Colors
Windows Phone allows users to choose from among 10 accent colors. The default theme is a dark background with the blue accent color, but mobile operators or phone manufactures may override this setting as well.
-
Magenta (FF0097)
-
Purple (A200FF)
-
Teal (00ABA9)
-
Lime (8CBF26)
-
Brown (996600)
-
Pink (FF0097)
-
Orange (F09609)
-
Blue (1BA1E2)
-
Red (E51400)
-
Green (339933)
Tip:
|
|---|
|
Some devices may come preinstalled with an eleventh accent color, specified by the carrier. |
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; an eleventh color may break the operation.
Themes and Accents
Images on Windows Phone are 16-bit. Windows Phone Emulator, which is included with the Windows Phone SDK, supports a 24-bit color palette. This means that some images optimized in the emulator may appear to have low quality on the device. Export images to a 16-bit color space.
Common Color Mistakes
Be sure your highlight color is still visible when the user puts the system in Light theme mode. Test your accent colors in both Light and Dark themes. Since users can choose between 20 themes (22 if the mobile operator or phone manufacturer adds an accent color), developers should consider the possible color combinations if they add colored elements to their UI. Developers may want to consult with graphic designers for color combination assistance.
Important Note:
|
|---|
|
Windows Phone ships with two system themes, Light and Dark. We encourage you to use secondary accent themes in your apps. However, keep in mind that user-set system theming flows down automatically into all controls available in the Windows Phone SDK, which may cause parts of your visual design to disappear into the background. |
When a user modifies the system theme on a phone, only the theme’s colors change. Other elements such as fonts or control sizing will not change dynamically.
However, you can use other Windows Phone theme resources to change properties such as fonts and font sizes. For more information about these resources, see Theme Resources for Windows Phone.
When creating custom theme elements, design them to suit the Silverlight Frames and Pages model of navigation, a major UI paradigm in Windows Phone. With Frames and Pages, users can navigate forward through different pages (or screens) of content via links and backward using the hardware Back button. For more information about frames, pages, and screens, see Navigation, Orientation, and Gestures for Windows Phone.
Choose a Basic Color Scheme
Consider how you can integrate color to affect branding discreetly. Windows Phone makes use of discreet, high-contrast color combinations for clarity and visibility. Use loud colors sparingly, and if you can’t decide on a color, default to neutral or monochromatic tones.
User-selected, system-wide themes cannot be modified; only themes within applications can be modified.
Generally speaking, your app should respect the user’s selected theme and accent color choices. However, if toggling between these themes and colors would interrupt your app’s specific branding or color palette, you can lock your app to only one theme (that is, Light or Dark). This disassociates the color from the system-wide color settings.
If you want to have total control of the colors and backgrounds in your app, your app can opt out of system theming, giving you total control of the user experience and making your colors prevalent inside your app, regardless of the user’s selected theme and accent color.
For more information about the different Windows Phone theme resources and how to configure them in your application, see How to: Apply Theme Resources for Windows Phone.
