Cores do Tema

O conceito

As cores do Bootstrap não são cores: são papéis. primary não quer dizer "azul", quer dizer "a cor principal da sua marca". danger não é "vermelho", é "algo deu errado". Por isso um botão se chama btn-primary e não btn-azul — se amanhã a marca virar roxa, o nome da classe continua fazendo sentido.

Trocar uma dessas cores é mexer numa variável Sass antes de importar o Bootstrap. Uma linha, e todos os componentes que usam aquele papel mudam de uma vez:

// no seu main.scss
@use 'bootstrap/scss/bootstrap' with (
  $primary: #6366f1,
  $danger:  #dc3545
);

O Bootstrap então deriva o resto sozinho: o tom de hover (a cor escurecida um pouco), o de clique (mais escurecida ainda) e — o detalhe mais interessante — a cor do texto que vai por cima.

Essa escolha do texto tem uma regra que surpreende: ela não pega simplesmente o que contrasta mais. O Bootstrap tenta o branco primeiro e fica com ele se passar de 4.5:1 — a razão mínima de contraste da WCAG. Só se o branco não alcançar é que ele tenta o preto. Repare na tabela mais abaixo: arraste uma cor até o limite e veja o texto virar.

O que o Bootstrap deriva de cada cor