Warna

Warna tema

Kami menggunakan subset dari semua warna untuk membuat palet warna yang lebih kecil untuk menghasilkan skema warna, juga tersedia sebagai variabel Sass dan peta Sass di scss/_variables.scssfile Bootstrap.

Semua warna ini tersedia sebagai peta Sass, $theme-colors.

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

Lihat peta Sass dan dokumen loop kami untuk cara memodifikasi warna-warna ini.

Semua warna

Semua warna Bootstrap tersedia sebagai variabel Sass dan peta Sass dalam scss/_variables.scssfile. Untuk menghindari peningkatan ukuran file, kami tidak membuat kelas teks atau warna latar belakang untuk setiap variabel ini. Sebagai gantinya, kami memilih subset dari warna-warna ini untuk palet tema .

Pastikan untuk memantau rasio kontras saat Anda menyesuaikan warna. Seperti yang ditunjukkan di bawah ini, kami telah menambahkan tiga rasio kontras ke masing-masing warna utama—satu untuk warna swatch saat ini, satu untuk melawan putih, dan satu untuk melawan hitam.

Catatan tentang Sass

Sass tidak dapat menghasilkan variabel secara terprogram, jadi kami membuat variabel secara manual untuk setiap warna dan bayangan sendiri. Kami menentukan nilai titik tengah (misalnya, $blue-500) dan menggunakan fungsi warna khusus untuk mewarnai (meringankan) atau menaungi (menggelapkan) warna kami melalui mix()fungsi warna Sass.

Menggunakan mix()tidak sama dengan lighten()dan darken()—yang pertama memadukan warna yang ditentukan dengan putih atau hitam, sedangkan yang kedua hanya menyesuaikan nilai kecerahan setiap warna. Hasilnya adalah rangkaian warna yang jauh lebih lengkap, seperti yang ditunjukkan dalam demo CodePen ini .

tint-color()Fungsi dan kami shade-color()digunakan mix()bersama $theme-color-intervalvariabel kami, yang menentukan nilai persentase bertahap untuk setiap warna campuran yang kami hasilkan. Lihat scss/_functions.scssdan scss/_variables.scssfile untuk kode sumber lengkap.

Peta Sass Warna

File Sass sumber Bootstrap menyertakan tiga peta untuk membantu Anda dengan cepat dan mudah mengulang daftar warna dan nilai heksanya.

• $colorsmencantumkan semua 500warna dasar ( ) kami yang tersedia
• $theme-colorsdaftar semua warna tema yang diberi nama semantik (ditampilkan di bawah)
• $graysdaftar semua warna dan nuansa abu-abu

Di dalam scss/_variables.scss, Anda akan menemukan variabel warna Bootstrap dan peta Sass. Berikut adalah contoh $colorspeta Sass:

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

Tambahkan, hapus, atau ubah nilai dalam peta untuk memperbarui cara penggunaannya di banyak komponen lainnya. Sayangnya saat ini tidak semua komponen menggunakan map Sass ini. Pembaruan di masa mendatang akan berusaha untuk meningkatkan ini. Sampai saat itu, rencanakan penggunaan ${color}variabel dan peta Sass ini.

Contoh

Inilah cara Anda dapat menggunakan ini di Sass Anda:

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

Kelas utilitas warna dan latar belakang juga tersedia untuk mengatur colordan background-colormenggunakan nilai 500warna.

Menghasilkan utilitas

Ditambahkan di v5.1.0

Bootstrap tidak menyertakan colordan background-colorutilitas untuk setiap variabel warna, tetapi Anda dapat membuatnya sendiri dengan API utilitas kami dan peta Sass tambahan kami yang ditambahkan di v5.1.0.

1. Untuk memulai, pastikan Anda telah mengimpor fungsi, variabel, mixin, dan utilitas kami.
2. Gunakan map-merge-multiple()fungsi kami untuk menggabungkan beberapa peta Sass dengan cepat menjadi satu peta baru.
3. Gabungkan peta gabungan baru ini untuk memperluas utilitas apa pun dengan {color}-{level}nama kelas.

Berikut adalah contoh yang menghasilkan utilitas warna teks (misalnya, .text-purple-500) menggunakan langkah-langkah di atas.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@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";

Ini akan menghasilkan .text-{color}-{level}utilitas baru untuk setiap warna dan level. Anda juga dapat melakukan hal yang sama untuk utilitas dan properti lainnya.