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

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

  • Comments 8
  • Likes

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.

8 Comments
You must be logged in to comment. Sign in or Join Now
  • It's a shame this post fell short of describing how to make the appbar icons automatically respect the theme.

  • How can I opt out of system-wide theme? Especially, there is no way to control app bar icon colors. I can manually change other elements' colors with style or template, but not for appbar..

  • Ashura
    1 Posts

    Great blog, and verty intreresting article !

    But I still wonder, what about icons ? When we use some white/black icons, how can we dynamically change our icons (dark/light application bar icons for example) ? Do you know a best practise ?

    Thanks a lot !

  • Is it possible to switch the theme of the emulator? If it is, how can it be done?

  • Sorry i think i should further eleborate it..

    How can i lock theme for my application if i can? and how to lock color with theme as you said above?

    Regards.

  • Nice series of articles... it was really helpful.

    I have question here. How can i lock theme for my application? please provide some pointers on it..

    Regards.

  • Unfortunately the WP7 team forgot to apply theming to the built-in email apps. They always have a white background, which is quite irritating.

  • The linked MSDN resources do not describe how to "opt out" of system-wide color settings.