Color

Bootstrap está respaldado por un extenso sistema de colores que tematiza nuestros estilos y componentes. Esto permite una personalización y extensión más completas para cualquier proyecto.

Colores

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

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

Usando los nuevos colores

Se puede acceder a estos nuevos colores a través de variables CSS y clases de utilidad, como --bs-primary-bg-subtle y .bg-primary-subtle: te permite componer tus propias reglas CSS con las variables o aplicar estilos rápidamente a través de clases. Las utilidades se crean con las variables CSS asociadas al color y, dado que personalizamos esas variables CSS para el modo oscuro, también se adaptan al modo de color de forma predeterminada.

<div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3">
    Ejemplo de elemento con utilidades
</div>

Colores del 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 disponible como variables Sass y un mapa Sass en el archivo scss/_variables.scss.

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

scss/_variables.scss (opens in a new tab)

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

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

Todos los colores

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

Asegúrate de controlar las relaciones de contraste mientras personalizas los colores. Como se muestra a continuación, hemos agregado tres relaciones de contraste a cada uno de los colores principales: una para los colores actuales de la muestra, otra para el blanco y otra para el negro.

Notas sobre Sass

Sass no puede generar variables mediante programación, por lo que nosotros mismos creamos variables manualmente para cada tinte y tono. Especificamos el valor del punto medio (por ejemplo, $blue-500) y utilizamos funciones de color personalizadas para teñir (aclarar) o sombrear (oscurecer) nuestros colores a través de la función de color mix() de Sass.

Usar mix() no es lo mismo que lighten() y darken()— el primero combina el color especificado con blanco o negro, mientras que el segundo solo ajusta el valor de luminosidad de cada color. El resultado es un conjunto de colores mucho más completo, como se muestra en esta demostración de CodePen (opens in a new tab).

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

Mapas de Color Sass

Los archivos fuente Sass de Bootstrap incluyen tres mapas para ayudarte a recorrer rápida y fácilmente una lista de colores y sus valores hexadecimales.

• $colors enumera todos nuestros colores base disponibles (500)
• $theme-colors enumera todos los colores de tema con nombres semánticos (que se muestran a continuación)
• $grays enumera todos los tintes y tonos de grises

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

scss/_variables.scss (opens in a new tab)

$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
);

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

Ejemplo

Así es como puedes usarlos en tu Sass:

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

Color y background son clases de utilidad que también están disponibles para configurar color y background-color usando 500 los valores de color.

Generando utilidades

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

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

Aquí tienes un ejemplo que genera utilidades de color de texto (por ejemplo, .text-purple-500) siguiendo 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. También puedes hacer lo mismo con cualquier otro servicio público y propiedad.