Color

Colors temàtics

Utilitzem un subconjunt de tots els colors per crear una paleta de colors més petita per generar esquemes de colors, també disponible com a variables Sass i un mapa Sass al scss/_variables.scssfitxer de Bootstrap.

Tots aquests colors estan disponibles com a mapa Sass, $theme-colors.

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

Consulteu els nostres mapes i documents de bucles Sass per saber com modificar aquests colors.

Tots els colors

Tots els colors de Bootstrap estan disponibles com a variables Sass i un mapa Sass al scss/_variables.scssfitxer. Per evitar un augment de la mida dels fitxers, no creem classes de text ni de color de fons per a cadascuna d'aquestes variables. En lloc d'això, triem un subconjunt d'aquests colors per a una paleta de temes .

Assegureu-vos de controlar les relacions de contrast mentre personalitzeu els colors. Com es mostra a continuació, hem afegit tres relacions de contrast a cadascun dels colors principals: una per als colors actuals de la mostra, una per al blanc i una altra per al negre.

Notes sobre Sass

Sass no pot generar variables de manera programàtica, de manera que hem creat manualment variables per a cada to i ombra nosaltres mateixos. Especifiquem el valor del punt mitjà (per exemple, $blue-500) i utilitzem funcions de color personalitzades per tenyir (aclarir) o ombrejar (enfosquir) els nostres colors mitjançant la mix()funció de color de Sass.

L'ús mix()no és el mateix que lighten()i darken(): el primer combina el color especificat amb el blanc o el negre, mentre que el segon només ajusta el valor de lluminositat de cada color. El resultat és un conjunt de colors molt més complet, tal com es mostra en aquesta demostració de CodePen .

Les nostres funcions tint-color()i shade-color()s'utilitzen mix()juntament amb la nostra $theme-color-intervalvariable, que especifica un valor percentual escalonat per a cada color barrejat que produïm. Vegeu els fitxers scss/_functions.scssi scss/_variables.scssper al codi font complet.

Mapes de color Sass

Els fitxers Sass d'origen de Bootstrap inclouen tres mapes per ajudar-vos a fer un bucle ràpid i senzill sobre una llista de colors i els seus valors hexadecimals.

• $colorsllista tots els nostres 500colors base ( ) disponibles
• $theme-colorsllista tots els colors del tema amb nom semàntic (que es mostren a continuació)
• $graysenumera tots els tons i matisos de gris

Dins scss/_variables.scssde , trobareu les variables de color de Bootstrap i el mapa Sass. Aquí teniu un exemple del $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
);

Afegiu, elimineu o modifiqueu valors dins del mapa per actualitzar com s'utilitzen en molts altres components. Malauradament, en aquest moment, no tots els components utilitzen aquest mapa Sass. Les futures actualitzacions s'esforçaran per millorar-ho. Fins aleshores, planifiqueu fer ús de les ${color}variables i d'aquest mapa Sass.

Exemple

A continuació us indiquem com podeu utilitzar-los al vostre Sass:

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

Les classes d'utilitat de color i fonscolor també estan disponibles per configurar i background-colorutilitzar els 500valors de color.

Generació d'utilitats

Bootstrap no inclou utilitats colorper background-colora cada variable de color, però les podeu generar vosaltres mateixos amb la nostra API d'utilitats i els nostres mapes Sass ampliats afegits a la v5.1.0.

1. Per començar, assegureu-vos que heu importat les nostres funcions, variables, mixins i utilitats.
2. Utilitzeu la nostra map-merge-multiple()funció per combinar ràpidament diversos mapes Sass en un mapa nou.
3. Combina aquest nou mapa combinat per ampliar qualsevol utilitat amb un {color}-{level}nom de classe.

Aquí teniu un exemple que genera utilitats de color de text (per exemple, .text-purple-500) mitjançant els passos anteriors.

@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";

Això generarà noves .text-{color}-{level}utilitats per a cada color i nivell. També podeu fer el mateix per a qualsevol altra utilitat i propietat.