Vamos a realizar una práctica muy fácil, pero antes, es requisito que sepas lo mínimo de:
Para este tutorial, es suficiente con que hayas tomado el curso de Desarrollo Web Online, el curso de HTML y CSS y también el curso de fundamentos de JavaScript.
Bien, ¡comencemos!
Lo primero que haremos es crear una carpeta donde guardaremos los archivos. Aquí vamos a requerir de solamente 4 documentos:
Como puedes ver, contamos con un archivo HTML, un archivo CSS, un archivo JS y un archivo SVG (o sea vectores, aunque también puedes usar una imagen normal si así lo prefieres).
Empecemos viendo lo que hay en nuestro archivo index.html.
Dentro tenemos 3 etiquetas muy importantes:
Nuestra etiqueta link hace referencia a la hoja de estilos que usaremos para cambiar el aspecto de nuestra página web del modo normal al modo oscuro.
La etiqueta button será el elemento al que le haremos click para que esto suceda.
Finalmente, la etiqueta script hace referencia al archivo que contendrá el código JavaScript para ejecutar este cambio visual.
Por el momento nuestra página luce así:
Lo siguiente que debemos hacer es ir a nuestro archivo style.css y escribir los estilos que queremos que tenga nuestra página para el modo oscuro.
En este caso, estos fueron lo que yo escribí:
Como puedes ver, estoy diciendo que quiero que la clase darkMode tenga el fondo oscuro y las letras blancas. Pero no existe esta clase en nuestro HTML. ¿Entonces cómo funcionará esto?
Aquí es donde viene la magia de JavaScript 😉
Así que vayamos a escribir código en el archivo index.js.
Lo único que necesitamos es lo siguiente:
Creamos una función llamada darkMode (OJO: No es la clase de CSS, el nombre de esta función puede tener el que tú quieras, solo le di ese nombre para tener un estándar propio).
En esta función declaro una constante llamada body, la cual inmediatamente inicializo a document.body.
¿Recuerdas que te dije que necesitabas saber lo mínimo de HTML, CSS y JS?
Bien, lo que estoy haciendo es guardar el cuerpo entero de la página web en una constante. Aquí lograré hacer la magia:
body.classList.toggle('darkMode')
classList es una propiedad que regresa el nombre de las clases de CSS.
El método toggle ya deberías saber como funciona, es como un botón para encender y apagar la luz.
¿Ya ves por dónde va esto?
Esta función quita y agrega la clase darkMode del archivo CSS a la etiqueta body del archivo HTML.
Por eso las etiquetas de link, button y script son muy importantes en este ejemplo.
Recuerda que la etiqueta de referencia al archivo CSS va arriba dentro de head y la etiqueta para el archivo JS va casi al final del HTML, justo antes de cerrar body. Esto para que todo funcione de manera correcta.
Finalmente verifica que la etiqueta de button tenga el atributo onclick y la función declarada sea llamada.
<button onclick="darkMode()">
<img src="214-contrast.svg" alt="darkModeButton">
¡Listo! Ahora ya sabes lo sencillo que es implementar un modo oscuro en tus páginas web, pero no solamente es para modos oscuros, puedes modificar el CSS de tu página de muchas formas con JS. El límite es tu imaginación 😃
Esto es solo un pedazo muy sencillo de lo que puedes hacer con JavaScript, te invito a que profundices en este lenguaje y lo domines. Para eso te recomiendo La ruta de Arquitectura Frontend, La escuela de desarrollo web y/o La escuela/carrera de JavaScript
¡Y lo tienes todo aquí en Platzi!
Desde mi punto de vista, el dark mode es un plus muy llamativo en las apps y sitios web de la actualidad (siempre que puedo, lo uso ya que me siento más cómodo con ese tema). Me gustó mucho tu aporte Miguel, gracias por compartir un poco de tu conocimiento. 😃