Dynamic instant theming a la My Yahoo / iGoogle

Question

I can think of lots of ways to do this on my own, but I was hoping to find some sort of best practice and have been having trouble finding other's experiences. I want to create easily themed HTML and provide a real-time selector for the user to experiment with themes.

I want to do something like the "Change Appearance" tab at http://my.yahoo.com .

I'll be using jQuery. jQuery has a "theming" system, but it seems very much focused on jQuery widgets as opposed to the whole site, and also doesn't appear to address the real-time selection aspect (the jQuery page has this functionality, but I don't think it's part of the library.) Maybe there is a jQuery plugin that already does this? Or some sort of css/jQuery framework?

Answer 1

JQuery UI uses the ThemeSwitcher plugin and it is focused on just the jQuery UI themes. As a general solution, though, you could take it's ideas and translate them to your own theming requirements. The basic idea is to keep your theme in a single CSS file, then manage the which theme is in use via javascript by replacing the link element containing the theme with the selected link. Note that it generally needs to be the last CSS file referenced for it to work well across all browsers.

I have a similar plugin detailed on my blog that is simpler than the jQuery UI one, though, I've actually moved more toward customizing the jQuery UI plugin as I like the preview that it gives.