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
Agregado en v5.3.0
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)
.
¡Atención! Existe cierta confusión potencial con nuestros nuevos colores secundarios y terciarios, y nuestro color de tema secundario existente, así como nuestros colores de tema claro y oscuro. Esperamos que esto se solucione en v6.
Descripción | Swatch | Variables |
---|---|---|
Body — primer plano (color) y fondo predeterminados, incluidos los componentes. | --bs-body-color --bs-body-color-rgb | |
--bs-body-bg --bs-body-bg-rgb | ||
Secondary — utiliza la opción color para texto más claro. Utiliza la opción bg para divisores y para indicar estados de componentes deshabilitados. | --bs-secondary-color --bs-secondary-color-rgb | |
--bs-secondary-bg --bs-secondary-bg-rgb | ||
Tertiary — utiliza la opción color para obtener un texto aún más claro. Utiliza la opción bg para dar estilos a fondos para estados hover, acentuados y hundidos. | --bs-tertiary-color --bs-tertiary-color-rgb | |
--bs-tertiary-bg --bs-tertiary-bg-rgb | ||
Emphasis — para texto con mayor contraste. No aplicable para fondos. | --bs-emphasis-color --bs-emphasis-color-rgb | |
Border — para bordes, divisores y reglas de componentes. Utiliza --bs-border-color-translucent para mezclar con fondos con un valor rgba() . | --bs-border-color --bs-border-color-rgb | |
Primary — color del tema principal, utilizado para hipervínculos, estilos de enfoque y estados activos de componentes y formularios. | --bs-primary --bs-primary-rgb | |
--bs-primary-bg-subtle | ||
--bs-primary-border-subtle | ||
Texto | --bs-primary-text-emphasis | |
Success — color del tema utilizado para información y acciones positivas o exitosas. | --bs-success --bs-success-rgb | |
--bs-success-bg-subtle | ||
--bs-success-border-subtle | ||
Texto | --bs-success-text-emphasis | |
Danger — color del tema utilizado para errores y acciones peligrosas. | --bs-danger --bs-danger-rgb | |
--bs-danger-bg-subtle | ||
--bs-danger-border-subtle | ||
Texto | --bs-danger-text-emphasis | |
Warning — color del tema utilizado para mensajes de advertencia no destructivos. | --bs-warning --bs-warning-rgb | |
--bs-warning-bg-subtle | ||
--bs-warning-border-subtle | ||
Texto | --bs-warning-text-emphasis | |
Info — color del tema utilizado para contenido neutral e informativo. | --bs-info --bs-info-rgb | |
--bs-info-bg-subtle | ||
--bs-info-border-subtle | ||
Texto | --bs-info-text-emphasis | |
Light — Opción de tema adicional para colores menos contrastantes. | --bs-light --bs-light-rgb | |
--bs-light-bg-subtle | ||
--bs-light-border-subtle | ||
Texto | --bs-light-text-emphasis | |
Dark — opción de tema adicional para colores de mayor contraste. | --bs-dark --bs-dark-rgb | |
--bs-dark-bg-subtle | ||
--bs-dark-border-subtle | ||
Texto | --bs-dark-text-emphasis |
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
.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
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.
$blue #0d6efd
$blue-100
$blue-200
$blue-300
$blue-400
$blue-500
$blue-600
$blue-700
$blue-800
$blue-900
$indigo #6610f2
$indigo-100
$indigo-200
$indigo-300
$indigo-400
$indigo-500
$indigo-600
$indigo-700
$indigo-800
$indigo-900
$purple #6f42c1
$purple-100
$purple-200
$purple-300
$purple-400
$purple-500
$purple-600
$purple-700
$purple-800
$purple-900
$pink #d63384
$pink-100
$pink-200
$pink-300
$pink-400
$pink-500
$pink-600
$pink-700
$pink-800
$pink-900
$red #dc3545
$red-100
$red-200
$red-300
$red-400
$red-500
$red-600
$red-700
$red-800
$red-900
$orange #fd7e14
$orange-100
$orange-200
$orange-300
$orange-400
$orange-500
$orange-600
$orange-700
$orange-800
$orange-900
$yellow #ffc107
$yellow-100
$yellow-200
$yellow-300
$yellow-400
$yellow-500
$yellow-600
$yellow-700
$yellow-800
$yellow-900
$green #198754
$green-100
$green-200
$green-300
$green-400
$green-500
$green-600
$green-700
$green-800
$green-900
$teal #20c997
$teal-100
$teal-200
$teal-300
$teal-400
$teal-500
$teal-600
$teal-700
$teal-800
$teal-900
$cyan #0dcaf0
$cyan-100
$cyan-200
$cyan-300
$cyan-400
$cyan-500
$cyan-600
$cyan-700
$cyan-800
$cyan-900
$gray-500 #adb5bd
$gray-100
$gray-200
$gray-300
$gray-400
$gray-500
$gray-600
$gray-700
$gray-800
$gray-900
$black #000
$white #fff
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
Agregado en v5.1.0
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.
- Para comenzar, asegúrate de haber importado nuestras funciones, variables, mixins y utilidades.
- Utiliza nuestra función
map-merge-multiple()
para fusionar rápidamente varios mapas de Sass en un nuevo mapa. - 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.