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.

Si te gustó esta nota podés...
Invitame un café en cafecito.app


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

Comentarios

  • marito     27/11/2018 - 11:46:18

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

    • Fabio Baccaglioni     27/11/2018 - 11:59:53

      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

  • Gabriel     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´

    • Fabio Baccaglioni     27/11/2018 - 22:05:59

      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

  • SergioDV     27/11/2018 - 14:17:12

    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.

    • German     27/11/2018 - 18:27:03

      Groso!!

  • Juan Pérez     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?

    • Fabio Baccaglioni     28/11/2018 - 12:50:13

      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.

  • Matias     28/11/2018 - 22:28:07

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

    • Fabio Baccaglioni     29/11/2018 - 01:55:04

      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

Deje su comentario:

Tranquilo, su email nunca será revelado.
La gente de bien tiene URL, no se olvide del http/https

Negrita Cursiva Imagen Enlace


Comentarios ofensivos o que no hagan al enriquecimiento del post serán borrados/editados por el administrador. Los comentarios son filtrados por ReCaptcha V3.