Color

Colores

La paleta de colores de Bootstrap ha seguido expandiéndose y volviéndose más matizada en v5.3.0. Hemos añadido nuevas variables para colores de texto y fondo secondary y tertiary, además de {color}-bg-subtle, {color}-border-subtle y {color}-text-emphasis para nuestros colores de tema. Estos nuevos colores están disponibles a través de variables Sass y CSS (pero no en nuestros mapas de colores o clases utilitarias) con el objetivo expreso de facilitar la personalización a través de múltiples modos de color como claro y oscuro. Estas nuevas variables están establecidas globalmente en :root y están adaptadas para nuestro nuevo modo de color oscuro mientras que nuestros colores de tema originales permanecen sin cambios.

Los colores que terminan en -rgb proporcionan los valores red, green, blue para usar en los modos de color rgb() y rgba(). Por ejemplo, rgba(var(--bs-secondary-bg-rgb), .5).

Usando los nuevos colores

Estos nuevos colores son accesibles vía variables CSS y clases utilitarias—como --bs-primary-bg-subtle y .bg-primary-subtle—permitiéndote componer tus propias reglas CSS con las variables, o aplicar estilos rápidamente vía clases. Las utilidades se construyen con las variables CSS asociadas al color, y como personalizamos esas variables CSS para el modo oscuro, también se adaptan al modo de color por defecto.

<div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3">
  Example element with utilities
</div>

Colores de tema

Usamos un subconjunto de todos los colores para crear una paleta de colores más pequeña para generar esquemas de color, también disponibles como variables Sass y un Sass map en el archivo scss/_variables.scss de Bootstrap.

Todos estos colores están disponibles como un Sass map, $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Consulta nuestra documentación de Sass maps y loops para saber cómo modificar estos colores.

Todos los colores

Todos los colores de Bootstrap están disponibles como variables Sass y un Sass map en el archivo scss/_variables.scss. Para evitar un aumento del tamaño de los archivos, no creamos clases de color de texto o fondo para cada una de estas variables. En su lugar, elegimos un subconjunto de estos colores para una paleta del tema.

Asegúrate de monitorear las relaciones de contraste al personalizar los colores. Como se muestra a continuación, hemos añadido tres relaciones de contraste a cada uno de los colores principales—una para los colores actuales de la muestra, una contra el blanco y una contra el negro.

Notas sobre Sass

Sass no puede generar variables programáticamente, así que creamos manualmente las variables para cada tinte y sombra. Especificamos el valor del punto medio (p. ej., $blue-500) y usamos funciones de color personalizadas para teñir (aclarar) u oscurecer nuestros colores mediante la función de color mix() de Sass.

Usar mix() no es lo mismo que lighten() y darken()—el primero mezcla el color especificado con blanco o negro, mientras que los últimos solo ajustan el valor de luminosidad de cada color. El resultado es un conjunto de colores mucho más completo, como se muestra en esta demo de CodePen.

Nuestras funciones tint-color() y shade-color() usan mix() junto con nuestra variable $theme-color-interval, que especifica un valor porcentual escalonado para cada color mezclado que producimos. Consulta los archivos scss/_functions.scss y scss/_variables.scss para el código fuente completo.

Mapas de colores Sass

Los archivos fuente Sass de Bootstrap incluyen tres maps para ayudarte a recorrer rápidamente y de forma sencilla una lista de colores y sus valores hexadecimales.

• $colors lista todos nuestros colores base (500) disponibles
• $theme-colors lista todos los colores del tema con nombre semántico (mostrados a continuación)
• $grays lista todos los tintes y sombras de gris

Dentro de scss/_variables.scss, encontrarás las variables de color y el Sass map de Bootstrap. Aquí hay un ejemplo del Sass map $colors:

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "black":      $black,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

Añade, elimina o modifica valores dentro del map para actualizar cómo se usan en muchos otros componentes. Lamentablemente, en este momento, no todos los componentes utilizan este Sass map. Las futuras actualizaciones se esforzarán por mejorar esto. Hasta entonces, planea usar las variables ${color} y este Sass map.

Ejemplo

Así es como puedes usarlos en tu Sass:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

Las clases utilitarias de color y fondo también están disponibles para establecer color y background-color usando los valores de color 500.

Generando utilidades

Bootstrap no incluye utilidades de color y background-color para cada variable de color, pero puedes generarlas tú mismo con nuestra API de utilidades y nuestros mapas Sass extendidos añadidos en v5.1.0.

1. Para empezar, asegúrate de haber importado nuestras funciones, variables, mixins, y utilidades.
2. Usa nuestra función map-merge-multiple() para combinar rápidamente múltiples mapas Sass en un nuevo mapa.
3. Combina este nuevo mapa para extender cualquier utilidad con un nombre de clase {color}-{level}.

Aquí hay un ejemplo que genera utilidades de color de texto (p. ej., .text-purple-500) usando los pasos anteriores.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Esto generará nuevas utilidades .text-{color}-{level} para cada color y nivel. Puedes hacer lo mismo para cualquier otra utilidad y propiedad.