Bootstrap 5: Продвинутый уровень
2026-02-26 20:33 Diff
https://ru.hexlet.io/courses/bootstrap-advanced/lessons/color-scheme/theory_unit

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

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

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

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

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

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

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

Пример на CodePen.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выводы

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

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

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

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

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

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