Creativa.dev

Añade el Modo Oscuro a tus Sitios Web con CSS

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Añade el Modo Oscuro a tus Sitios Web con CSS

Añade el Modo Oscuro a tus Sitios Web con CSS, es muy fácil incluir un tema oscuro para sus sitios web existentes usando CSS. En este tutorial, vamos a hacer esto aprovechando las variables CSS.

Vamos a tener 3 opciones diferentes para el tema – Automático, Luz y Oscuridad. Los temas Luz y Oscuridad son bastante autoexplicativos, pero el tema Automático va a usar la configuración del tema del sistema operativo para decidir si el sitio va a ser claro u oscuro.

Aunque no te mostraré cómo hacer este diseño en particular o incluir el contenido, aquí tienes un ejemplo de lo que podríamos crear:

Adición del HTML

Comencemos con el HTML, puede pensar en el atributo como el identificador de cada tema:value

<select id="theme">
    <option value="auto">Auto</option>
    <option value="light">Light</option>
    <option value="dark">Dark</option>
</select>

Adición del CSS

Ahora vamos a agregar un poco de CSS al elemento, aquí es donde se especifican los colores para el tema de luz utilizando variables CSS:body

body {
    --background-color: #ffffff;
    --text-color: #000000;
}

A continuación, querrá hacer uso de sus variables CSS en toda su hoja de estilos – esto es clave para cómo nuestra solución va a funcionar. Por ejemplo, puede hacer lo siguiente:

.main-content {
    background: var(--background-color);
    color: var(--text-color);
}

button {
    color: var(--text-color);
}

Vamos a implementar un tema oscuro simplemente reemplazando los valores de las variables declaradas anteriormente en los casos en los que vamos a usar un tema oscuro. Vamos a agregar este CSS:

:root {
    --dark-background-color: #111111;
    --dark-text-color: #eeeeee;
}

body.theme-dark {
    --background-color: var(--dark-background-color);
    --text-color: var(dark-text-color);
}

Ahora, si agrega la clase a su elemento, debería ver el tema oscuro funcionando. En breve usaremos JavaScript para alternar este valor con el, pero vamos a implementar nuestra opción Auto ahora:theme-dark<body><select>

@media (prefers-color-scheme: dark) {
    body.theme-auto {
        --background-color: var(--dark-background-color);
        --text-color: var(--dark-text-color);
    }
}

El CSS anterior utiliza Media Queries que está comprobando si el sistema operativo prefiere un tema oscuro, y si es así, queremos aplicar el conjunto de reglas anidado para .body.theme-auto

Básicamente estamos diciendo «¿Prefiere el sistema operativo el modo oscuro, y tiene una clase de ? Si es así, vamos a usar el Modo Oscuro.»<body>theme-auto

Pruébalo cambiando el color del tema del sistema operativo, o mejor aún, ver el sitio web en tu teléfono con el Modo Oscuro habilitado.

Adición de JavaScript

Ahora que nuestro CSS está funcionando, podemos pasar a conseguir que nuestro selector de temas funcione. Vamos a agregar el siguiente JavaScript:

function applyTheme(theme) {
    document.body.classList.remove("theme-auto", "theme-light", "theme-dark");
    document.body.classList.add(`theme-${theme}`);
}

document.addEventListener("DOMContentLoaded", () => {
   document.querySelector("#theme").addEventListener("change", function() {
        applyTheme(this.value);
   });
});

Aquí, estamos esperando a que el DOM esté listo para que empecemos a usarlo, y una vez que esté listo, estamos escuchando cuando el usuario elige una opción en el menú desplegable del selector de temas. Una vez que eligen una opción, eliminamos todas las clases de tema existentes de la (si las hay) y luego simplemente agregamos el tema seleccionado con.<body>this.value

Un paso más allá – recordar el tema

Podríamos llevar esto un paso más allá y tener la capacidad para que el navegador recuerde el tema que fue elegido en una actualización de página. Para ello, podemos usar Local Storage.

Vamos a agregar el siguiente JavaScript, por lo que terminamos con esto:

document.addEventListener("DOMContentLoaded", () => {
    const savedTheme = localStorage.getItem("theme") || "auto";

    applyTheme(savedTheme);

    for (const optionElement of document.querySelectorAll("#theme option")) {
        optionElement.selected = savedTheme === optionElement.value;
    }

    document.querySelector("#theme").addEventListener("change", function () {
        localStorage.setItem("theme", this.value);
        applyTheme(this.value);
    });
});

Ahora, al elegir un tema, guardamos el tema en Almacenamiento local mediante el uso de . Después de esto, en la carga de la página, agarramos el tema previamente guardado en la constante, con un valor predeterminado de . Una vez que tenemos esto, simplemente aplicamos el tema guardado.localStorage.setItem("theme", this.value)savedThemeauto

Añadiendo a esto, estamos a través de cada uno de nuestros elementos y comprobar si el valor es el de nuestro tema guardado, y si es así, elegir esa opción como «seleccionado».<option>

Para probar si funciona, actualizar la página, elegir un tema, actualizar de nuevo, y su tema debe pegarse!

Video Tutorial

Si en su lugar prefiere esto en forma de un video tutorial, echa un vistazo aquí en mi canal de YouTube, dcode!

Si quieres ver el post original en inglés aquí lo puedes hacer.

Fuente: Dev.to

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

FAQ's

Si aún tiene dudas, lo invitamos a revisar nuestras preguntas frecuentes sobre nuestros servicios.

Diseño Web & Desarrollo

¿No encuentra la respuesta que busca para su sitio web? ¡Compartimos algunas de nuestras preguntas más frecuentes para ayudarlo!

Branding & Diseño Gráfico

¿Quiere un logotipo, una ilustración o un diseño pero no puede encontrar la respuesta que está buscando? Eche un vistazo a nuestras preguntas frecuentes.

Marketing Digital

¿Estás listo para impulsar tu negocio pero no encuentras la respuesta que estás buscando? Echa un comentario a nuestras preguntas frecuentes.