Themes for Windows Phone
[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]
This topic introduces themes on Windows Phone and how they are implemented.
This topic contains the following sections.
Overview
A theme is a set of resources a developer uses to personalize visual elements on a Windows Phone. A theme ensures that controls and UI elements are consistent on all phones. You can create apps that preserve the look and feel of the built-in device UI from a stylistic standpoint. The style properties set by a theme include background color and accent colors.
With themes you can:
Build apps and access theme properties directly in code.
Explicitly change the value of any themed property to match the app’s branding requirements.
Note
Windows Phone themes are unrelated to themes in Windows Presentation Foundation (WPF). Windows Phone themes are device themes and not themes for individual apps.
An advantage of using themes on a Windows Phone is that it drives consistency and compatibility. You can use the default control set without adjusting common properties such as colors because these styles will be adjusted as needed at run time. When an app is run on a Windows Phone, the theming system modifies the visuals of the app accordingly. However, you can also override the theme at the app level. For example, a company that is building an app with a strong brand may want to use a specific color consistently. You can provide your own resources and override any themed properties. However, you can’t turn off theming.
.gif "Important note") Important Note: |
|---|
When developing your app, it’s important to consider Windows Phone Store technical certification requirements. For requirements related to themes, see section 5.5 in Technical certification requirements for Windows Phone. |
Supported themes
A Windows Phone theme is a combination of a background color and an accent color.
The background color is the color of the background. You have two options for background color in your app: Dark and Light.
The accent color is the color that is applied to controls and other visual elements. The following table lists the accent colors and their corresponding color values in red, green, blue (RGB) and hexadecimal (Hex).
The Windows Phone 8 themes are also available on Windows Phone 7.8 devices.
.png)
There is also an additional accent color that the mobile operator or hardware manufacturer can add to the phone.
Setting a new theme
To set a theme, in the phone App list the user taps Settings, and then taps Theme. When a user selects a theme for the phone, the changes are applied throughout the phone UI, and in all apps. In your app, only theme-related colors will change if the phone user selects a different them. Other elements such as fonts or control sizing won’t change dynamically in response to changes in theme. However, you can use other Windows Phone theme resources to change properties such as fonts and font sizes.
Note
If your app isn’t running when the user selects a different theme for their phone, your app will reflect the elements of the new theme the next time the app starts.
The following image illustrates an app UI with different themes applied.
.png)
This image demonstrates a single app with a background that switches between the Dark and Light options. The app also uses accent colors of Brown, Blue (Cyan), and Purple (Violet) from left to right.
Theme resource files
Depending on the accent and background color chosen by the user of the phone, theme resources display different control colors, brushes, and styles. These differences are specified in the theme resource file, ThemeResources.xaml. Each combination of accent and background is stored in a separate resource file. For a list of the resources you can use to create your themes, see Theme resources for Windows Phone.
Theme resource files are located in the following path:
C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Design
Implementation
For your app, theming is implemented using resources and resource dictionaries. These resources are loaded and applied when the app starts. You can specify theme resources in the Visual Studio Designer by setting control properties, or in XAML by using the {StaticResource} markup extension. The latter provides a value for any XAML property attribute by evaluating a reference to a resource that is already defined. For more info about Windows Phone theme resources and how to configure them in your app, see the following topics: