Cor
O Bootstrap é suportado por um extenso sistema de cores que tem como tema nossos estilos e componentes. Isso permite uma personalização e extensão mais abrangentes para qualquer projeto.
Cores do tema
Usamos um subconjunto de todas as cores para criar uma paleta de cores menor para gerar esquemas de cores, também disponíveis como variáveis Sass e um mapa Sass no scss/_variables.scss
arquivo do Bootstrap.
Todas essas cores estão disponíveis como um mapa Sass, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Confira nossos mapas Sass e documentos de loops para saber como modificar essas cores.
Todas as cores
Todas as cores do Bootstrap estão disponíveis como variáveis Sass e um mapa Sass no scss/_variables.scss
arquivo. Para evitar tamanhos de arquivo maiores, não criamos classes de cores de texto ou de fundo para cada uma dessas variáveis. Em vez disso, escolhemos um subconjunto dessas cores para uma paleta de temas .
Certifique-se de monitorar as taxas de contraste ao personalizar as cores. Conforme mostrado abaixo, adicionamos três taxas de contraste a cada uma das cores principais – uma para as cores atuais da amostra, uma para o branco e outra para o preto.
Notas sobre Sass
Sass não pode gerar variáveis programaticamente, então nós mesmos criamos variáveis manualmente para cada tonalidade e sombra. Especificamos o valor do ponto médio (por exemplo, $blue-500
) e usamos funções de cores personalizadas para tingir (clarear) ou sombrear (escurecer) nossas cores por meio da mix()
função de cor do Sass.
Usar mix()
não é o mesmo que lighten()
e darken()
—o primeiro combina a cor especificada com branco ou preto, enquanto o último apenas ajusta o valor de claridade de cada cor. O resultado é um conjunto de cores muito mais completo, conforme mostrado nesta demonstração do CodePen .
Nossas funções tint-color()
e são usadas junto com nossa variável, que especifica um valor percentual escalonado para cada cor misturada que produzimos. Consulte os arquivos e para obter o código-fonte completo.shade-color()
mix()
$theme-color-interval
scss/_functions.scss
scss/_variables.scss
Mapas Sass coloridos
Os arquivos Sass de origem do Bootstrap incluem três mapas para ajudá-lo a percorrer rápida e facilmente uma lista de cores e seus valores hexadecimais.
$colors
500
lista todas as nossas cores de base ( ) disponíveis$theme-colors
lista todas as cores de tema com nome semantico (mostradas abaixo)$grays
lista todos os tons e tons de cinza
Dentro scss/_variables.scss
de , você encontrará as variáveis de cores do Bootstrap e o mapa Sass. Aqui está um exemplo do $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
);
Adicione, remova ou modifique valores no mapa para atualizar como eles são usados em muitos outros componentes. Infelizmente, neste momento, nem todos os componentes utilizam este mapa Sass. Atualizações futuras se esforçarão para melhorar isso. Até lá, planeje fazer uso das ${color}
variáveis e deste mapa Sass.
Exemplo
Veja como você pode usá-los em seu Sass:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
As classes de utilitário de cor e planocolor
de fundo também estão disponíveis para definir e background-color
usar os 500
valores de cor.