none
Change application bar icon on theme changing

    Question

  • Hello,
    I have an application with two image named "down.png" under the following paths "Images/dark" and "Images/light", because I want manage the theme changing (dark and light) on application bar icons.
    I have the following code :

    1 this.btnDown = this.ApplicationBar.Buttons[2] as ApplicationBarIconButton;  
    2  
    3             if (ThemeDetector.IsDarkTheme)  
    4             {  
    5                 this.btnDown.IconUri = new Uri("/Images/dark/down.png", UriKind.Relative);  
    6                 this.PageTitle.Text = "Dark Theme";  
    7             }  
    8             else 
    9             {  
    10                 this.btnDown.IconUri = new Uri("/Images/light/down.png", UriKind.Relative);  
    11                 this.PageTitle.Text = "Light Theme";  
    12             } 

    where ThemeDetector.IsDarkTheme is the following

    1 SolidColorBrush backgroundBrush = Application.Current.Resources["PhoneBackgroundBrush"as SolidColorBrush;  
    2  
    3 return (backgroundBrush.Color == Colors.Black); 

    All this works fine with Dark theme but If I change to Light theme, on application bar I see a black rectangle and not my "down.png" in light version.
    Why ?

    Thanks, Paolo.
    Friday, June 17, 2011 3:25 PM

Answers

  • Another question. I have seen that with personal icons it needs to change the icon programmatically but with system icons (in the path Program Files\Microsoft SDKs\Windows Phone\v7.0\Icons) the operating system changes automatically the icons.
    Hi Paolo,

    You only need one icon if you use an icon that has white foreground and transparent background. The system will use the icon directly for dark theme and automatically invert all white pixels to black for light theme.

    You can also achieve greyscale (notice that the system icons have smooth dithered edges) by setting the pixel color all white but varying the alpha (transparency) channel. Photoshop and other editors will do this for you if you set the background to transparent and draw items with white color, with dithering turned on.
    Friday, June 17, 2011 5:37 PM

All replies

  • Are you sure you didn't forget to set the "compile action" in the file properties in the solution explorer ? You probably forgot it on the "Images/light/down.jpg" file.
    Friday, June 17, 2011 3:36 PM
  • I have found the problem. I have created the icon image with white background but now creating it with transparent background, all works fine.
    Another question. I have seen that with personal icons it needs to change the icon programmatically but with system icons (in the path Program Files\Microsoft SDKs\Windows Phone\v7.0\Icons) the operating system changes automatically the icons.

    Paolo.
    Friday, June 17, 2011 3:37 PM
  • Another question. I have seen that with personal icons it needs to change the icon programmatically but with system icons (in the path Program Files\Microsoft SDKs\Windows Phone\v7.0\Icons) the operating system changes automatically the icons.
    Hi Paolo,

    You only need one icon if you use an icon that has white foreground and transparent background. The system will use the icon directly for dark theme and automatically invert all white pixels to black for light theme.

    You can also achieve greyscale (notice that the system icons have smooth dithered edges) by setting the pixel color all white but varying the alpha (transparency) channel. Photoshop and other editors will do this for you if you set the background to transparent and draw items with white color, with dithering turned on.
    Friday, June 17, 2011 5:37 PM
  • It's great !

    Thank you !
    Paolo.
    Friday, June 17, 2011 5:51 PM
  • FYI in case you are placing icons outside the app bar and want to avoid having to create and deploy two icons

     

    <Rectangle Fill="{StaticResource PhoneForegroundBrush}">    
        <Rectangle.OpacityMask>    
            <ImageBrush ImageSource="/Images/Dark/app.feature.settings.rest.png" />    
        </Rectangle.OpacityMask>    
    </Rectangle>    
     

     

    Saturday, June 18, 2011 8:02 PM