Renk

Tema renkleri

Renk şemaları oluşturmak için daha küçük bir renk paleti oluşturmak için tüm renklerin bir alt kümesini kullanırız, ayrıca Bootstrap scss/_variables.scssdosyasında Sass değişkenleri ve bir Sass haritası olarak da bulunur.

Tüm bu renkler bir Sass haritası olarak mevcuttur, $theme-colors.

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

Bu renklerin nasıl değiştirileceğini öğrenmek için Sass haritalarımıza ve döngü belgelerimize göz atın .

Tüm renkler

scss/_variables.scssTüm Bootstrap renkleri, dosyada Sass değişkenleri ve bir Sass haritası olarak mevcuttur . Dosya boyutlarının artmasını önlemek için bu değişkenlerin her biri için metin veya arka plan rengi sınıfları oluşturmuyoruz. Bunun yerine, bir tema paleti için bu renklerin bir alt kümesini seçiyoruz .

Renkleri özelleştirirken kontrast oranlarını izlediğinizden emin olun. Aşağıda gösterildiği gibi, ana renklerin her birine üç kontrast oranı ekledik - biri renk örneğinin mevcut renkleri için, biri beyaza karşı ve diğeri siyaha karşı.

Sass Üzerine Notlar

Sass programlı olarak değişkenler üretemez, bu yüzden her renk tonu için manuel olarak değişkenler yarattık ve kendimizi gölgelendirdik. $blue-500Sass'ın renk işlevi aracılığıyla renklerimizi renklendirmek (açıklaştırmak) veya gölgelemek (koyulaştırmak) için orta nokta değerini (örn. ) belirleriz ve özel renk işlevlerini kullanırız mix().

Kullanım mix()ile aynı değildir lighten()ve darken()—birincisi belirtilen rengi beyaz veya siyahla karıştırırken, ikincisi her rengin yalnızca açıklık değerini ayarlar. Sonuç, bu CodePen demosunda gösterildiği gibi, çok daha eksiksiz bir renk takımıdır .

ve fonksiyonlarımız tint-color(), ürettiğimiz her karışık renk için kademeli bir yüzde değeri belirten değişkenimizin yanında kullanılır. Tam kaynak kodu için ve dosyalarına bakın .shade-color()mix()$theme-color-intervalscss/_functions.scssscss/_variables.scss

Renk Sass haritaları

Bootstrap'in kaynak Sass dosyaları, bir renk listesi ve bunların onaltılık değerleri arasında hızlı ve kolay bir şekilde döngü oluşturmanıza yardımcı olacak üç harita içerir.

• $colors500mevcut tüm temel ( ) renklerimizi listeler
• $theme-colorsanlamsal olarak adlandırılmış tüm tema renklerini listeler (aşağıda gösterilmiştir)
• $graysgrinin tüm tonlarını ve tonlarını listeler

içinde scss/_variables.scss, Bootstrap'in renk değişkenlerini ve Sass haritasını bulacaksınız. İşte $colorsSass haritasına bir örnek:

$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
);

Diğer birçok bileşende nasıl kullanıldıklarını güncellemek için harita içindeki değerleri ekleyin, kaldırın veya değiştirin. Ne yazık ki şu anda her bileşen bu Sass haritasını kullanmıyor. Gelecekteki güncellemeler bunu geliştirmek için çaba gösterecektir. O zamana kadar ${color}değişkenleri ve bu Sass haritasını kullanmayı planlayın.

Örnek

Bunları Sass'ınızda şu şekilde kullanabilirsiniz:

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

Renk değerlerini ayarlamak ve kullanmak için renk ve arka plan yardımcı sınıfları da mevcuttur .colorbackground-color500

Yardımcı programlar oluşturma

v5.1.0'da eklendi

Bootstrap, her renk değişkeni için colorve yardımcı programları içermez , ancak bunları yardımcı program API'miz ve v5.1.0'da eklenen genişletilmiş Sass haritalarımızla kendiniz oluşturabilirsiniz.background-color

1. Başlamak için işlevlerimizi, değişkenlerimizi, karışımlarımızı ve yardımcı programlarımızı içe aktardığınızdan emin olun.
2. map-merge-multiple()Birden fazla Sass haritasını yeni bir haritada hızlı bir şekilde birleştirmek için işlevimizi kullanın .
3. {color}-{level}Herhangi bir yardımcı programı bir sınıf adıyla genişletmek için bu yeni birleşik haritayı birleştirin .

.text-purple-500Yukarıdaki adımları kullanarak metin rengi yardımcı programları (örneğin, ) oluşturan bir örnek .

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

.text-{color}-{level}Bu, her renk ve seviye için yeni araçlar üretecektir . Aynı şeyi diğer herhangi bir yardımcı program ve mülk için de yapabilirsiniz.