Цвят

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

Ние използваме подмножество от всички цветове, за да създадем по-малка цветова палитра за генериране на цветови схеми, също налични като 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,
  "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цветовите стойности.