JQuery UI: Change theme dynamically using a drop-down

This is a neat pice of code to change the theme “live” on any site you build using css. I’m here going to use web links to the different css files but you can use any path, even local to get the css files

HTML:

<head> 
  <link id="stylesheet" rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/le-frog/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
...
<select id="themes">
  <option value="http://code.jquery.com/ui/1.10.4/themes/le-frog/jquery-ui.css">Le Frog</option>
  <option value="http://code.jquery.com/ui/1.10.4/themes/start/jquery-ui.css">Start</option>
  <option value="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">Smoothness</option>
  <option value="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">Redmond</option>
  <option value="http://code.jquery.com/ui/1.10.4/themes/sunny/jquery-ui.css">Sunny</option>
</select>  
...

First we put an id attribute into the link tab of the css link. This is so that we can easily find it later without selecting any other stylesheet links. Then we place the <select> with all the links in the <option> value attributes tags. No we are done with the HTML. Moving on to the javascript snippet

Javascript code:

$('#themes').change(function(){
  $("#stylesheet").attr({href : $('#themes').find(":selected").val()});
}); 

Here we just find the link object and changes the href attribute every time we change values in the <select>. And that is all!

Tested on Chrome 34.0.1847.116, JQuery 1.9.1 and JQueryUI 1.10.4

  1. very nice. thx.
    so all you need is a new .css file for that theme!
    I am a newbie and I am impressed.

    thank you.
    Rajeev

  2. Jesse Chisholm

    Can you please add a link to a demo page?

  3. 😛 cool.

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>