How does exactly work themes switching in application? What if I override the default styles? Can I also define different styles for light and dark themes separately? Why the icons colos get changed - i.e. the black background of icons changes into white if the theme is set to Dark. Will it also be changed to white if I override the background style of application bar to white explicitly? How can I make sure nothing gets changed and my app looks the same in Light and Dark themes?
Have you seen these?
Theme Overview for Windows Phone
http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff402557(v=vs.105).aspx
Theme Resources for Windows Phone
http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff769552(v=vs.105).aspx
How to: Apply Theme Resources for Windows Phone
http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff769545(v=vs.105).aspx
I personally use PhoneThemeManager from Jeff Wilcox for theme overriding works!
Of course, it is better to have the same UX across all the Windows Phone application when it comes to light/dark theme support, but I agree that sometimes it is really needed to override the theme.
You can probably find more information in this thread: How to override WindowsPhone dark theme by light
and also previously I was using this tutorial to customize light and dark themes:
http://blog.richardszalay.com/2011/06/11/practical-support-for-light-dark-themes-on-windows-phone-7/
Related
I'm developing a Windows 8.1 application. I use the "light" UI theme including in my HTMLs page a reference to the official Microsoft's CSS stylesheet "ui-light.css".
Everything works fine, except the background color of file pickers controls, which remains dark instead of light.
How can I set it to light ?
Thanks in advance
I'm afraid it's out of app control to define background color for system file pickers.
You can check official Twitter and SkyDrive apps, both display default dark background color for file pickers despite of different (lighter) app themes.
I think this is a very common problem, but I cannot find a suitable solution for me. As you all know, WP supports a dark and a light theme. The user can change the theme and there are ways to override his decision and to display everything in the color theme you've selected. However, I'm just trying to react to this two theme types and I want to display icons in the correct color.
If you use the Application Bar, you can select from many built in icons, which will be automatically inverted from light to dark and vice versa.
Why isn't there any support for normal images? For example: I want to display a telephone icon. I've picked one from the built in icons and copied it from the Microsoft SDK folder to the Image folder of my project. If the user uses the dark theme, everything will be fine because the white telephone icon will be visible on the black background. But if he switches to the light theme, the icon will be invisible because it is white on white.
I'm fully aware of the style resources for textboxes or background colors, which use the phone's accent or theme color. But why is it, that there is no support for simple icons which I added as Image to my XAML page?
Of course I could detect in the constructor of the page if the user is in dark or light mode. I would then load either a black or white version of the telephone icon. But this check will be done everytime I visit the page and slows everything down. It's also annoying to manually add the check for the theme each time I'm adding a theme aware image.
Is there any solution, which will work with XAML only? Or is at least easy to maintain? And why can't I use the built in images from the SDK right from the beginning? They are already available in dark and light versions and are already used in the application bar.
If you want the icon to function like in the actionbar, just be white (if dark theme) and black (if light theme) then you can add the image as an opacity mask to a rectangle, like this:
<Rectangle Fill="{StaticResource PhoneForegroundBrush}" Width="48" Height="48" >
<Rectangle.OpacityMask>
<ImageBrush ImageSource="/Images/my.icon.png" />
</Rectangle.OpacityMask>
</Rectangle>
Where my.icon.png is a white image, like those you can choose for the actionbar.
You could use vector graphics instead of bitmap icons and use a theme-aware brush to draw them.
If you want the App to respond to a switch of the theme you'll need to respond to it any way.
I added a property to the base class of my Views that returns the selected theme. That way I can use/bind to that value.
It is also possible to use a ValueConverter that turns a logical name of a resource into a name of a theme specific resource.
Edit
Have a look at this: Custom light/dark theme resources on Windows Phone 7
Detect the theme (Supporting dark and light themes gives the best solution for this, I think), and then set the image accordingly. If you do this a lot, a custom control where you can supply two image sources and the correct one gets used would be easy enough to create.
Edit: Here's another good article on this topic. New Screen Resolutions
You pick a White Foregrounded icon use it. It suits for both Light and Dark themes. Thats what I have been doing.
The Coding 4 Fun control toolkit includes a round button that mimics the application bar buttons, including updating the foreground color depending on the theme. The code is open source, so perhaps you might find an answer in there. Or, as a hack, you could use the RoundButton control, turn off the border, and not provide a Click event.
I developed one Windows Phone 7 application.
After installed the app to my mobile device (in emulator too) I'm experiencing the theme problem.
Means there are two themes in windows phone, LITE and DARK.
When I set my theme to dark and execute my app , it looks OK,
but if I change the theme to LITE everything is reverted.
It means white lables become black, and black background become white.
So I need a solution to my app, so that the user can set any theme, but it doesn't effect the appearrence of application.
Don't hardcode colours, brushes, etc, but instead use {StaticResource ResourceName} and use resources from Theme Resources for Windows Phone
Make sure that every TextBlock and TextBox has a Style associated with it (available values from the same link)
If you have have custom resources (colours, images, etc) that you wish to be theme-aware you are free to use the ThemeResourceDictionary I posted on my blog (and also for this SO question). I promise to commit the code to GitHub one of these days and also create a NuGet package.
Is it possible to set the default color of an application?
The problem is I have custom backgrounds in my app. If I have the white theme selected it looks nice. When I select the dark theme I cannot read it.
Is there a way to set it for the whole application e.g. that it should be white, whatever the phone default theme is?
Just define your own color resources and use them on your elements where necessary. Here is an example how to do this. Defining one "default color" for the whole application is not possible as far as I know. It would be a rather obscure setting. Maybe property value inheritance comes close to what you mean.
By the way: please don't design overly bright applications which ignore my dark theme. It hurts my eyes.
In my Windows Phone 7 app, I want to use the light theme, no matter what theme the user sets in the phone. How to do that ?
Do I need to custom the style or theme ? I just want the default light theme.
Thanks
Jeff Wilcox offers a good way to do this using a theme manager he developed.
http://www.jeff.wilcox.name/2012/01/phonethememanager/
There is a nice way of replacing the default brushes. Saves you setting Forecolor everywhere.
http://www.designersilverlight.com/2011/01/17/theme-forcing-for-windows-phone-7-silverlight/
You'll still need to set the background of the main layout node to the default background brush.
Background="{StaticResource PhoneBackgroundBrush}"
There is no way to force an app to use a specific theme.
The best you can do is create your own style for every control you use and mimic the light theme in your styles.
Beware, this can be a time consuming and tedious task. Be sure to test all pages and all controls in all states when both the light and dark themes have been specified by the user.
I've had to do this (but for the dark theme) and it's not something I'd do again out of choice.
There are a few tips on doing this from one of the PDC sessions on optimising performance http://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/10/28/pdc-live-optimizing-performance-for-silverlight-windows-phone-7-applications.aspx
This is a very bad idea.
Windows Phones use OLED displays - the pixels generate light directly, they are not backlit. Power consumption is therefore highest for white pixels. This is why Microsoft is suddenly obsessed with light text on dark backgrounds. It's not a back-to-the-seventies thing.
If you do this you will cause ridiculous power consumption.
For the benefit of the jerk who voted down a factually correct answer, I quote page 63 of the Windows Phone 7 UI Design and Interaction Guide published in July 2010 by Microsoft.
Avoid using too much white in
applications, such as white
backgrounds, as this may have an
impact on battery life for devices
that have organic LED displays.
If you're wondering why Microsoft included a "light background" theme option, so am I.