Simple way to implement a stylesheet switcher, using jquery and proper html. Add your stylesheets to your tag: Include the jquery stylesheet switcher. Done.
// STYLESHEET SWITCHER
(function($)
{
// All Alternate stylesheets Selector
var $links = $('link[rel*=alternate][title]');
$('body').prepend('<div id="toolbar"><select id="css-selector"></select></div>');
var options= '<option value="">Select stylesheet:</option>';
$links.each(function(index,value){
options +='<option value="'+$(this).attr('href')+'">'+$(this).attr('title')+'</option>';
});
$links.remove();
$('#css-selector').append(options)
.bind('change',function(){
$('link[rel*=jquery]').remove();
$('head').append('<link rel="stylesheet jquery" href="'+$(this).val()+'" type="text/css" />');
});
}
)(jQuery);
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<link rel="stylesheet" title="main" href="normalize.min.css" type="text/css">
<link rel="stylesheet" title="main" href="main.css" type="text/css">
<link rel="alternate stylesheet" title="red" href="red.css" type="text/css">
<link rel="alternate stylesheet" title="blue" href="blue.css" type="text/css">
</head>
<body>
<p>Hello World</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
<script src="stylesheet-switcher.js"></script>
</body>
</html>