Kolor

Kolory motywu

Używamy podzbioru wszystkich kolorów, aby stworzyć mniejszą paletę kolorów do generowania schematów kolorów, dostępną również jako zmienne Sass i mapę Sass w scss/_variables.scsspliku Bootstrap.

Wszystkie te kolory są dostępne jako mapa Sass, $theme-colors.

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

Zapoznaj się z naszą dokumentacją dotyczącą map i pętli Sass, aby dowiedzieć się, jak modyfikować te kolory.

Wszystkie kolory

Wszystkie kolory Bootstrap są dostępne jako zmienne Sass i mapa Sass w scss/_variables.scsspliku. Aby uniknąć zwiększonych rozmiarów plików, nie tworzymy klas kolorów tekstu ani tła dla każdej z tych zmiennych. Zamiast tego wybieramy podzbiór tych kolorów dla palety motywów .

Pamiętaj, aby monitorować współczynniki kontrastu podczas dostosowywania kolorów. Jak pokazano poniżej, dodaliśmy trzy współczynniki kontrastu do każdego z głównych kolorów — jeden dla bieżących kolorów próbki, jeden dla bieli i jeden dla czerni.

Notatki o Sassie

Sass nie może programowo generować zmiennych, więc sami stworzyliśmy zmienne dla każdego odcienia i odcienia. Określamy wartość punktu środkowego (np. $blue-500) i używamy niestandardowych funkcji kolorów, aby zabarwić (rozjaśnić) lub przyciemnić (przyciemnić) nasze kolory za pomocą mix()funkcji kolorów Sassa.

Użycie mix()nie jest tym samym co lighten()i darken()— to pierwsze miesza określony kolor z bielą lub czernią, podczas gdy drugie dostosowuje tylko wartość jasności każdego koloru. Rezultatem jest znacznie pełniejszy zestaw kolorów, jak pokazano w tym demo CodePen .

Nasze tint-color()i shade-color()funkcje są używane mix()obok naszej $theme-color-intervalzmiennej, która określa schodkową wartość procentową dla każdego produkowanego przez nas koloru mieszanego. Zobacz pliki scss/_functions.scssi scss/_variables.scsspełny kod źródłowy.

Kolorowe mapy Sass

Źródłowe pliki Sass Bootstrapa zawierają trzy mapy, które pomagają w szybkim i łatwym przeglądaniu listy kolorów i ich wartości szesnastkowych.

• $colorszawiera listę wszystkich dostępnych 500kolorów bazowych ( )
• $theme-colorswymienia wszystkie semantycznie nazwane kolory motywu (pokazane poniżej)
• $grayswymienia wszystkie odcienie i odcienie szarości

Wewnątrz scss/_variables.scssznajdziesz zmienne kolorów Bootstrap i mapę Sass. Oto przykład $colorsmapy 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
);

Dodaj, usuń lub zmodyfikuj wartości na mapie, aby zaktualizować sposób ich użycia w wielu innych składnikach. Niestety w tej chwili nie każdy komponent korzysta z tej mapy Sass. Przyszłe aktualizacje będą dążyć do poprawy tego. Do tego czasu zaplanuj wykorzystanie ${color}zmiennych i tej mapy Sassa.

Przykład

Oto, jak możesz ich użyć w swoim Sassie:

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

Do ustawiania i używania wartości kolorów dostępne są również klasy narzędziowe kolorów i tła .colorbackground-color500

Generowanie narzędzi

Bootstrap nie zawiera colornarzędzi background-colordla każdej zmiennej koloru, ale możesz je wygenerować samodzielnie za pomocą naszego narzędzia API i naszych rozszerzonych map Sass dodanych w wersji 5.1.0.

1. Na początek upewnij się, że zaimportowałeś nasze funkcje, zmienne, domieszki i narzędzia.
2. Skorzystaj z naszej map-merge-multiple()funkcji, aby szybko połączyć wiele map Sass w nową mapę.
3. Połącz tę nową połączoną mapę, aby rozszerzyć dowolne narzędzie o {color}-{level}nazwę klasy.

Oto przykład, który generuje narzędzia koloru tekstu (np. .text-purple-500) przy użyciu powyższych kroków.

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

Spowoduje to wygenerowanie nowych .text-{color}-{level}narzędzi dla każdego koloru i poziomu. Możesz zrobić to samo dla każdego innego narzędzia i nieruchomości.