Un buen uso al CSS en un sitio web, es teniendo múltiples hojas de estilo con diferentes apariencias; así el usuario puede escoger el que más le plazca, según su ánimo, o como sea. A esto se le puede agregar en un JavaScript que cambie según la hora (día, noche), estación (verano, invierno), etc. Las posibilidades son muchas. Vamos al grano.

Primero, se necesita llamar las 2 hojas de estilo: la principal (stylesheet) y la opcional (alternate stylesheet).

<link rel="stylesheet"   type="text/css" href="normal.css"   title="normal"><br />
<link rel="alternate stylesheet"   type="text/css" href="oscuro.css" title="oscuro">

El secreto está en la denominación de rel="", y en el title="" para luego llamarla. El browser va a cargar ambas al principio, pero solamente habilitará la que se contiene en rel=“stylesheet”.

Ahora viene la magia. Con un JavaScript facilitado por A List Apart, que funciona de maravilla, se habilita la posibilidad de hacer el cambio casi instantáneo. El link, para bajarlo: styleswitcher.js

Agrégalo entre tus :

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

Finalmente, resta incluir el llamado en el HTML de la función del cambio de estilos en un botón. Usaremos onclick="" para esto:

<a href="#" onclick="setActiveStyleSheet('normal');   return false;">Normal</a><br />
<a href="#" onclick="setActiveStyleSheet('oscuro');   return false;">Oscuro</a>

Vale mencionar que ese styleswitcher.js hace más que eso: puede identificar cual está activa y guardar la hoja de estilos actual en una cookie para que permanezca posteriormente, entre otras cosas.

Ver ejemplo.

Links: