Theme design decisions for Windows Phone
[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]
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, don’t change.
There are two background colors, dark or light, and several accent colors to choose from.
Windows Phone apps automatically take on the selected theme and ensure that system controls and UI elements appear consistently across the platform to prevent a jarring, unsettling user experience.
You can override the theme within an app 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. You can provide your own resources and override any themed properties, but you can’t turn off themes.
This topic contains the following sections.
- How themes work
- Color scheme
- Create theme elements
- Implementation
- Related Topics
How themes work
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 apps 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 app. 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 app 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 a variety of 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.
.png)
Tip
Some devices may come preinstalled with an additional accent color, specified by the carrier.
Your app should be aware of this extra color and not make assumptions on just the system-wide colors seen in the table above. For example, don’t have code that checks for the standard accent colors and then performs a specific operation; an additional color may break the operation.
.png)
Themes and accents
Color scheme
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 several themes, you should consider the possible color combinations if you add colored elements to your UI. You may want to consult a graphic designer for color combination assistance.
.gif "Important note") 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 won’t change dynamically.
However, you can use other Windows Phone theme resources to change properties such as fonts and font sizes. For more info about these resources, see Theme resources for Windows Phone.
Create theme elements
When you create custom theme elements, design them to suit the 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 using links and backward using the hardware Back button. For more info 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.
Implementation
User-selected, system-wide themes can’t be modified; only themes within apps 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 (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 info about the different Windows Phone theme resources and how to configure them in your app, see How to apply theme resources for Windows Phone.