How It Works
In this exercise you first applied the Monochrome theme by changing the element in the Web
.config file. When the run time sees that a theme is active, it scans the associated theme folder for
.css files and includes a link to all those files in the page’s section in alphabetical order. In the
case of the Monochrome theme it finds the file Monochrome.css and adds it to the section automatically.
An identical process took place when you changed the theme to DarkGrey. The linked style
sheet then influences the way the page is displayed in the browser by changing the layout and colors
used in the page.
To enable design-time support in Visual Studio, you need to change the styleSheetTheme in the Web
.config fi le as well. The only downside of this is that the relevant CSS fi le is now included twice: once
for the Theme and once for the StyleSheetTheme. Because the exact same fi le is included twice, it
doesn’t affect the layout of the site. All the selectors in the second fi le simply overrule those in the fi rst.
However, if you feel this duplication is a waste of CPU cycles, you should delete the styleSheetTheme
attribute from the Web.config fi le when you go live with the application.
The layout of the page is changed radically because of the CSS in the DarkGrey.css fi le. If you want to
know what CSS the fi le contains and what elements of the page it changes, open it up in VS. It has lots
of comments describing each selector in detail.