Cor

Cores temáticas

Usamos un subconxunto de todas as cores para crear unha paleta de cores máis pequena para xerar esquemas de cores, tamén dispoñible como variables Sass e un mapa Sass no scss/_variables.scssficheiro de Bootstrap.

Todas estas cores están dispoñibles como mapa Sass, $theme-colors.

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

Consulta os nosos mapas e documentos de bucles de Sass para saber como modificar estas cores.

Todas as cores

Todas as cores de Bootstrap están dispoñibles como variables Sass e un mapa Sass no scss/_variables.scssficheiro. Para evitar o aumento do tamaño dos ficheiros, non creamos clases de texto nin de cor de fondo para cada unha destas variables. Pola contra, escollemos un subconxunto destas cores para unha paleta de temas .

Asegúrate de controlar as relacións de contraste mentres personalizas as cores. Como se mostra a continuación, engadimos tres relacións de contraste a cada unha das cores principais: unha para as cores actuais da mostra, outra para o branco e outra para o negro.

Notas sobre Sass

Sass non pode xerar variables mediante programación, polo que creamos manualmente variables para cada matiz e sombra. Especificamos o valor do punto medio (por exemplo, $blue-500) e usamos funcións de cor personalizadas para matizar (clarecer) ou sombrear (escurecer) as nosas cores mediante a mix()función de cor de Sass.

Usar mix()non é o mesmo que lighten()e darken()—o primeiro mestura a cor especificada con branco ou negro, mentres que o segundo só axusta o valor de claridade de cada cor. O resultado é un conxunto de cores moito máis completo, como se mostra nesta demostración de CodePen .

As nosas funcións tint-color()e úsanse xunto á nosa variable, que especifica un valor porcentual escalonado para cada cor mesturada que producimos. Consulte os ficheiros e para o código fonte completo.shade-color()mix()$theme-color-intervalscss/_functions.scssscss/_variables.scss

Mapas Sass en cor

Os ficheiros Sass de orixe de Bootstrap inclúen tres mapas para axudarche a recorrer rápida e facilmente unha lista de cores e os seus valores hexadecimales.

• $colorsenumera todas as nosas 500cores base ( ) dispoñibles
• $theme-colorslista todas as cores do tema con nomes semánticos (mostradas a continuación)
• $graysenumera todos os tons e tons de gris

Dentro scss/_variables.scssde , atoparás as variables de cor de Bootstrap e o mapa de Sass. Aquí tes un exemplo do $colorsmapa Sass:

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

Engade, elimina ou modifica valores dentro do mapa para actualizar a forma en que se usan noutros compoñentes. Desafortunadamente, neste momento, non todos os compoñentes utilizan este mapa Sass. As futuras actualizacións procurarán mellorar isto. Ata entón, planea facer uso das ${color}variables e deste mapa de Sass.

Exemplo

Aquí tes como podes usalos no teu Sass:

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

Tamén están dispoñibles as clases de utilidade de cor e fondocolor para configurar e background-colorusar os 500valores de cor.

Xeración de utilidades

Bootstrap non inclúe colore background-colorutilidades para cada variable de cor, pero pode xeralas vostede mesmo coa nosa API de utilidades e os nosos mapas Sass estendidos engadidos na versión 5.1.0.

1. Para comezar, asegúrate de importar as nosas funcións, variables, mixins e utilidades.
2. Usa a nosa map-merge-multiple()función para combinar rapidamente varios mapas Sass nun novo mapa.
3. Combina este novo mapa combinado para ampliar calquera utilidade cun {color}-{level}nome de clase.

Aquí tes un exemplo que xera utilidades de cor de texto (por exemplo, .text-purple-500) usando os pasos anteriores.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@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";

Isto xerará novas .text-{color}-{level}utilidades para cada cor e nivel. Tamén podes facer o mesmo con calquera outra utilidade e propiedade.