Changing themes programmatically

Server-side

In some scenarios you might want to change your localization file programmatically based on certain runtime criteria. In this case, rather than including the language file directly in the header, you may place it in a runat=server Literal control, e.g.

<head id="Head1" runat="server">    
    <asp:Literal runat="server" ID="localeLiteral" 
      Text="<link rel='stylesheet' type='text/css' media='screen' 
      href='/themes/redmond/jquery-ui-1.7.1.custom.css' />" />    
</head>

This will by default use the English locale. From this point on, you can change the language file at any point with server-side code using something similar to this:

string theme = "";
switch (currentOS)
{
   case "Apple" : theme = "Redmond";
                     break;
   case "Microsoft" : theme = "Cupertino"
               break;      
}
localeLiteral.Text = "<link rel='stylesheet' type='text/css' media='screen' 
      href='/themes/" + theme + " /jquery-ui-1.7.1.custom.css' />";

Client-Side

You can use the following client-side javascript function to change a theme on the client-side:

function updateCSS(locStr) {
   var cssLink = $('<link href="' + locStr + '" type="text/css" rel="Stylesheet" class="ui-theme" />');
   $("head").append(cssLink);        


   if ($("link.ui-theme").size() > 3) {
      $("link.ui-theme:first").remove();
   }
}

Note: this client-side code assumes that you always add the "class='ui-theme'" attribute for the link, so that it can remove previous references to themes (the last two lines of code). Failing to do so may slow down the page.