Màu sắc

Màu sắc chủ đề

Chúng tôi sử dụng một tập hợp con của tất cả các màu để tạo ra một bảng màu nhỏ hơn để tạo ra các lược đồ màu, cũng có sẵn dưới dạng các biến Sass và một bản đồ Sass trong scss/_variables.scsstệp Bootstrap.

Tất cả những màu này đều có sẵn dưới dạng bản đồ Sass , $theme-colors.

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

Xem bản đồ Sass và tài liệu về vòng lặp của chúng tôi để biết cách sửa đổi những màu này.

Đủ màu sắc

Tất cả các màu Bootstrap đều có sẵn dưới dạng biến Sass và bản đồ Sass trong scss/_variables.scsstệp. Để tránh kích thước tệp tăng lên, chúng tôi không tạo các lớp văn bản hoặc màu nền cho từng biến này. Thay vào đó, chúng tôi chọn một tập hợp con các màu này cho bảng màu chủ đề .

Đảm bảo theo dõi tỷ lệ tương phản khi bạn tùy chỉnh màu sắc. Như hình dưới đây, chúng tôi đã thêm ba tỷ lệ tương phản cho mỗi màu chính — một cho các màu hiện tại của mẫu, một cho màu trắng và một cho màu đen.

Ghi chú về Sass

Sass không thể tạo các biến theo chương trình, vì vậy chúng tôi đã tự tạo các biến cho mọi tông màu và tự tô bóng theo cách thủ công. Chúng tôi chỉ định giá trị điểm giữa (ví dụ $blue-500:) và sử dụng các chức năng màu tùy chỉnh để tô màu (làm sáng) hoặc tô bóng (làm tối) màu của chúng tôi thông qua mix()chức năng màu của Sass.

Việc sử dụng mix()không giống như lighten()và darken()— cái trước pha trộn màu đã chỉ định với màu trắng hoặc đen, trong khi cái sau chỉ điều chỉnh giá trị độ đậm nhạt của mỗi màu. Kết quả là một bộ màu hoàn chỉnh hơn nhiều, như được hiển thị trong bản demo CodePen này .

Các hàm tint-color()và shade-color()hàm của chúng tôi sử dụng mix()cùng với $theme-color-intervalbiến của chúng tôi, chỉ định giá trị phần trăm theo từng bước cho mỗi màu hỗn hợp mà chúng tôi tạo ra. Xem scss/_functions.scssvà scss/_variables.scsscác tệp để biết mã nguồn đầy đủ.

Bản đồ Color Sass

Các tệp Sass nguồn của Bootstrap bao gồm ba bản đồ để giúp bạn lặp lại danh sách các màu và giá trị hex của chúng một cách nhanh chóng và dễ dàng.

• $colorsliệt kê tất cả các màu cơ bản ( 500) có sẵn của chúng tôi
• $theme-colorsliệt kê tất cả các màu chủ đề được đặt tên theo ngữ nghĩa (hiển thị bên dưới)
• $graysliệt kê tất cả các sắc thái và sắc thái của màu xám

Bên trong scss/_variables.scss, bạn sẽ tìm thấy các biến màu của Bootstrap và bản đồ Sass. Đây là một ví dụ về $colorsbản đồ 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
);

Thêm, xóa hoặc sửa đổi các giá trị trong bản đồ để cập nhật cách chúng được sử dụng trong nhiều thành phần khác. Thật không may tại thời điểm này, không phải thành phần nào cũng sử dụng bản đồ Sass này. Các bản cập nhật trong tương lai sẽ cố gắng cải thiện điều này. Cho đến lúc đó, hãy lập kế hoạch sử dụng các ${color}biến và bản đồ Sass này.

Thí dụ

Đây là cách bạn có thể sử dụng những thứ này trong Sass của mình:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

Các lớp tiện ích màu và nềncolor cũng có sẵn để thiết lập và background-colorsử dụng các 500giá trị màu.

Tạo tiện ích

Bootstrap không bao gồm colorvà background-colorcác tiện ích cho mọi biến màu, nhưng bạn có thể tự tạo các biến màu này bằng API tiện ích và bản đồ Sass mở rộng của chúng tôi được thêm vào v5.1.0.

1. Để bắt đầu, hãy đảm bảo rằng bạn đã nhập các hàm, biến, mixin và tiện ích của chúng tôi.
2. Sử dụng map-merge-multiple()chức năng của chúng tôi để nhanh chóng hợp nhất nhiều bản đồ Sass với nhau trong một bản đồ mới.
3. Hợp nhất bản đồ kết hợp mới này để mở rộng bất kỳ tiện ích nào có {color}-{level}tên lớp.

Đây là một ví dụ tạo tiện ích màu văn bản (ví dụ .text-purple-500:) bằng cách sử dụng các bước trên.

@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";

Điều này sẽ tạo ra các .text-{color}-{level}tiện ích mới cho mọi màu sắc và cấp độ. Bạn cũng có thể làm tương tự cho bất kỳ tiện ích và tài sản nào khác.