Un “switch” de estilo puede ser muy útil, sobre todo cuando se tiene un diseño con colores oscuros. A mucha gente no le gustan las páginas con colores oscuros, por eso, para tratar de complacer a todos, lo más recomendable ofrecer la opción de cambiar los colores de tu página o blog.
Hay muchas maneras para crear un “switch de estilo”, pero (como siempre) yo quería uno que cumpliera con mis exigencias.
Normalmente, estos switches se crean con dos hojas de estilos (CSS) diferentes, una para cada color, y se carga la que el usuario elija. Pero yo prefería una que no necesitara dos hojas de estilos diferentes, para evitar todos esos problemas de hosting que tenemos nosotros los pobres.
Después de una larga búsqueda y muchos "este no me sirve", me quedé con el de css3files.com, que se veía muy prometedor.
Es simple. Básicamente, le asignas una clase a un color, por ejemplo; la clase "w", para el color blanco. Luego le agregas esa misma clase “w” a la etiqueta <html>, siendo el blanco el color por defecto. Al hacer clic en el botón correspondiente al color negro, la clase “w” se removerá de la etiqueta html, cambiando el color de tu página a negro. Al hacer clic en el botón correspondiente al color blanco, la clase “w” se agrega nuevamente, volviendo a ser el blanco el color de la página.
Así, cuando le agregues la clase .w a una propiedad css, solo se verá en la plantilla de color blanco.
Empecemos por lo fácil, el html:
Muy básico, un contenedor con dos enlaces, uno para el blanco y otro para el negro. Con las clases correspondientes a cada uno: “w” y “b”, respectivamente.
<div class='meta'>Cambiar color: <a class='w' href='#' title='Tema claro'>Blanco</a> | <a class='b' href='#' title='Tema oscuro'>Negro</a> </div>
La parte del script:
El script es el que hace el trabajo sucio de agregar y remover la clase de la etiqueta <html>. Para esto es necesario el uso de jQuery y un plugin de éste que sirve para setear cookies.
Esta es la parte difícil, y digo difícil porque prácticamente no sé nada de jquery (prometo aprender algún día). Obviamente, para alguien que sabe jquery, esto es un juego de niños. Incluso, puede que el siguiente código le haga sangrar sus ojos.
El plugin que mencioné me parece que es absolutamente necesario, para que la página permanezca del color que el usuario eligió, aún cuando recargue, navegue en sub-páginas, o cierre el navegador. Puedes descargarlo aquí.
Cabe aclarar, que debes tener agregada la librería de jquery en tu página para que funcionen el plugin y el script.
$(".meta .w").click(function() {
$.cookie("eacolor", "w", { path: '/', expires: 365 });
$("html").addClass("w");
return false;
});
$(".meta .b").click(function() {
$.cookie("eacolor", "", { path: '/', expires: 365 });
$("html").removeClass("w");
return false;
});
$.cookie('eacolor') == '' ? $("html").removeClass("w") : $("html").addClass("w");
En el siguiente blog de pruebas puedes ver el ejemplo funcionando:
El código de el ejemplo es más o menos así:
/* Tema Oscuro */
body {
background: url(FondoOscuro.png) repeat #333;
color:#ddd;
}
/* Tema Claro */
.w body{
background: url(FondoClaro.png) repeat #fff;
color:#333;
}
El diseño sí se lo dejo a cada quien.
0 comentarios