Цвят

Цветове на темата

Ние използваме подмножество от всички цветове, за да създадем по-малка цветова палитра за генериране на цветови схеми, също налични като Sass променливи и Sass карта във scss/_variables.scssфайла на Bootstrap.

Всички тези цветове са налични като Sass карта, $theme-colors.

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

Вижте нашите Sass карти и документи за цикли за това как да промените тези цветове.

Всички цветове

Всички цветове на Bootstrap са налични като Sass променливи и Sass карта във scss/_variables.scssфайл. За да избегнем увеличените размери на файловете, ние не създаваме класове за цвят на текст или фон за всяка от тези променливи. Вместо това избираме подгрупа от тези цветове за тематична палитра .

Не забравяйте да наблюдавате контрастните съотношения, докато персонализирате цветовете. Както е показано по-долу, добавихме три контрастни съотношения към всеки от основните цветове – един за текущите цветове на мостра, един срещу бяло и един срещу черно.

Бележки за Sass

Sass не може програмно да генерира променливи, така че сами ръчно създадохме променливи за всеки нюанс. Ние определяме средната стойност (напр. $blue-500) и използваме персонализирани функции за цвят, за да оцветим (изсветлим) или засенчим (потъмним) нашите цветове чрез mix()функцията за цвят на Sass.

Използването mix()не е същото като lighten()и darken()— първото смесва посочения цвят с бяло или черно, докато второто само регулира стойността на светлота на всеки цвят. Резултатът е много по-пълен набор от цветове, както е показано в тази демонстрация на CodePen .

Нашите tint-color()и shade-color()функции използват mix()заедно с нашата $theme-color-intervalпроменлива, която определя стъпаловидна процентна стойност за всеки смесен цвят, който произвеждаме. Вижте scss/_functions.scssи scss/_variables.scssфайловете за пълния изходен код.

Цветни карти на Sass

Изходните Sass файлове на Bootstrap включват три карти, които ви помагат бързо и лесно да преминете през списък с цветове и техните шестнадесетични стойности.

• $colorsизброява всички наши налични основни ( 500) цветове
• $theme-colorsизброява всички семантично наименувани цветове на темата (показани по-долу)
• $graysизброява всички нюанси и нюанси на сивото

Вътре scss/_variables.scssще намерите цветовите променливи на Bootstrap и картата на Sass. Ето пример за $colorsкартата на 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
);

Добавете, премахнете или модифицирайте стойности в картата, за да актуализирате начина, по който се използват в много други компоненти. За съжаление в момента не всеки компонент използва тази Sass карта. Бъдещите актуализации ще се стремят да подобрят това. Дотогава планирайте да използвате ${color}променливите и тази карта на Sass.

Пример

Ето как можете да ги използвате във вашия Sass:

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

Достъпни са и помощни класове цвят и фонcolor за задаване и background-colorизползване на 500цветовите стойности.

Генериране на помощни програми

Bootstrap не включва colorпомощни background-colorпрограми за всяка цветна променлива, но можете да ги генерирате сами с нашия API за помощни програми и нашите разширени Sass карти, добавени във v5.1.0.

1. За да започнете, уверете се, че сте импортирали нашите функции, променливи, миксини и помощни програми.
2. Използвайте нашата map-merge-multiple()функция, за да обедините бързо няколко Sass карти заедно в нова карта.
3. Обединете тази нова комбинирана карта, за да разширите всяка помощна програма с {color}-{level}име на клас.

Ето пример, който генерира помощни програми за оцветяване на текст (напр. .text-purple-500), използвайки горните стъпки.

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

Това ще генерира нови .text-{color}-{level}помощни програми за всеки цвят и ниво. Можете да направите същото и за всяка друга полезност и собственост.