Themes are a way to define properties of pages and controls, and can be used to provide consistent look across pages. There are several different levels of applying a theme to an individual control, a page, or an application.

1. Control Level
   Define a named skin (an entry in a .skin file having the SkinID property set) and then apply it to an individual control
       <asp:Button runat="server" ID="MyButton" SkinID="BlueButton" />
   
2. Page Level
   A defined theme can be applied to an individual page by specifying the Theme or StyleSheetTheme attribute of the @Page directive of the page
       <%@ Page Theme="MyTheme" %>
   
3. Application Level
   To define the theme for the whole application, set the theme attribute of the pages element in the web.config file of the application
   <configuration>
      <system.web>
       <pages theme="MyTheme" />
      </system.web>
   </configuration>
   
4. Global Level
   Theme can also be applied globally to all the web sites on the same server. Global themes are defined the same way as Page themes, except that they’re defined in aTheme folder that is global to the server. Then you set the theme attribute of the pages element in the machine.config file.

Do you wonder if there is any difference between setting the Theme and StyleSheetTheme attribute of a @Page directive? Yes, there is. The difference is the precedence of the themes specified by the attribute. If you use the Theme attribute, the local settings will be overwritten by the Theme settings. If you use the StyleSheetTheme attribute, the local settings will be applied, regardless of what being defined in the Theme folder.

Also, a point that is worth mentioning is the designer of Visual Studio doesn’t support the Theme attribute. If you want to use the designer when developing your page, you might consider using the StyleSheetTheme attribute, then switch to using the Theme attribute for deployment.

Anh Phan

SDET, Visual Web Developer