¿Cómo usar CSS variables para dark mode?

En este artículo, aprenderás cómo utilizar variables de CSS para implementar un modo oscuro en tu página web. Las variables de CSS te permitirán cambiar fácilmente los colores y estilos de tu diseño, lo que te facilitará la tarea de crear un tema oscuro para tus usuarios. ¡Sigue leyendo para descubrir cómo puedes mejorar la experiencia de tus visitantes con un simple ajuste en tu código CSS!

El modo oscuro se ha vuelto cada vez más popular en los últimos años, ya que ofrece a los usuarios una alternativa a la interfaz brillante y tradicional. Además de proporcionar una estética atractiva, el modo oscuro también puede reducir la fatiga visual y ahorrar energía en dispositivos con pantalla OLED. En este artículo, aprenderás cómo utilizar las variables CSS para implementar el modo oscuro en tu sitio web.

¿Qué son las variables CSS?

Las variables CSS, también conocidas como CSS Custom Properties, son contenedores que almacenan valores y se utilizan para reutilizar estilos en toda una página web. Con las variables CSS, puedes definir un valor una vez y luego reutilizarlo en diferentes lugares de tu código CSS.

Para definir una variable CSS, debes utilizar la siguiente sintaxis:

:root {
  --nombre-variable: valor;
}

El prefijo «–» indica que estás creando una variable CSS. Después del nombre de la variable, debes asignarle un valor específico.

Usando variables CSS para el modo oscuro

El modo oscuro se basa en cambiar el esquema de colores de la interfaz para utilizar tonos oscuros en lugar de tonos claros. Para lograr esto mediante el uso de variables CSS, primero debes definir las variables que contendrán los colores para los elementos de tu sitio web en modo oscuro.

Por ejemplo, podrías definir las siguientes variables:

:root {
  --color-fondo: #181818;
  --color-texto: #ffffff;
  --color-enlace: #579ace;
}

En este caso, la variable «–color-fondo» contiene el color de fondo para el modo oscuro, la variable «–color-texto» contiene el color del texto en modo oscuro, y la variable «–color-enlace» contiene el color de los enlaces en el modo oscuro.

A continuación, debes utilizar estas variables en tu CSS para aplicar los estilos correctos en modo oscuro. Puedes hacerlo mediante el uso de la función «var()» en lugar de valores de color fijos.

body {
  background-color: var(--color-fondo);
  color: var(--color-texto);
}

a {
  color: var(--color-enlace);
}

De esta manera, cuando el sitio web esté en modo oscuro, se aplicarán los colores definidos en las variables CSS en lugar de los colores predeterminados.

Cambiando al modo oscuro

Para implementar un interruptor de modo oscuro en tu sitio web, puedes utilizar JavaScript para cambiar el valor de las variables CSS cuando el usuario active o desactive el modo oscuro.

Por ejemplo, podrías tener un botón con el siguiente HTML:

<button onclick="activarModoOscuro()">Activar modo oscuro</button>

Luego, en tu JavaScript, deberías tener una función como esta:

function activarModoOscuro() {
  var root = document.documentElement;
  root.style.setProperty('--color-fondo', '#181818');
  root.style.setProperty('--color-texto', '#ffffff');
  root.style.setProperty('--color-enlace', '#579ace');
}

Esta función cambiará los valores de las variables CSS cuando el usuario active el modo oscuro.

Recuerda que para un mejor SEO, es importante que tu sitio web sea accesible para todos los usuarios. Por lo tanto, asegúrate de tener un interruptor visible y fácilmente accesible para cambiar entre el modo oscuro y el modo claro.

Ahora que conoces cómo utilizar las variables CSS para implementar el modo oscuro en tu sitio web, puedes hacer que tu página sea más atractiva y personalizable. ¡Experimenta con diferentes colores y estilos para encontrar el aspecto que mejor se adapte a tu marca!

Esperamos que este artículo te haya sido útil en tu aprendizaje sobre CSS variables y su uso para implementar el modo oscuro en tus proyectos web.

¡No dudes en compartir tus resultados y experiencias con nosotros! ¿Qué otros usos das a las variables CSS?

Utilizar variables de CSS para implementar el modo oscuro es una práctica eficaz y sencilla que permite personalizar el diseño de un sitio web de manera flexible y eficiente. Esta técnica simplifica la gestión del color y la apariencia de la interfaz, mejorando la experiencia del usuario y facilitando la adaptación a diferentes preferencias visuales. ¡Anímate a implementar CSS variables para dark mode en tus proyectos web!