Theme Switching With Blogger

If you look in the sidebar you'll notice a newly added theme option (you can now view this blog with either the default dark skin or a new light skin)

This new option is thanks to Dynamic Drive's Style Sheet Switcher

I'm not gonna go into too much detail here as that page includes a wonderfully detailed tutorial. It has examples of using it with standard links (like I'm using here), a drop-down menu, and even radio buttons.

This does require that you take all the css rules in your page's header and relocate them to an external stylesheet (which is just a text file with a .css extension). If you don't have your own server then the easiest thing to do is to go over to googlepages and upload your css files there.

You'll also need to grab the styleswitch.js file from Dynamic Drive and upload it somewhere as well... or just link to mine here (although it looks like there's a few options that can be set in the file so you might need to upload it somewhere yourself anyway).

Basically, the idea here is that you have one default external stylesheet, and one (or more) alternate external stylesheets that the user can choose from. The choice is then remembered via a cookie.

Update (as requested):
The basics of getting this to work include adding something like the following to your page header (this is a copy & paste of mine actually).

<link href='http://yggomelprup.googlepages.com/pmblogdark.css' rel='stylesheet' type='text/css'/>
<link href='http://yggomelprup.googlepages.com/pmbloglight.css' media='screen' rel='alternate stylesheet' title='light-css' type='text/css'/>

<script src='http://yggomelprup.googlepages.com/styleswitch.js' type='text/javascript'>
/***********************************************
* Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>

The first line defines the default external style sheet. The second line is an alternate external stylesheet. If you wanted to have more alternate stylesheets then just copy the format of the 2nd line, making sure to give it a new href (where the css file is located) and a new title (the titles need to be unique). The script section just gives the location of the styleswitch.js file. You can leave it as is, or upload the file somewhere else of your choosing.

Now you need to go and copy & paste the css that's normally in the page header (between the <b:skin> tags) and put it into your default external stylesheet. FYI, external stylesheets only contain the styling rules, so don't include any HTML/XML tags like: <b:skin> or <style type='text/css'>.

When copying the css to an external file you're gonna want to make sure to manually change $bordercolor, $sidebarcolor, $linkcolor, etc to the real corresponding colors you've selected (from the Fonts and Colors interface). The easiest way to do this is to actually view your blog, right click, and choose 'View Page Source' (or similar option) and copy & paste the css from there.

You can go ahead and delete the css from the page header now. Just delete the styling rules though, not the entire <b:skin> section. It'll complain if you do.

Now that you have your default css in an external stylesheet it's time to make an alternate stylesheet. The great thing about this script is that you don't have to make a completely new stylesheet. You only have to define the rules that are different from the default stylesheet (although you can include all the options that are the same too if you want). For example, here, I just changed some of the colors and a few background images between the light and dark options. All the actual layout options (margin, padding, float, etc) I left alone. It's completely up to you how different you want to make your alternate stylesheets.

Css Zen Garden has some good examples of alternate stylesheets for the same page.

Now you need to add an actual way for your users to choose between the themes you've prepared.

First up is using radio buttons:

<form id="switchform">
<label><input type="radio" name="choice" value="none" onClick="chooseStyle(this.value, 365)" checked="checked">Dark Skin</label><br />
<label><input type="radio" name="choice" value="light-css" onClick="chooseStyle(this.value, 365)">Light Skin</label>
</form>

A value of 'none' means to use the default external stylesheet. A value of 'light-css' means to use the alternate stylesheet with the title of 'light-css'. If you have more alternate external stylesheets then use the same value to title relationship. 365 is the number in days to remember the user's choice via a cookie.

Another option is to use a drop-down select menu:

<form id="switchform">
<select name="choice" size="1" onChange="chooseStyle(this.options[this.selectedIndex].value, 365)">
<option value="none" selected="selected">Dark Skin</option>
<option value="light-css">Light Skin</option>
</select>
</form>

This is very similar to the radio buttons. The same value to title relationship applies, and 365 is still the number in days to store the cookie.

Finally, you can use regular links too:

<a href="javascript:chooseStyle('none', 365)">Dark Skin</a>
<a href="javascript:chooseStyle('light-css', 365)">Light Skin</a>

Here, 'none' is the default stylesheet, and 'light-css' is the alternate stylesheet with the title of 'light-css' (there's no value option here). 365 is once again the number in days to remember the user's choice.

That's pretty much it :)

One addition for the radio buttons and drop-down menu that you can add is:

<script type="text/javascript">
window.onload=function(){
var formref=document.getElementById("switchform");
indicateSelected(formref.choice);
}
</script>

Place this directly below the part above that you already added to the page header. It will automatically select the correct drop-down menu choice, or automatically check the correct radio button upon page load according to the stored cookie.

For additional options see the Dynamic Drive page.