Skip to main content
November 19, 2010
Windows Phone Developer Blog

3 of 10 – Managing themes on WP7. Or how to build your application to respect system color changes.



Third of our 10 list of things to do great when designing WP7 apps covers issues related to system colors and how the user selected themes affect your app. The WP7 platform ships with two themes—light and dark. Both themes share 10 accent colors, which the user can choose. Accent colors are displayed on Start tiles and many other visual elements within the user interface. We encourage the use of accent colors in your apps when text or other items should be highlighted.
The provided accent colors are designed to work well with both light and dark themes—there is little room for using anything else. Finding a color for text to be legible over black and white is not an easy task.

Dark and light theme testing
A common issue we are seeing when reviewing apps is when we switch themes. By default the emulator displays the dark theme, so it’s easy to bypass theme switching during the testing phase. Failure to test theme switching will result in elements melding or disappearing within the background.  Many elements in the UI support system-wide theming, however, some do not, specifically custom built controls. Testing your app in both themes will ensure all elements are visible, light or dark.

theme_color_change_lg

Use color consistently
WP7 relies heavily on how typography and elements are distributed to create visual hierarchy, allowing a proper way to navigate. Using color properly within your app is essential to guide a user along the right path. Use accent colors to identify links or highlight content—avoid random treatment based solely on decorative purposes. Instead, develop a language where color and typography identify tasks that can be repeated by the user consistently.

accent_color_lg

Locking your colors
Though we’d rather respect a user’s color theme choice, there are cases where utilizing a brand or service color palette is important to achieve the right experience. In that case, you can lock a color to the light or dark theme, disassociating it from system-wide color settings. . Opting out of system theming results in total control of the layout and experience—removing any surprises from the equation. You can go here to learn more on theme resources.