The aforementioned CSS and images are inside that /css directory, plus some other goodies, like example code for using each of UI’s widgets. When I want to use a jQueryUI theme in an ASP.Net, I just copy the theme-name subdirectory from /css into the App_Themes .Net solution folder. From there, it’s a simple matter of letting the web app know to use the one of the themes in Web.config:

<pages styleSheetTheme="start" />

I used StyleSheetTheme over Theme, because a) StyleSheetTheme is processed earlier in the page lifecycle–before page control properties applied–and b) since these are style-only themes (meaning no .Net-specific .skin files that contain server-processed control properties), StyleSheetTheme just makes more sense.

Now that I have a couple of Themerolled themes, how the heck do I get the right customized JavaScript file to load? Glad you (er, I) asked!

When you download a themerolled theme, the included JavaScript file is named jquery-ui-1.7.1.custom.min.js (with the appropriate version number if you are reading this a while after I write it). The first thing I do is change that “custom” into the name of the theme: jquery-ui-1.7.1.south-street.min.js — and drop it into my site’s /js directory.. Now it’s time to crack open my Master page’s code-behind:

public partial class MasterPage 
 : System.Web.UI.MasterPage {
  protected void Page_Init(object sender, EventArgs e) {
    //prefer StyleSheetTheme, but use Theme if
    //  no StyleSheetTheme is present
    string themeName = Page.StyleSheetTheme != null 
     ? Page.StyleSheetTheme 
     : Page.Theme;
 
    string uiScriptPath = string.Format(
     "~/js/jquery-ui-1.7.1.{0}.min", 
     themeName);
 
    ScriptManager1.Scripts.Add(
     new ScriptReference(uiScriptPath));
  }
}

Not using ASP.Net AJAX? Then replace that last statement with:

Page.ClientScript.RegisterClientScriptInclude(
 this.GetType(), "jqueryui", uiScriptPath);

Now, if you want to provide a way for users of your site to switch between themes, the right customized jQueryUI file gets picked up!

On a related note, the MasterPage class has no PreInit event, so we cannot globally (i.e., just one time) do the following:

//no such thing as a MasterPage.PreInit event :-(
//  so, only works on content, i.e., aspx pages
protected void Page_PreInit(object sender, EventArgs e) {
  //grab from profile or session or cookie, etc.
  Page.StyleSheetTheme = Profile.Theme;
}

So how can we easily pick up our JavaScript file across the whole site if I want users to be able to switch between themes? (Microsoft suggested doing so in Global.asax in the above linked suggestion…but how the blazes can you access the Page.(StyleSheet)Theme inside Global.asax?!)

It just so happens that Sue Googe blogged about solving that very problem and also posted her solution to CodeProject. In brief, she created a BasePage class (which inherits from Page) in the /App_Code folder that sets the theme, and then all your site pages inherit from BasePage. Less than ideal for a pre-existing site with many pages, but I have yet to find or come up with a better globally-available solution. (Thanks, Sue! ^_^)