Cómo agregué el modo oscuro a mi sitio web

Mismo sitio web, dos esquemas de color diferentes

El año pasado decidí rediseñar mi sitio web desde cero. Quería algo simple y minimalista que indicara claramente qué era esto: un sitio web de cartera.

Después de reconstruir mi sitio web desde cero, parecía que en todas partes había otro artículo sobre cómo agregar un modo oscuro a su sitio web.

Al principio no pensé que haría una gran diferencia porque, aunque soy partidario de los colores más oscuros, sentí que mi sitio web era un buen equilibrio entre colores brillantes y divertidos y fuentes más oscuras.

Leí algunos de los artículos que mencioné anteriormente y cuanto más lo pensaba, más decidía hacerlo.

Me inspiré en Flavio Copes, quien escribió un excelente artículo sobre este mismo tema. A diferencia de lo que Flavio decidió hacer con su sitio, no agregué la elección del usuario al almacenamiento local.

Esto se debe, en parte, a las diferencias entre nuestros sitios. Tengo un sitio estático y no hay redireccionamientos / páginas separadas aparte del blog que está en una plataforma diferente, por lo que los usuarios generalmente no actualizarán la página. Es una buena opción y una que puedo agregar más adelante.

Ok, profundicemos en los detalles de cómo logré mi alternar el modo oscuro.

El código

El código para lograr esto fue bastante simple. Tomé el mismo enfoque que Flavio y agregué los cambios de estilo a través de CSS. Tuve que dar unos pasos más porque tengo una imagen en mi página de destino.

Tuve que usar la bandera! Importante en algunas de las reglas porque no se aplicaban correctamente. Este fue el enfoque más fácil de implementar y sé que no se recomienda usar esta bandera, por lo que buscaré una alternativa en el futuro cercano.

Aquí está el JavaScript que utilicé para que mi conmutador funcionara correctamente:

Comienzo seleccionando mi div con un id de light-dark-mode-container y agregando un detector de eventos.

A continuación, configuro mis variables de todo, que selecciona todo el contenido de la página, y projectTiles porque esta clase pertenece a un conjunto particular de superposiciones que no quiero tener un fondo de un color sólido.

Luego, como estoy usando querySelectorAll que devuelve una NodeList estática, hago un bucle sobre todos los elementos dentro de ambas NodeLists y alterna la clase oscura o la elimino por completo de los elementos devueltos por la variable projectTiles.

Lo que me queda es un contenedor en la parte superior de mi sitio web con un interruptor de palanca que permite al usuario alternar entre el modo claro y oscuro.

El producto finalLa siguiente pantalla hacia abajo en modo oscuro

¡Espero que hayas disfrutado esta publicación y tal vez también hayas aprendido algo! Si decides implementar esto en tu propio sitio web o en tu próximo proyecto, compártelo conmigo (déjame un comentario o grítame en Twitter). Siempre estoy feliz de ver el trabajo y los proyectos que otros crean.

Esta publicación fue publicada en mi blog donde escribo artículos relacionados con el desarrollo web front-end. También cruzo la publicación en Dev.to, así que si estás en esa plataforma, ¡también puedes encontrar mi trabajo!

Mientras esté allí, ¿por qué no suscribirse a mi Newsletter? Prometo que nunca enviaré spam a su bandeja de entrada y su información no será compartida con nadie más.

¡Que tengas un día increíble lleno de amor, alegría y codificación!