Цвета

Цвета темы

Мы используем подмножество всех цветов, чтобы создать меньшую цветовую палитру для создания цветовых схем, также доступных в виде переменных Sass и карты Sass в scss/_variables.scss файле Bootstrap.

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

Все эти цвета доступны в виде карты 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 файле. Чтобы избежать увеличения размеров файлов, мы не создаем классы цвета текста или фона для каждой из этих переменных. Вместо этого мы выбираем подмножество этих цветов для палитры темы.

Обязательно следите за коэффициентом контрастности при настройке цветов. Как показано ниже, мы добавили три коэффициента контрастности к каждому из основных цветов: один для текущих цветов образца, один для белого и один для черного.

$blue #007bff

$blue-100

$blue-200

$blue-300

$blue-400

$blue-500

$blue-600

$blue-700

$blue-800

$blue-900

$indigo #6610f2

$indigo-100

$indigo-200

$indigo-300

$indigo-400

$indigo-500

$indigo-600

$indigo-700

$indigo-800

$indigo-900

$purple #6f42c1

$purple-100

$purple-200

$purple-300

$purple-400

$purple-500

$purple-600

$purple-700

$purple-800

$purple-900

$pink #e83e8c

$pink-100

$pink-200

$pink-300

$pink-400

$pink-500

$pink-600

$pink-700

$pink-800

$pink-900

$red #dc3545

$red-100

$red-200

$red-300

$red-400

$red-500

$red-600

$red-700

$red-800

$red-900

$orange #fd7e14

$orange-100

$orange-200

$orange-300

$orange-400

$orange-500

$orange-600

$orange-700

$orange-800

$orange-900

$yellow #ffc107

$yellow-100

$yellow-200

$yellow-300

$yellow-400

$yellow-500

$yellow-600

$yellow-700

$yellow-800

$yellow-900

$green #28a745

$green-100

$green-200

$green-300

$green-400

$green-500

$green-600

$green-700

$green-800

$green-900

$teal #20c997

$teal-100

$teal-200

$teal-300

$teal-400

$teal-500

$teal-600

$teal-700

$teal-800

$teal-900

$cyan #17a2b8

$cyan-100

$cyan-200

$cyan-300

$cyan-400

$cyan-500

$cyan-600

$cyan-700

$cyan-800

$cyan-900

$gray-500 #adb5bd

$gray-100

$gray-200

$gray-300

$gray-400

$gray-500

$gray-600

$gray-700

$gray-800

$gray-900

$black #000

$white #fff

Примечания к Sass

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

Использование mix() - это не то же самое, что lighten() и darken() - в первом случае указанный цвет смешивается с белым или черным, а во втором - только регулируется значение яркости каждого цвета. В результате получается гораздо более полный набор цветов, как показано в этой демонстрации CodePen.

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

Карты Color 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 значений цвета.