Теория: Цветовые схемы Bootstrap

Цвет — важная особенность дизайна и всего Bootstrap. Если открыть любой дизайн-документ крупной компании, то можно увидеть, что цвету и его использованию уделяется много внимания.

Хороший дизайн легко «убить» плохим цветом. Также с помощью цвета можно запутать пользователя. Например, если кнопка «Принять» станет красной, а «Отменить» — зеленой. Посмотрите в примере на CodePen.

Это все относится к дизайну и пользовательскому поведению. И чтобы не испортить интерфейс, важно уметь правильно работать с цветом внутри экосистемы Bootstrap.

В этом уроке мы разберем, как формируется основная тема Bootstrap и как реализовать темную и светлую тему.

Устройство цветовой схемы Bootstrap

В Bootstrap есть восемь основных цветов:

• Primary
• Secondary
• Success
• Danger
• Warning
• Info
• Light
• Dark

Пример на CodePen.

В этих названиях нет привязки к конкретным цветам. Здесь переданы семантические — смысловые названия. Такой подход пришел из мира дизайна, где привычно использовать основной, второстепенный и другие цвета, а не просто синий, желтый, серый.

Это позволяет менять цветовую схему и не боятся нарушения логики в названиях. Если синий цвет primary поменяется на оранжевый, то он не перестанет быть «основным цветом».

Рассмотрим, как цветовая схема указывается внутри Bootstrap. Все цвета записываются через переменные и хранятся в файле _variables.scss:

$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-900 !default;

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

На этом примере видно, что цвета формируются из уже готовых переменных, которые потом попадают в массив $theme-colors. Проследим, как появился цвет Secondary:

$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;


$secondary:     $gray-600 !default;

$theme-colors: (
  "secondary":  $secondary,
) !default;

Основной путь цвета от его первого появления до появления в теме выглядит так:

1. Определение цвета. $gray-600: #6c757d;
2. Указание цвета в смысловой переменной. $secondary: $gray-600;
3. Добавление цвета в массив $theme-colors

Второй и третий пункты — самые важные. Bootstrap не ограничивает, как именно появится цвет в переменной $secondary. Это может происходить по-разному.

Например, для серого цвета все определено «в лоб», то есть напрямую указаны цвета в формате HEX без использования различных функций или миксинов. Некоторые цвета генерируются автоматически, например, так выглядит синий цвет и его вариации от темного к светлому:

$blue:    #0d6efd !default;

$blue-100: tint-color($blue, 80%) !default;
$blue-200: tint-color($blue, 60%) !default;
$blue-300: tint-color($blue, 40%) !default;
$blue-400: tint-color($blue, 20%) !default;
$blue-500: $blue !default;
$blue-600: shade-color($blue, 20%) !default;
$blue-700: shade-color($blue, 40%) !default;
$blue-800: shade-color($blue, 60%) !default;
$blue-900: shade-color($blue, 80%) !default;

Для осветленных значений (от blue-100 до blue-400) используется функция tint-color(), которая смешивает передаваемый цвет и белый. Для затемненных значений используется функция shade-color(), которая смешивает передаваемый цвет с черным. Это встроенные в Bootstrap функции. Их можно использовать для создания своих цветовых схем.

Попробуйте открыть файл _variables.scss и проследить, как появились остальные цвета в массиве $theme-colors. Теперь можно создать свою тему для Bootstrap. Для этого нам нужно будет изменить уже готовые цвета в Bootstrap.

Создание своей цветовой схемы

Создадим новую цветовую схему с помощью пастельных цветов.

В этом уроке не будем останавливаться на том, как правильно выбирать цвета. Но можно использовать сервисы с палитрами цветов. Например, Color Hunt.

Воспользуемся такой палитрой цветов:

В этом примере у нас уже есть конкретные вариации цветов, поэтому не будем использовать генерацию с помощью различных SASS-функций.

Создадим новый массив с цветовой схемой и заменим переменные $primary, $secondary и так далее. В этом случае не затрагиваются старые цветовые схемы и можно быстро откатиться в случае необходимости.

Все изменения внесем в кастомный SASS-файл, чтобы не изменять оригинальный файл Bootstrap:

@use "sass:map";

$brand-theme-colors: (
  "primary": #a8d8ea,
  "secondary": #aa96da,
  "success": #bbfcba,
  "danger": #fcbad3,
  "warning": #ffffd2,
  "info": #96a9da,
);

$primary:   map.get($brand-theme-colors, "primary");
$secondary: map.get($brand-theme-colors, "secondary");
$success:   map.get($brand-theme-colors, "success");
$info:      map.get($brand-theme-colors, "info");
$warning:   map.get($brand-theme-colors, "warning");
$danger:    map.get($brand-theme-colors, "danger");

Подключим файл с цветами и сам фреймворк к нашему проекту:

@import "./brand-color";
@import "../../node_modules/bootstrap/scss/bootstrap.scss";

После компиляции цветовая схема сменится.

Так выглядит предыдущий пример с новыми цветами.

Изменение основных цветов также переопределило цвет надписей на блоках. Это высчитывается автоматически внутри Bootstrap, и менять самостоятельно это не стоит.

Выводы

В этом уроке мы изучили, из чего состоит цветовая схема Bootstrap. В ее основе лежит восемь цветов:

• Primary
• Secondary
• Success
• Danger
• Warning
• Info
• Light
• Dark

Эти цвета имеют семантическое название. Это позволяет не привязываться к конкретным цветам и не путаться при изменении цветовой схемы.

Чтобы изменить цветовую схему, достаточно поменять переменные цветов внутри Bootstrap:

• $primary
• $secondary
• $success
• $danger
• $warning
• $info
• $light
• $dark

После компиляции фреймворка цвета внутри всех компонентов автоматически заменятся.