Selecting a style sheet through a dropdown menu - html

Question

So I have my site set up to have two different themes, and that works wonderfully, but when I'm making a lot of changes, I can miss some stuff and things start to not look the same.
This is how I'm doing that:
<select onchange="window.location=this.value">
<option>Default</option>
<option value="http://MyWebsite.com/Cyan/">Cyan</option>
</select>
What I WANT to do, is just have two separate style.css files and have the dropdown menu request the one you choose.
This would make my job so much easier, but I'm not 100% sure how to do it. Would I simply replace the website link with the stylesheet? Is there even a way to do this?

Answer 1

One possible solution using jquery:
$("select").on("change", function(){
$("<link/>", {
rel: "stylesheet",
type: "text/css",
href: $(this).val()
}).appendTo("head");
});

Answer 2

There's a framework that deals with this kind of thing. Coupled with jQuery it could be pretty good. It's utils.js, available there.
Your HTML should look like this:
<link id="stylesheet" rel="stylesheet" href="path/to/theme1.css" />
...
<select id="dropdown">
<option value="path/to/theme1.css">Theme 1</option>
<option value="path/to/theme2.css">Theme 2</option>
</select>
And then your script:
$("#dropdown").on("change", function(){
var path = $(this).val(); // Get path from selected option
utils.changeStylesheet("stylesheet", path);
});
Should work fine, though I haven't checked the documentation so the utils statement may need revising...