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 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 de Sass y un mapa de Sass en el scss/_variables.scss
archivo de Bootstrap.
Todos estos colores están disponibles como mapa Sass, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Consulte nuestros documentos 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 de Sass y un mapa de Sass en scss/_variables.scss
el archivo. Para evitar aumentar el tamaño de los archivos, no creamos clases de color de texto o de fondo para cada una de estas variables. En su lugar, elegimos un subconjunto de estos colores para una paleta temática .
Asegúrese de controlar las relaciones de contraste a medida que personaliza los colores. Como se muestra a continuación, hemos agregado tres proporciones de contraste a cada uno de los colores principales: una para los colores actuales de la muestra, una contra el blanco y otra contra el negro.
Notas sobre Sass
Sass no puede generar variables programáticamente, por lo que creamos variables manualmente para cada tinte y sombreado nosotros mismos. Especificamos el valor del punto medio (p. ej., $blue-500
) y usamos funciones de color personalizadas para teñir (aclarar) o sombrear (oscurecer) nuestros colores a través de mix()
la función de color 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 .
Nuestras funciones tint-color()
y shade-color()
se usan mix()
junto con nuestra $theme-color-interval
variable, que especifica un valor porcentual escalonado para cada color mixto que producimos. Consulte los archivos scss/_functions.scss
y scss/_variables.scss
para obtener el código fuente completo.
Mapas Sass en color
Los archivos Sass de origen de Bootstrap incluyen tres mapas para ayudarlo a recorrer rápida y fácilmente una lista de colores y sus valores hexadecimales.
$colors
enumera todos nuestros500
colores base ( ) disponibles$theme-colors
enumera todos los colores del tema con nombres semánticos (que se muestran a continuación)$grays
enumera todos los tintes y tonos de gris
Dentro scss/_variables.scss
de , encontrará las variables de color de Bootstrap y el mapa de Sass. Aquí hay un ejemplo del $colors
mapa Sass:
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
);
Agregue, elimine o modifique 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 de Sass. Las actualizaciones futuras se esforzarán por mejorar esto. Hasta entonces, planee hacer uso de las ${color}
variables y este mapa de Sass.
Ejemplo
Así es como puede usarlos en su Sass:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Las clases de utilidad de color y fondocolor
también están disponibles para configurar y background-color
usar los 500
valores de color.