Smashed Blog Development

jQuery CSS theme switcher

HTML:

<ul class="themeSwitch">
	<li><a href="#light" id="light" class="selected">Light</a></li>
	<li><a href="#dark" id="dark">Dark</a></li>
</ul>

jQuery:

//Theme switcher
$('.themeSwitch a').click(function(e) {
	//Get the ID from link
	id = $(this).attr('id');

	//Load alternate styles
	if (id == 'dark') {
		//Method 1: Swap out existing CSS included in head
		url = '/blog/wp-content/themes/smashedcrab/css/monokai.css';
		$('#syntax-css').attr('href', url);

		//Method 2: Change body class
		$('body').removeClass('light').addClass('dark');
	} else {
		//Must be light
		url = '/blog/wp-content/themes/smashedcrab/css/github.css';
		$('#syntax-css').attr('href', url);
		$('body').removeClass('dark').addClass('light');
	}

	//Remove any selected link
	$('.themeSwitch .selected').removeClass('selected');
	//Add 'selected' class to clicked link
	$(this).addClass('selected');

	//Prevent default link action
	e.preventDefault();
});