Cómo crear un tema en modo oscuro usando variables CSS

Introducción

Es posible que hayas notado que en muchos sitios web ahora puedes alternar entre temas oscuros y claros. Esto se hace a menudo mediante propiedades personalizadas de CSS (también conocidas como variables de CSS). En este tutorial, verás cómo puedes lograr algo similar utilizando solo CSS y un toque de JavaScript. Para obtener más información sobre cómo funciona este código, consulta el contenido de nuestra serie sobre Javascript o HTML.

Paso 1: creación de las variables CSS

El poder de las propiedades personalizadas en CSS realmente se destaca aquí porque, a diferencia de las variables definidas mediante un preprocesador CSS, estos valores son dinámicos; sus valores se pueden cambiar o sobrescribir en cualquier momento en respuesta a la entrada del usuario. Cuando se cambia o sobrescribe el valor de una variable, todos los elementos que usan la variable reflejarán automáticamente el cambio.

Primero tendrás que trabajar un poco y extraer todos los colores que quieres usar en tus propiedades CSS personalizadas. Supongamos que empiezas con los siguientes estilos:

estilo.css

body {  background: white;  color: #555;}a, a:link {  color: #639A67;}a:hover {  color: #205D67;}

A continuación, definirá las propiedades personalizadas de la siguiente manera:

estilo.css

:root {  --bg: white;  --text-color: #555;  --link-color: #639A67;  --link-hover: #205D67;}

Con esto en su lugar, ahora puede cambiar sus reglas CSS a algo como lo siguiente:

estilo.css

body {  background: var(--bg);  color: var(--text-color);}a, a:link {  color: var(--link-color);}a:hover {  color: var(--link-hover);}

Para aplicar el tema, se debe agregar una clase al elemento del cuerpo, por lo que definirá los colores del tema con ese nombre de clase. Aquí, llamaremos a la clase funky. Simplemente asegúrese de definir un color de reemplazo para todos los colores que deban cambiar:

estilo.css

.funky {  --bg: hotpink;  --text-color: white;  --link-color: #B793E6;  --link-hover: #3532A7;}

Paso 2: agregar alternativas para navegadores más antiguos

El soporte para propiedades CSS personalizadas es bastante bueno, pero probablemente querrás incluir alternativas para los usuarios que usan navegadores más antiguos.

Supongamos que tenemos un elemento que debería tener un fondo con degradado lineal con colores definidos como propiedades personalizadas. Primero, se proporcionan los colores codificados y los navegadores más antiguos ignorarán la versión que no comprendan:

estilo.css

background: linear-gradient(to right, #FFFB85, #5A3662); /* our fallback */background: linear-gradient(to right, var(--top-grad1), var(--top-grad2));

Paso 3: Activar o desactivar nuestro tema

Solo necesitamos una cantidad mínima de JavaScript para agregar un detector de eventos en un elemento que actúe como botón de alternancia entre los dos temas.

Aquí el botón de alternancia tiene la toggle-themeclase y lo usamos document.querySelectorpara obtener una referencia a ese elemento:

aplicación.js

let toggle = document.querySelector('.toggle-theme');toggle.addEventListener('click', function(e) {  e.preventDefault();  if (document.body.classList.contains('funky')) {    // Turning the theme off:    document.body.classList.remove('funky');    // Reverse logic on the button text, so that users can turn    // the theme back on:    toggle.innerText = 'Turn theme on';  } else {    document.body.classList.add('funky');    toggle.innerText = 'Turn theme off';  }});

Esto permite alternar entre los dos temas. Podemos hacerlo mejor y también agregar o eliminar un elemento de localStorage al mismo tiempo para que nuestro tema se aplique automáticamente cuando se cargue la página:

aplicación.js

let toggle = document.querySelector('.toggle-theme');// Turn the theme off if the 'funky' key exists in localStorageif (localStorage.getItem('funky')) {  document.body.classList.add('funky');  toggle.innerText = 'Turn theme off';}toggle.addEventListener('click', function(e) {  e.preventDefault();  if (document.body.classList.contains('funky')) {    document.body.classList.remove('funky');    toggle.innerText = 'Turn theme on';    localStorage.removeItem('funky');  } else {    document.body.classList.add('funky');    toggle.innerText = 'Turn theme off';    localStorage.setItem('funky', true);  }});

Puedes usar este pequeño fragmento y variables CSS para crear sitios web temáticos como este, con modos oscuros, modos claros y más.

Conclusión

En este tutorial, creaste un sitio web temático que tiene un modo oscuro y uno claro. Para obtener más información sobre cómo funciona este código, consulta el contenido de nuestra serie sobre Javascript o HTML.