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

- Link: https://creativa.dev/desarrollo-web/anade-el-modo-oscuro-a-tus-sitios-web-con-css/
- Published: 2020-07-19T20:12:03-04:00
- Author: Juanito Ortega

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](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).

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:

![](https://www.creativa.dev/wp-content/uploads/2020/07/white-black.jpg)

### Adición del HTML

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

    ```notranslate
    <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`

    ```notranslate
    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:

    ```notranslate
    .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:

    ```notranslate
    :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>`

    ```notranslate
    @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](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_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:

    ```notranslate
    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](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).

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

    ```notranslate
    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)``
savedTheme``auto`

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.t](https://dev.to/dcodeyt/add-dark-mode-to-your-websites-with-css-5bh4)
[o](https://dev.to/dcodeyt/add-dark-mode-to-your-websites-with-css-5bh4)