El otro día les comenté que había agregado el BB Code y el Nightmode, hoy les quería mostrar cómo es que se implementa esto último, no es para nada difícil!
Así que también aprovecho otra cosa que le agregué al blog 
la posibilidad de mostrar código con colores un poco más amenos que un simple cambio de tipografía.
Lo único que utilicé en este caso es Javascript y CSS porque es tan sólo visual, es un cambio que en cualquier browser moderno se debería ver sin problemas y no tengo idea si se ve bien en alguno viejo pero... vamos, acaso alguno sigue usando IE6? lo tiraría a la hoguera
El CSS es sencillo, se definen los colores como variables en vez de indicar los valores directamente, armo una lista default en body y una lista nocturna en .nigthmode:
body {
--color-page-background: rgba(255, 255, 255);
--color-primary-dark: rgb(10,10,10);
}
.nightmode {
--color-page-background: rgba(0, 0, 20, .95);
--color-primary-dark: rgb(240,240,240);
}
* {
transition: all .10s ease-in;
}
body {
background-color: var(--color-page-background);
color: var(--color-primary-dark);
}
Defino una transición de una décima de segundo para que se vea más cool el cambio y como notarán en body está definido cada color con una variable.
Hasta ahí mostrará el color default pero con un sencillo javascript que podemos aplicar a cualquier botón donde la función sóllo hace un toggle a la clase con todas las variables de color cambiadas que se llama .nightmode:
/* Night Mode */
document.querySelector('[data-switch-contrast]').addEventListener('click', function() {
document.body.classList.toggle('nightmode');
});El botón lo definí así:
N
Ahora bien con Cookie utilizando Js.cookie.js para que recuerde qué eligió el usuario, si, es medio cochino, lo hice a las apuradas, pero funciona:
/* Night Mode */
document.querySelector('[data-switch-contrast]').addEventListener('click', function() {
var cookie;
cookie = Cookies.get('nightmode');
if (cookie)
{
if (cookie == 1) {Cookies.set('nightmode', '0', { expires: 7 });}
else
{Cookies.set('nightmode', '1', { expires: 7 });}
}
else {
Cookies.set('nightmode', '1', { expires: 7 });
}
document.body.classList.toggle('nightmode');
});Y cada vez que cargo el sitio y ya está todo:
// nightmode por cookie
$( document ).ready(function() {
var cookie;
cookie = Cookies.get('nightmode');
if (cookie)
{
if (cookie == 1)
{document.body.classList.toggle('nightmode');}
}
console.log( "Cookie" + cookie);
});Si, mezclé Jquery aquí pero ya que lo tengo mejor usarlo, al fin y al cabo es todo javascript! sencillamente aprovecho el .ready de jquery para verificar la cookie, si ésta tiene guardado 1 para el nightmode fuerzo el toggle y cambio el color de todo. Listo!
Todavía me falta ajustar algunos elementos a los colores pero en general funciona y hace lo que promete, te quita el brillo de los ojos si estás ante un monitor pulenta o en un ambiente poco iluminado.
Lo bueno es que es bastante fácil de implementar en cualquier sitio ya existente porque no son tantas las modificaciones que hay que hacer en el CSS donde básicamente es un search & replace de cada color por una variable.
Si te gustó esta nota podés...
27/11/2018 - 11:46:18
Que buena onda, posta es re simple. Ahora aplicalo a los H2 que no puedo leer los titulos
27/11/2018 - 13:28:32
interesante.
yo en lo personal hubiera preferido mantener los estilos con sass (o less) y usar un ´alternate stylesheet´
A los que no les funciones la cooky del Night Mode, les cuento que tienen que hacer ctrl+F5 o alt+F5, dependiendo el navegador, para actualizar el CSS y JavaScript que tengan cacheado en sus navegadores.
Ah!, y me toco el Putin bailarín.
27/11/2018 - 22:34:32
Creo que no necesitabas las variables, podías usar simplemente la clase. Es más simple y no tenés problemas de compatibilidad.
¿Se me escapa algo?
y todavia me falta la barra de navegación y las cajas de los anuncios 
