Culoare

Culori tematice

Folosim un subset de toate culorile pentru a crea o paletă de culori mai mică pentru a genera scheme de culori, disponibilă și ca variabile Sass și o hartă Sass în scss/_variables.scssfișierul Bootstrap.

Toate aceste culori sunt disponibile ca hartă Sass, $theme-colors.

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

Consultați documentele noastre privind hărțile și buclele Sass pentru a afla cum să modificați aceste culori.

Toate culorile

Toate culorile Bootstrap sunt disponibile ca variabile Sass și o hartă Sass în scss/_variables.scssfișier. Pentru a evita dimensiunile crescute ale fișierelor, nu creăm clase de text sau culori de fundal pentru fiecare dintre aceste variabile. În schimb, alegem un subset din aceste culori pentru o paletă de teme .

Asigurați-vă că monitorizați rapoartele de contrast pe măsură ce personalizați culorile. După cum se arată mai jos, am adăugat trei rapoarte de contrast la fiecare dintre culorile principale - unul pentru culorile curente ale specimenului, unul pentru alb și unul pentru negru.

Note despre Sass

Sass nu poate genera variabile în mod programatic, așa că am creat manual variabile pentru fiecare nuanță și nuanță. Specificăm valoarea punctului de mijloc (de exemplu, $blue-500) și folosim funcții de culoare personalizate pentru a nuanța (lumina) sau a umbri (întuneca) culorile prin intermediul mix()funcției de culoare a lui Sass.

Utilizarea mix()nu este aceeași cu lighten()și darken()— prima îmbină culoarea specificată cu alb sau negru, în timp ce cea din urmă ajustează doar valoarea luminozității fiecărei culori. Rezultatul este o suită mult mai completă de culori, așa cum se arată în această demonstrație CodePen .

Funcțiile noastre tint-color()și shade-color()sunt folosite mix()alături de $theme-color-intervalvariabila noastră, care specifică o valoare procentuală în trepte pentru fiecare culoare mixtă pe care o producem. Consultați fișierele scss/_functions.scssși scss/_variables.scsspentru codul sursă complet.

Hărți color Sass

Fișierele sursă Sass ale Bootstrap includ trei hărți pentru a vă ajuta să treceți rapid și ușor peste o listă de culori și valorile lor hexadecimale.

• $colorslistează toate 500culorile noastre de bază disponibile ( ).
• $theme-colorslistează toate culorile temei denumite semantic (prezentate mai jos)
• $grayslistează toate nuanțele și nuanțele de gri

În scss/_variables.scss, veți găsi variabilele de culoare ale Bootstrap și harta Sass. Iată un exemplu de $colorshartă 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
);

Adăugați, eliminați sau modificați valori în cadrul hărții pentru a actualiza modul în care sunt utilizate în multe alte componente. Din păcate, în acest moment, nu toate componentele utilizează această hartă Sass. Actualizările viitoare se vor strădui să îmbunătățească acest lucru. Până atunci, plănuiți să utilizați ${color}variabilele și această hartă Sass.

Exemplu

Iată cum le puteți folosi în Sass:

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

Clasele utilitare de culoare și de fundalcolor sunt, de asemenea, disponibile pentru setarea și background-colorutilizarea 500valorilor de culoare.

Generarea de utilitati

Bootstrap nu include colorși background-colorutilități pentru fiecare variabilă de culoare, dar le puteți genera singur cu API-ul nostru utilitar și hărțile noastre extinse Sass adăugate în v5.1.0.

1. Pentru a începe, asigurați-vă că ați importat funcțiile, variabilele, mixurile și utilitățile noastre.
2. Utilizați map-merge-multiple()funcția noastră pentru a îmbina rapid mai multe hărți Sass într-o nouă hartă.
3. Îmbinați această nouă hartă combinată pentru a extinde orice utilitar cu un {color}-{level}nume de clasă.

Iată un exemplu care generează utilitare pentru culoarea textului (de exemplu, .text-purple-500) utilizând pașii de mai sus.

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

Acest lucru va genera noi .text-{color}-{level}utilități pentru fiecare culoare și nivel. Puteți face același lucru și pentru orice altă utilitate și proprietate.