Cómo añadir un tema oscuro con CSS y JavaScript

Los sitios web se han construido tradicionalmente usando una tipografía más oscura y sobre un fondo claro o directamente blanco. A pesar de ello, en los últimos años se ha popularizado el uso de temas oscuros, también llamados «dark theme», en las interfaces de diferentes aplicaciones o sitios web. Esto se debe a los beneficios que aporta sobre la vista de los usuarios, y también al ahorro de batería que supone el usar estos temas nocturnos. Es por ello que en esta entrada te enseño cómo añadir un tema oscuro con CSS y JavaScript.

Así los usuarios de tu web podrán elegir entre tema claro y un tema oscuro, lo que mejorará notablemente la usabilidad de tu página y por consiguiente, el posicionamiento de tu página web.

El objetivo de esta publicación, es que logres crear un interruptor o switch que genere un efecto como el siguiente. Verás que con un click podrás cambiar de tema claro a tema oscuro:

Añade un botón para cambiar a tema oscuro con HTML

En el código HTML de tu web simplemente tienes que añadir el botón que permita cambiar entre el tema oscuro, y el tema claro. Este botón puede ser de cualquier tipo, aunque normalmente se utilizan botones de tipo on/off (Toggle Switch) para diseños de este estilo. Si quieres saber como crearlo, te recomendamos visitar la página W3Schools, en ella podrás ver el código y utilizarlo en tus proyectos.

En caso de que no conozcas las distintas etiquetas HTML que podemos utilizar, te recomendamos visitar nuestro listado.

En nuestro caso, el código HTML es así de simple:

<header class="container">
            <div class="row">
                <div class="col text-center">
                    <label id="switch">
                        <input type="checkbox">
                        <span class="slider round"></span>
                    </label>
                    <h1>Caronte Web Studio</h1>
                </div>
            </div> 
        </header>
        <main class="container">
            <section class="row justify-content-center">
                <div class="col-md-8 text-center">
                    <h2>Custom Web & Design</h2>
                    <p>Desarrollamos la web para tu negocio con un diseño web a medida 100% personalizado. 
                        Olvidate de plantillas y proyectos sin personalidad. Estamos en Vitoria-Gasteiz y 
                        trabajamos con clientes de todo el país.
                    </p>
                    <a href="https://carontestudio.com/" target="_blank">Descúbrenos</a>
                </div>
            </section>
        </main>

Si te preguntas para qué sirven las clases container, row, col, etc, son clases que pertenecen a Bootstrap. Por si es de tu interés, Bootstrap es un framework muy extendido gracias entre otras cosas, a su facilidad para crear sitios web totalmente responsive, y atractivos. No es necesario que añadas esas clases. En cualquier caso, si quieres empezar a conocer este framework, te invitamos a leer nuestro artículo «Bootstrap: Cómo Instalar» o bien a apuntarte a uno de nuestros cursos de diseño web en Vitoria.

Definimos las variables de los temas con CSS

En la parte de CSS es muy importante que definas como propiedades personalizadas, los elementos que van a cambiar del tema claro, al tema oscuro. Es decir, almacenaremos los valores que van a cambiar en variables.

En nuestro caso, únicamente definiremos como variables los valores correspondientes a los colores blanco y negro, ya que son los únicos valores CSS que cambian de un modo a otro en nuestra página. Tú puedes definir todos aquellos elementos que consideres oportuno.

Para ello, emplearemos el selector :root y en su interior definiremos nuestras propiedades personalizadas con la siguiente sintaxis: –nombre-variable:valor;

En nuestro caso, el código CSS quedaría de la siguiente manera:

:root {
    --color-fuente: #000000;
    --color-fondo: #ffffff;
}

Una vez definidas nuestras propiedades, cuando queramos hacer referencia a su valor a lo largo de nuestro documento CSS, simplemente tendremos que escribir el nombre de la variable que lo almacena con la siguiente sintaxis: propiedad: var(–nombre-variable). Por ejemplo:

a {
    background-color:var(--color-fuente);
    color:var(--color-fondo);
}

Gracias a las variables CSS, con JavaScript podremos indicar que cuando el usuario haga click en el botón de cambio de tema, los valores de dichas variables se inviertan. De esta manera, conseguiremos que el color de fondo y el color de fuente sean opuestos en función del tema elegido.

Para lograrlo, realizaremos un paso más en CSS. Indicaremos que cuando un atributo del documento que definiremos después con JavaScript, tenga el valor “dark”, los valores de nuestras variables se inviertan. En nuestro caso, lo hemos realizado de la siguiente manera:

[tema="dark"]{
    --color-fuente: #ffffff;
    --color-fondo: #000000;
}

Añadir JavaScript para cambiar a tema oscuro

Por último, añadiremos el código JavaScript que se va a encargar de realizar los cambios oportunos cuando el usuario haga clic en el botón. Veamos nuestro código y analicémoslo:

<header class="container">
            <div class="row">
                <div class="col text-center">
                    <label id="switch">
                        <input type="checkbox">
                        <span class="slider round"></span>
                    </label>
                    <h1>Caronte Web Studio</h1>
                </div>
            </div> 
        </header>
        <main class="container">
            <section class="row justify-content-center">
                <div class="col-md-8 text-center">
                    <h2>Custom Web & Design</h2>
                    <p>Desarrollamos la web para tu negocio con un diseño web a medida 100% personalizado. 
                        Olvidate de plantillas y proyectos sin personalidad. Estamos en Vitoria-Gasteiz y 
                        trabajamos con clientes de todo el país.
                    </p>
                    <a href="https://carontestudio.com/" target="_blank">Descúbrenos</a>
                </div>
            </section>
        </main>
        <script>
            const colorSwitch = document.querySelector('#switch input[type="checkbox"]');
            function cambiaTema(ev){
                if(ev.target.checked){
                    document.documentElement.setAttribute('tema', 'dark');
                } else {
                    document.documentElement.setAttribute('tema', 'light');
                }
            }
            colorSwitch.addEventListener('change', cambiaTema);
        </script>

Nuestro código JavaScript se compone de tres partes:

1. En la primera línea de código declaramos una constante y le asignamos como valor la llamada a la función querySelector(). Le indicamos la referencia a las etiquetas <label> e <input>. Es decir, pondremos en los paréntesis la referencia a nuestro botón de cambio de tema.
2. Creamos una función que reciba un evento como argumento, nosotros la hemos llamado cambiaColor(). Dentro de la función definimos que si el botón está en «on», se establece un atributo del documento con valor «dark». De lo contrario, se establece dicho atributo con valor «light».
3. Definimos el evento con la función addEventListener() y le pasamos los valores change y el nombre de la función que hemos creado. De esta manera, cuando nuestro botón cambie entre on y off, llamaremos a la función que cambia el atributo del documento. Recordemos que en función de dicho atributo, en CSS hemos definido variables diferentes.

Conclusiones

Has visto cómo añadir un tema oscuro con CSS y JavaScript de una forma sencilla. Simplemente tienes que crear un botón, definir las propiedades que deseas que cambien como variables CSS, y definir un script como el que te he mostrado.

Espero que te haya servido de ayuda. Si quieres aportar algo, por favor, no dudes en dejarme un comentario en esta publicación.

¡Te espero en el siguiente artículo!