Cambiar el Css de un sitio dinamicamente

Buscando un poco de información sobre la manipulación de CSS dinámicamente con javascript, encontré Stlye Sheet Switcher una librería JS que se encarga de realizar de una forma limpia este tipo de efecto.

Su uso es extremadamente sencillo, con seguir unos pasos muy facil tendremos un sitio distinto a cada click.

insertamos el siguiente JS en el header:

<script src="styleswitch.js" type="text/javascript">

Ahora las hojas de estilos:

<link rel="stylesheet" type="text/css" href="default.css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="user.css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="brown-theme" href="user2.css" />

y armamos la siguiente estructura en el body:

<form id="switchform"> <input type="radio" name="choice" value="none" onClick="chooseStyle(this.value, 60)">Default style<br /> <input type="radio" name="choice" value="blue-theme" onClick="chooseStyle(this.value, 60)">Blue Theme<br /> <input type="radio" name="choice" value="brown-theme" onClick="chooseStyle(this.value, 60)">Brown Theme </form>

Luego es tan simple como poner lo siguiente donde queremos realizar la accion de cambio:

<p onClick="chooseStyle('blue-theme', 60)">Cambiemos</p>

Para descargar la libreria, puedes hacerlo desde aqui

Saludos