ASP.NET MVC Themes: 3 different theming methods

There really isn’t a single “one size fits all” solution to theming an ASP.NET MVC web application. From my experience working with the platform, there are really 3 different methods that can be used to theme your apps.
Here they are in no particular order: ## 1. CSS Stylesheet
This is the simplest and pretty much standard method that’s used to theme an ASP.NET MVC web application. Basically, you just create a different version of your sites CSS file for each “theme.” Then you include the appropriate CSS for which ever theme you want enabled.
Even though this method is the simplest, it doesn’t allow you to customize any of the HTML to be theme specific.
The MvcContrib Template Gallery over on CodePlex contains some themes you can download that work this way. ## 2. Custom Theming ViewEngine
A while back, I posted some sample code on my blog on how to “Implement Theme Folders using a Custom ViewEngine.” I originally posted about this for ASP.NET MVC Preview 4, and then updated it to support ASP.NET MVC 1.0.
Basically, what this code does is add a couple additional “Views” folders to the WebFormViewEngine that allows you to create different .aspx and .ascx pages for your themes, in addition to changing the CSS Stylesheet. This method allows you to completely customize both the HTML and CSS for each of your web applications themes. ## 2. Areas
The previous 2 methods are only HTML and CSS options. This option allows you to customize everything from the Controller Actions to the Views for your Themes.
Basically, you create a new Area in your ASP.NET MVC application for each Theme.
For example: If you want to have a different theme for Desktop and Mobile users; you just create an Area for each containing the complete code necessary for each experience. You can also share any Data Access Layer or Model code between any Controller / Area you want, or keep them completely separate.
This may be the most flexible when it comes to theming the application, but it does add a little more code depending on your theming needs. ## Conclusion
The theming solution you choose to use will depend on your theming needs. Also, any one solution may not fit your exact needs, so you could mix them too. An example of mixing would be to use both the CSS and Area methods, to both theme and separate your code for different pieces of the application.
I originally saw the CSS solution to not fit, and that’s why I originally developed the Custom ViewEngine method (back in 2008 already!) Even though it can work perfectly well, I am thinking that mixing Areas and CSS might be a more elegant solution.
One thing to think about when building a web app is, when it comes to the client-side browser, HTML and JSON become the Model and CSS can be used as your View. If you get in that frame of mind you could likely use the straight CSS approach very successfully.
Happy Theming!!