Nightmode: cómo resolverlo con CSS y Javascript

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 :D 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 :D 

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 :D 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.

Otros posts que podrían llegar a gustarte...

Comentarios

  • marito    

    Que buena onda, posta es re simple. Ahora aplicalo a los H2 que no puedo leer los titulos :D

    • Responder
    • Citar
    • Comentado:
    • vamos por partes cerebrito, que recién se lo apliqué a 10 colores que tenía, ahora me faltan los headings :P y todavia me falta la barra de navegación y las cajas de los anuncios

      • Responder
      • Citar
      • Comentado:
  • Gabriel    

    interesante.

    yo en lo personal hubiera preferido mantener los estilos con sass (o less) y usar un ´alternate stylesheet´

    • Responder
    • Citar
    • Comentado:
    • sencillo: no estoy en el tema de sass y less y no entiendo ni por dónde empezar ni en qué me beneficia porque todos los que te lo recomiendan dan por entendido que sabés mil cosas que no necesariamente un programador normal sepa, mucho menos de diseño que no es lo mío

      • Responder
      • Citar
      • Comentado:
  • SergioDV    

    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.

    • Responder
    • Citar
    • Comentado:
    • German    

      Groso!!

      • Responder
      • Citar
      • Comentado:
  • 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?

    • Responder
    • Citar
    • Comentado:
    • considerando todo lo que tendría que cambiar (poner clases nuevas en mil elementos) sí, se te escapa la cantidad de código a cambiar, con variables podés hacerlo sólo en el CSS, agregándole clases a mil entidades tengo que recorrer 100 archivos HTML distintos para evitar errores y debuggear mucho.

      • Responder
      • Citar
      • Comentado:
  • Matias    

    Y hacer que se active solo de noche no te copa? Guiño

    • Responder
    • Citar
    • Comentado:
    • nah, al re pedo, a mi me gusta verlo con fondo claro de noche, y mucho menos me gusta que me "toquen" las configs desde un javascript, eso debe quedar siempre a decisión del usuario, soy estricto con eso Guiño

      • Responder
      • Citar
      • Comentado:

Deje su comentario:

Tranquilo, su email nunca será revelado.
La gente de bien tiene URL, no se olvide del http/https
Para evitar bots, si se tardó mucho en leer la nota seguramente no sirva y tenga que intentar dos veces

Negrita Cursiva Imagen Enlace


comentarios ofensivos o que no hagan al enriquecimiento del post serán borrados/editados por el administrador