In this article we are going to see how to apply theme resources for a Windows Phone application, A theme is basically a set of resources that are used to personalize the visual elements of a Windows Phone device, with this theme option ensures that the controls and UI elements will appear consistently across the applications which gives a rich and good user experience. Theme can be enabled in the settings page of the Windows Phone device, which is related to the colors that are available to be selected along with a pattern to select Dark or Light version. But its limited to customize the Fonts and Sizing of the elements with the Windows Phone device. In Windows Phone 7 devices we have a limited set of the color combinations but with the release of Windows Phone 8 we have a large set of colors available as shown in the table below.     [more]

As per MSDN, Windows Phone theme is 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).

Let us see how we can apply the theme resources and lets also see how to determine the theme setting programmatically and look out how can use it to get better usability. Open Visual Studio 2012 IDE and create a new Windows Phone project with a valid project name as shown in the screen below. Once the project is created add some controls which are used to determine the theme resources changes as shown in the screen below.

Now add a button to check if the theme color is changed programmatically, once the button is added just go to the button click event and write the code which checks for the theme resources as shown in the code below.

Code:

<StackPanel x:Name=”TitlePanel” Grid.Row=”0″ Margin=”12,17,0,28″>
           <TextBlock x:Name=”ApplicationTitle” Text=”F5debug How to Series” Style=”{StaticResource PhoneTextNormalStyle}”/>
           <TextBlock x:Name=”PageTitle” Text=”Theme Resource” Margin=”9,-7,0,0″ Style=”{StaticResource PhoneTextTitle1Style}”/>
       </StackPanel>

       <!–ContentPanel – place additional content here–>
       <Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,0,12,0″>
           <Button Content=”Check Which Theme Activated” Height=”72″ HorizontalAlignment=”Left” Margin=”9,6,0,0″ Name=”button1″ VerticalAlignment=”Top” Width=”441″ />
           <TextBlock Height=”277″ HorizontalAlignment=”Left” TextWrapping=”Wrap” Margin=”29,108,0,0″ Name=”textBlock1″ Text=”” VerticalAlignment=”Top” Width=”407″ />
       </Grid>

Now in the button click event write the below code, which basically checks the current theme background from the application resource settings as shown in the code below.

Code:

private void button1_Click(object sender, RoutedEventArgs e)
        {
            Visibility darkBackgroundVisibility = (Visibility)Application.Current.Resources[“PhoneDarkThemeVisibility”];

            if (darkBackgroundVisibility == Visibility.Visible)
            {
                textBlock1.Text = “background = dark”;
            }
            else
            {
                textBlock1.Text = “background = light”;
            }
        }

Now we are done with our code, just run the application by pressing F5 directly from the keyboard or we can use the Build and execute the project option from the tool bar to run the application. Once the Build is successful we can see the Windows Phone emulator with the application and the expected outputs as shown in the screens below.