Цвет — важная особенность дизайна и всего Bootstrap. Если открыть любой дизайн-документ крупной компании, то можно увидеть, что цвету и его использованию уделяется много внимания.
Хороший дизайн легко «убить» плохим цветом. Также с помощью цвета можно запутать пользователя. Например, если кнопка «Принять» станет красной, а «Отменить» — зеленой. Посмотрите в примере на CodePen.
Это все относится к дизайну и пользовательскому поведению. И чтобы не испортить интерфейс, важно уметь правильно работать с цветом внутри экосистемы Bootstrap.
В этом уроке мы разберем, как формируется основная тема Bootstrap и как реализовать темную и светлую тему.
Устройство цветовой схемы Bootstrap
В Bootstrap есть восемь основных цветов:
PrimarySecondarySuccessDangerWarningInfoLightDark
Пример на 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;
Основной путь цвета от его первого появления до появления в теме выглядит так:
- Определение цвета.
$gray-600: #6c757d; - Указание цвета в смысловой переменной.
$secondary: $gray-600; - Добавление цвета в массив
$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. В ее основе лежит восемь цветов:
PrimarySecondarySuccessDangerWarningInfoLightDark
Эти цвета имеют семантическое название. Это позволяет не привязываться к конкретным цветам и не путаться при изменении цветовой схемы.
Чтобы изменить цветовую схему, достаточно поменять переменные цветов внутри Bootstrap:
$primary$secondary$success$danger$warning$info$light$dark
После компиляции фреймворка цвета внутри всех компонентов автоматически заменятся.
Самостоятельная работа
Создайте новую цветовую схему выбрав любую палитру цветов из Color Hunt, либо выберите свои цвета. Добавьте файл с цветами и подключите его в проект. Создайте шаблон страницы, использующий цвета. Проверьте, что отображаются цвета из вашей палитры.
Дополнительные материалы
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
