колір

Кольори теми

Ми використовуємо підмножину всіх кольорів, щоб створити меншу кольорову палітру для генерації колірних схем, також доступну як змінні 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,
  "black":      $black,
  "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значень кольорів.

Генерація утиліт

Bootstrap не включає утиліти colorдля background-colorкожної змінної кольору, але ви можете створити їх самостійно за допомогою нашого API утиліти та наших розширених карт Sass, доданих у v5.1.0.

1. Для початку переконайтеся, що ви імпортували наші функції, змінні, міксини та утиліти.
2. Використовуйте нашу map-merge-multiple()функцію, щоб швидко об’єднати декілька карт Sass у нову карту.
3. Об’єднайте цю нову об’єднану карту, щоб розширити будь-яку утиліту за допомогою {color}-{level}імені класу.

Ось приклад, який генерує утиліти кольору тексту (наприклад, .text-purple-500) за допомогою наведених вище кроків.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Це створить нові .text-{color}-{level}утиліти для кожного кольору та рівня. Ви можете зробити те саме для будь-якої іншої комунальної власності та власності.