Ejemplo para usar variables CSS para personalizar colores

En CSS, las variables te permiten almacenar valores reutilizables, lo que facilita mucho el manejo de colores en un proyecto. Las variables CSS también se conocen como "propiedades personalizadas" y son especialmente útiles para gestionar colores en un sitio web, ya que permiten hacer ajustes de diseño sin tener que cambiar cada color manualmente.

¿Qué son las variables CSS?

Las variables CSS son valores que puedes definir una sola vez y reutilizar en cualquier lugar de tu hoja de estilos. Se crean con un prefijo doble guion (--) y pueden ser utilizadas en todo el documento o en secciones específicas.

Paso 1: Definir Variables de Color

Para definir variables CSS para colores, añade el código dentro de un selector :root (representa el elemento raíz del documento) para que tus variables estén disponibles globalmente en toda la página.

css
:root {
  --color-primario: #3498db;
  --color-secundario: #2ecc71;
  --color-fondo: #f5f5f5;
  --color-texto: #333333;
}

En este ejemplo, hemos definido cuatro variables de color:

--color-primario: se usará para los elementos principales.
--color-secundario: para destacar o contrastar elementos.
--color-fondo: color de fondo de la página.
--color-texto: color del texto.

Paso 2: Usar las Variables en tus Estilos CSS

Una vez definidas las variables, podemos utilizarlas en cualquier parte del CSS. Para llamar a una variable, usa la función var(), y dentro de los paréntesis coloca el nombre de la variable.

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

header {
  background-color: var(--color-primario);
}

button {
  background-color: var(--color-secundario);
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

button:hover {
  background-color: var(--color-primario);
}

Paso 3: Ventajas de Usar Variables CSS para Colores

Mantenimiento fácil: Si necesitas cambiar el color principal de tu sitio, solo cambias el valor de --color-primario en la definición de las variables. Automáticamente, todos los elementos que usan esta variable se actualizarán.
Consistencia en el diseño: Definir variables de color ayuda a mantener una paleta de colores uniforme a lo largo de tu sitio, lo que mejora la experiencia visual.
Facilidad de personalización: Las variables CSS pueden adaptarse según las necesidades del usuario o del tema. Esto es especialmente útil en sitios con múltiples temas, donde cambiar de tema solo requiere actualizar el valor de las variables.

Ejemplo Completo

A continuación, un ejemplo completo del HTML y CSS para ver cómo funcionan las variables de color en acción:

HTML

html
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Uso de Variables CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Bienvenido a nuestro sitio</h1>
  </header>
  <main>
    <p>Este es un ejemplo de cómo usar variables CSS para personalizar colores en tu sitio web.</p>
    <button>Leer Más</button>
  </main>
</body>
</html>

CSS (`styles.css`)

css
:root {
  --color-primario: #3498db;
  --color-secundario: #2ecc71;
  --color-fondo: #f5f5f5;
  --color-texto: #333333;
}

body {
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: var(--color-primario);
  color: #ffffff;
  padding: 20px;
  text-align: center;
}

button {
  background-color: var(--color-secundario);
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: var(--color-primario);
}

Resultado Final

Con este código, tendrás una página sencilla con una paleta de colores personalizada. La ventaja es que cualquier cambio de color se puede hacer fácilmente editando las variables en el selector :root.

Conclusión

Usar variables CSS para personalizar colores no solo mejora la organización de tu código, sino que también facilita los ajustes de diseño en tu sitio. Las variables CSS son una herramienta poderosa que te permitirá crear estilos consistentes y mantenibles.

Programación y Ejemplos

Buscar este blog