Close

enero 15, 2018

Cómo crear un sistema de tema oscuro para páginas

Como crear un tema oscuro para páginas web con jquery

Con el tiempo, blogs comenzaron a usar temas oscuros. Actualmente se han vuelto populares, y en este artículos aprenderás como hacer uno para tu web. Usando Jquery y Javascript.

 

La cantidad de usuarios que están activos de noche es alta. Así que es normal que nos interese cambiar el color de la página y asegurarnos de que tengan la mejor experiencia sin importar a qué hora visitan nuestra página.

 

Incluso Youtube agregó su propio tema oscuro. Esto cambia la mayoría de las zonas claras y las transforma en grises, haciendo que podamos disfrutar del sitio aún si lo vemos de noche.

Tema oscuro de Youtube

Tema oscuro de Youtube

Estos temas ayudan también a personas que usan sus computadoras por períodos largos de tiempo. Y a muchos simplemente les gusta tener un tema oscuro disponible.

Todo esto es muy genial. Y para crear nuestro propio sistema para temas oscuros, podemos usar Jquery y Javascript.

Al final, el usuario podrá escoger su tema, y este se mantendrá así el usuario recargue la página, o la cierre y la abra otro día.

HTML

Para comenzar, crearemos nuestro archivo HTML e importaremos jquery:

 <!DOCTYPE html>
<html>
<head>
<script src='https://code.jquery.com/jquery-3.2.1.min.js'>
</script>
<title>Sistema de tema oscuro</title>
</head>
<body>
</body>
</html>

Una vez tengamos jquery, tendremos que colocarle IDs a los elementos que queramos cambiar de color y al botón que usaremos. Esto nos permitirá llamar a estos elementos en nuestro Script.

Lo hacemos de la siguiente forma:

 <!DOCTYPE html>
<html>
<head>
<script src='https://code.jquery.com/jquery-3.2.1.min.js'>
</script><title>Sistema de tema oscuro</title>
</head>
<body id='body'>
<button id='tema'>CAMBIAR TEMA</button>
</body>
</html>

 

CSS:

Debemos crear un archivo style.css. Porque aquí, especificaremos el estilo del fondo, y el del botón:

body{transition:.40s; background: #EEEEEE; color:black;}
.black{background:#212121; color:white;}
button{margin: 25px; border: 0px; padding: 15px; cursor: pointer;}

Hasta ahora es muy simple. Debemos hacer que cuando el usuario de click en el botón, se agregue una clase en el body.

Artículo relacionado:  5 páginas donde encontrar imágenes para tu web

Javascript:

Debemos crear un archivo sistema-de-tema.js. Aquí, colocaremos todo lo relacionado con javascript/jquery.
Para esto, debemos llamar a los IDs de los elementos:

var tema = document.getElementById('tema');
var cuerpo = document.getElementById('body');

Como tenemos esto, podemos trabajar con los elementos ‘tema’ y ‘cuerpo’ como variables.
Y haremos que al dar click en tema, se le agregue una clase a ‘cuerpo’. Y al dar click de nuevo, si tiene la clase, se la quite.
Para esto usaremos a .toggleClass(); de jquery. Nuestro código debería verse así:

var tema = document.getElementById('tema');
var cuerpo = document.getElementById('body'); 
$(tema).click(function() {
$( cuerpo ).toggleClass( "black" );
});

Y tu código HTML debería verse así:

<!DOCTYPE html> 
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src='https://code.jquery.com/jquery-3.2.1.min.js'>
</script><title>Sistema de tema oscuro</title>
</head>
<body id='body'>
<button id='tema'>CAMBIAR TEMA</button>
</body>
<script src="sistema-de-tema.js" type="text/javascript" charset="utf-8"></script>
</html>

Resultado

¡Con esto estamos listos!
Bueno… Casi…

Nuestro resultado es este:

Si presionas el botón te darás cuenta de que el fondo cambia. Si lo presionas nuevamente verás que cambia otra vez.

Pero si recargas la página, te darás cuenta de que el tema que tenías antes de recargarla, simplemente se pierde.

Guardando y llamando la información del tema.

Para cambiar esto utilizaremos el localStorage. Que nos va a permitir guardar datos sobre el tema del usuario en su PC.

Como queremos guardar datos, yo agregaré un texto que funcionará como un log de los datos del tema, y el HTML se verá así:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src='https://code.jquery.com/jquery-3.2.1.min.js'>
</script><title>Sistema de tema oscuro</title>
</head>
<body id='body'>
<button id='tema'>CAMBIAR TEMA</button>
<p id="result"></p>
</body>
<script src="sistema-de-tema.js" type="text/javascript" charset="utf-8"></script>
</html> 

Ahora debemos crear una función que nos permita chequear el tema y asignarle un valor con el localstorage.

Lo que debe hacer el mismo es:

  • Obtener la información.
  • Revisar si el tema que el usuario está usando es claro u oscuro.
  • Colocar un nuevo valor a la información en base al tema que usaba.
var tema = document.getElementById('tema');
var cuerpo = document.getElementById('body');
var theme = document.getElementById('result');
$(tema).click(function() {
$( cuerpo ).toggleClass( "black" );
revisartema();
});
function revisartema(){
storagetheme = localStorage.getItem("storagetheme");
if(storagetheme == 'oscuro'){
localStorage.setItem("storagetheme", "claro");
result.innerHTML = 'Cambio a claro';
return false;
}
if(storagetheme == 'claro'){
localStorage.setItem("storagetheme", "oscuro");
}
if(storagetheme == null){
localStorage.setItem("storagetheme", "oscuro");
}
result.innerHTML = 'Cambio a oscuro';
}

Como podemos ver, ahora, al darle click al botón, revisará el tema guardado. En base a lo que diga el tema, el texto de ‘result’ cambiará. Si es primera vez que el usuario presiona el botón, el resultado será null, así en el texto saldrá que es oscuro y se guardará como tal.

Artículo relacionado:  6 sitios de inspiración para tu página

Ya guardamos los datos del tema, ahora solo falta comprobarlos cuando el usuario ingresa a la página, para ello, agregaremos este pequeño pedazo de código al inicio:

var tema = document.getElementById('tema');
var cuerpo = document.getElementById('body');
var theme = document.getElementById('result');
storagetheme = localStorage.getItem("storagetheme");
if(storagetheme == 'oscuro'){
result.innerHTML += 'oscuro';
$(cuerpo).addClass( "black" );
}else{result.innerHTML += 'claro'}

Esto permite que apenas el usuario entra a la página, podamos comprobar que tema tiene, y de tener el tema oscuro, agregarlo. Si no, continuar normal y solo colocar en el result que el tema es claro.

Y editaremos el <p> del HTML de la siguiente forma:

 

<p id="result">El usuario tiene tema </p>

Ahora probamos, y listo!

Ya tenemos nuestro sistema de tema oscuro! El resultado final es este:


Puedes encontrar el código entero en jsfiddle.

Espero hayas disfrutado de este pequeño tutorial, si te interesa conocer más, o saber cuándo publico un artículo nuevo, puedes darle me gusta a mi página en facebook, Codedgar

Saludos y Happy coding!

One Comment on “Cómo crear un sistema de tema oscuro para páginas

Anderson
enero 15, 2018 at 1:43 pm

Que perron wuey 😀

Responder

Deja un comentario

A %d blogueros les gusta esto: