Bootstrap Tema Renkleri: $theme-colors, Ton Paleti ve Kendi Renginizi Eklemek

Tema paleti: sekiz anlamsal renk

Bootstrap tüm renklerinin bir alt kümesini tema paleti olarak kullanır ve bu paleti scss/_variables.scss içinde hem tek tek değişkenler hem de $theme-colors map'i olarak tanımlar. Her anahtar bir anlam taşır: primary ana eylem, danger hata ya da yıkıcı işlem, success başarılı sonuç gibi. v5.0.2'deki varsayılanlar şunlardır:

// scss/_variables.scss (v5.0.2)
$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
) !default;

Map'in değerleri doğrudan renk kodu değil, değişkenlerdir. Bu yüzden bir tema rengini değiştirmek için map'i yeniden yazmanız gerekmez; ilgili değişkeni ezmeniz yeterlidir. Hazır sınıfların kullanımı renk sınıfları yazısında anlatılıyor.

Tüm renkler: $colors, $grays ve dokuz ton

Tema paletinin arkasında daha geniş bir renk seti vardır. $colors map'i on temel rengi (blue, indigo, purple, pink, red, orange, yellow, green, teal, cyan) ve ayrıca white, gray, gray-dark anahtarlarını içerir. $grays map'i 100'den 900'e dokuz gri tonunu tutar. Belge, Sass'ın değişkenleri programla üretemediğini, bu yüzden her ton için değişkenin elle yazıldığını açıklar. Kaynakta tonlar şu kurala göre tanımlıdır:

tint-color() rengi beyazla, shade-color() siyahla karıştırır. Belge bunun Sass'ın lighten() ve darken() fonksiyonlarından farklı olduğunu, onların yalnızca açıklık değerini kaydırdığını vurgular. Renk sayfası tonların $theme-color-interval adlı bir adım değişkeniyle üretildiğinden söz etse de geçiş belgesi bu değişkene dayanan eski sistemin kaldırıldığını belirtir; v5.0.2'nin _variables.scss dosyasında da böyle bir değişken yoktur, yüzdeler her satırda doğrudan yazılıdır.

Belgenin altını çizdiği bir sınırlama var: dosya boyutu büyümesin diye her ton için text- ya da bg- sınıfı üretilmez. Tonları Sass içinde değişken olarak kullanırsınız:

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

Gri tonları ayrıca dikkat ister, çünkü birden fazla tema rengi ve genel değişken onlara bağlıdır. v5.0.2'de $secondary değeri $gray-600, $light değeri $gray-100, $dark değeri $gray-900 değişkeninden gelir; sayfanın varsayılan yazı rengi $body-color da $gray-900 olarak tanımlıdır. Yani $gray-900 değerini değiştirirseniz hem koyu tema rengi hem de gövde yazısı değişir. Yalnızca koyu tema rengini değiştirmek istiyorsanız gri değişkenine değil $dark değişkenine dokunun.

Belge ayrıca her bileşenin henüz $colors map'ini kullanmadığını, bu nedenle hem tek tek renk değişkenlerine hem map'e göre plan yapmanızı söyler. Renkleri değiştirirken kontrast oranlarını izlemek de sizin sorumluluğunuzdadır.

Tema rengi nerelerde kullanılır?

Tema renginin gücü, bileşen dosyalarındaki @each döngülerinden gelir. v5.0.2 kaynağında $theme-colors üzerinde dönen döngüler şu sınıfları ve değişkenleri üretir:

Tablolar bunun dışında kalır: tablo renkleri ayrı bir $table-variants map'inden gelir ve bu map tema değişkenlerinden shift-color() ile hesaplanır. Dolayısıyla $primary değerini değiştirmek .table-primary sınıfını da etkiler, ama $theme-colors map'ine yeni bir anahtar eklemek kendiliğinden yeni bir tablo sınıfı üretmez.

Bootstrap 5.0.2 derlenmiş CSS dosyasında birincil buton ve birincil uyarı şöyle tanımlıdır:

.btn-primary {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
.btn-primary:hover {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
}
/* (kısaltıldı) */
.alert-primary {
  color: #084298;
  background-color: #cfe2ff;
  border-color: #b6d4fe;
}

Uyarının üç rengi de tek bir tema renginden türetilir. _alert.scss arka plan için shift-color($value, $alert-bg-scale), çerçeve için $alert-border-scale, yazı için $alert-color-scale kullanır. Varsayılanlar -80%, -70% ve 40%'tır; negatif değer beyazla açma, pozitif değer siyahla koyulaştırma demektir. Döngü ayrıca arka planla yazı arasındaki kontrast $min-contrast-ratio değerinin altına düşerse yazı rengini yeniden karıştırır. Butonun üzerine gelme rengi de benzer şekilde $btn-hover-bg-shade-amount (varsayılan 15%) ile koyulaştırılarak bulunur.

Marka rengini değiştirmek

En yaygın ihtiyaç, mavi birincil rengi kendi marka renginizle değiştirmektir. Değişkeni functions dosyasından sonra, variables dosyasından önce verin:

@import "../node_modules/bootstrap/scss/functions";

// Tema rengi ezmeleri
$primary: #0b7285;
$danger: #c92a2a;

@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// ... bileşenler, helpers, utilities/api

Bu iki satırdan sonra derlenen CSS'te .btn-primary, .btn-outline-primary, .alert-primary, .list-group-item-primary, .link-primary, .text-primary, .bg-primary, .table-primary ve --bs-primary yeni renkle üretilir. $link-color da varsayılan olarak $primary değerini aldığı için sayfadaki sıradan bağlantılar da marka rengine döner. Yeniden derlemeden yalnızca CSS değişkenini değiştirmek bu etkiyi vermez; nedenini CSS değişkenleri yazısında gösteriyoruz.

Yeni bir tema rengi eklemek

Paletinize dokuzuncu bir renk eklemek için kendi map'inizi oluşturup birleştirirsiniz. Birleştirme variables import'undan sonra, bileşen dosyalarından önce yapılmalıdır; böylece döngüler yeni anahtarı görür:

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/utilities";

$custom-colors: (
  "marka": #7048e8
);
$theme-colors: map-merge($theme-colors, $custom-colors);

@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/alert";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";

Burada bir ayrıntıya dikkat edin: v5.0.2'de _utilities.scss dosyası text- ve bg- gruplarının değerlerini $theme-colors map'inden o dosya içe aktarıldığı anda okur. Bu örnekte birleştirme utilities import'undan sonra yapıldığı için yeni renk butonlara, uyarılara, renkli bağlantılara ve --bs-marka değişkenine ulaşır ama .text-marka ile .bg-marka sınıflarına ulaşmaz. Yardımcı sınıfların da üretilmesini istiyorsanız birleştirme satırını mixins ile utilities import'ları arasına taşıyın. Kaynakta utilities dosyasının variables ve mixins dosyalarından sonra geldiğini Bootstrap v5.0.2 kaynak kodu: bootstrap.scss dosyasında görebilirsiniz.

Derlenmiş dosyada yeni sınıfları HTML'de diğer tema renkleri gibi kullanırsınız:

<div class="alert alert-marka" role="alert">Kampanya bu hafta sonu bitiyor.</div>
<button type="button" class="btn btn-marka">Kampanyayı gör</button>
<button type="button" class="btn btn-outline-marka">Sonra hatırlat</button>

Bu parça bir ayrıştırıcıyla denetlendi; alert-marka, btn-marka ve btn-outline-marka stok v5.0.2 CSS'inde olmadığı için ancak yukarıdaki Sass ile derlediğiniz dosyada çalışır. Belgeye göre bir rengi çıkarmak için de map-remove kullanılır; yalnız primary, success ve danger anahtarları bağlantı, buton ve form durumlarında kullanıldığı için silinmemelidir.

Yeni renk rozet ve ilerleme çubuğu gibi bileşenlere de dolaylı yoldan ulaşır. Geçiş belgesine göre v5'te rozetlerin .badge-* renk sınıfları kaldırıldı ve yerine .bg-primary gibi arka plan yardımcıları kullanılıyor. Bu bileşenler kendi renk döngüsüne sahip olmadığı için, .bg-marka sınıfı üretildiyse (yani birleştirme utilities import'undan önce yapıldıysa) <span class="badge bg-marka"> yazarak yeni rengi rozette de kullanabilirsiniz. Rozetler için badge ve spinner yazısına bakın.

Kontrast: butonun yazı rengini Bootstrap seçer

Kendi renginizi seçerken en sık şaşırtan şey buton yazısının bazen beyaz, bazen siyah çıkmasıdır. Nedeni button-variant() mixin'inin imzasıdır: v5.0.2'de yazı rengi parametresinin varsayılanı color-contrast($background)'dır. Fonksiyon, arka plana karşı $min-contrast-ratio (varsayılan 4.5) oranını geçen ilk rengi $color-contrast-light (beyaz), $color-contrast-dark (siyah) sırasıyla dener. Derlenmiş CSS'te bunun sonucunu açıkça görürsünüz:

.btn-success {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
}
/* (kısaltıldı) */
.btn-warning {
  color: #000;
  background-color: #ffc107;
  border-color: #ffc107;
}

Sarı gibi açık bir arka planda beyaz yazı 4.5:1 oranına ulaşamadığı için siyah seçilmiştir. Geçiş belgesine göre v5'te bu oran 3:1'den 4.5:1'e çıkarıldı ve kontrast için kullanılan koyu renk $gray-900 yerine $black oldu; mavi, yeşil, camgöbeği ve pembe tonları da WCAG 2.1 AA kontrastına uysun diye güncellendi. Pratikte bunun anlamı şudur: orta açıklıkta bir marka rengi seçerseniz butonunuzun yazısı siyah çıkabilir. Beyaz yazı istiyorsanız rengi biraz koyulaştırmak en sağlıklı çözümdür. Kaynaktaki açıklamaya göre $min-contrast-ratio için WCAG 2.0'da kabul edilen değerler 3, 4.5 ve 7'dir; oranı düşürmek erişilebilirliği de düşürür. Konunun erişilebilirlik tarafı için erişilebilirlik yazısına bakın.

Kontrast hesabını kendi kodunuzda da kullanabilirsiniz. Örneğin bir rozet arka planına göre yazı rengini otomatik seçmek için color: color-contrast($deger); yazmanız yeterlidir.

Bileşenler: temel sınıf ve değiştirici

Bootstrap'in bileşen sayfası, bileşenlerin büyük çoğunluğunun temel sınıf ve değiştirici adlandırmasıyla kurulduğunu anlatır. Ortak özellikler .btn gibi bir temel sınıfta toplanır, her varyantın farkı .btn-primary ya da .btn-success gibi değiştirici sınıflarda durur. Değiştiriciler Sass'ın @each döngüsüyle bir map üzerinde dolaşılarak üretilir; uyarılar ve liste grubu bunun belgede gösterilen iki örneğidir.

Döngüler yalnızca renk map'leriyle sınırlı değildir. Belge, açılır menülerin duyarlı hizalama sınıflarının $grid-breakpoints map'i üzerinde dönen bir döngü ve medya sorgusu mixin'i ile üretildiğini gösterir; .dropdown-menu-md-end gibi sınıflar böyle oluşur. $grid-breakpoints map'ini değiştirirseniz bu map'i kullanan bütün döngüler yeni kırılma noktalarıyla çalışır. Kırılma noktaları için breakpoint yazısına bakın.

Aynı yaklaşımla kendi bileşeninizi yazmak

Belge, kendi bileşenlerinizi de bu düzende kurmanızı önerir ve dokümantasyondaki bilgi kutularını (callout) örnek verir: biçimin çoğu temel sınıfta, varyantların tek farkı sol çerçeve rengindedir. Aynı fikri tema renkleri üzerinden dönen bir döngüyle yazarsanız, palete eklediğiniz her renk kutunuza da otomatik yansır:

// Temel sınıf
.callout {
  padding: $spacer;
  margin-bottom: $spacer;
  border: $border-width solid $border-color;
  border-left-width: .25rem;
  @include border-radius($border-radius);
}

// Değiştiriciler: her tema rengi için bir varyant
@each $color, $value in $theme-colors {
  .callout-#{$color} {
    border-left-color: $value;
  }
}

<div class="callout callout-warning">
  <strong>Dikkat:</strong> Bakım çalışması bu gece 02.00'de başlayacak.
</div>

callout sınıfları Bootstrap'te yoktur, yukarıdaki Sass ile sizin üretmeniz gerekir; HTML parçası bu iki sınıf bildirilerek denetlendi. Bu kod belgedeki yapıya göre yazıldı ve derlenmedi; kullanılan $spacer, $border-width, $border-color, $border-radius değişkenleri ve border-radius mixin'i v5.0.2 kaynağında mevcuttur.

Sık yapılan hatalar

• Rengi değiştirmek için $theme-colors map'ini baştan yazmak: v5'te map birleştirmesi olmadığı için yazmadığınız anahtarlar kaybolur. Değişkeni ezmek yeterlidir.
• Yeni rengi utilities import'undan sonra eklemek: butonlar oluşur ama text- ve bg- sınıfları oluşmaz.
• Yeni tema renginden .table-* sınıfı beklemek: tablolar ayrı $table-variants map'ini kullanır.
• Her ton için hazır sınıf aramak: $blue-300 gibi tonlar yalnızca Sass değişkenidir.
• Buton yazısı siyah çıkınca $min-contrast-ratio değerini düşürmek: önce rengi koyulaştırmayı deneyin.
• Renkleri değiştirip kontrastı kontrol etmemek: belge oranları izlemeyi açıkça önerir.

Sık Sorulan Sorular

Sadece birincil rengi değiştirmek için hangi satır yeterli?

functions import'undan sonra, variables import'undan önce $primary: #renk; yazmanız yeterlidir. Map, butonlar, uyarılar, bağlantılar ve yardımcı sınıflar bu değişkenden üretilir.

Tema rengi ile $colors içindeki renk arasındaki fark nedir?

$colors içindeki blue, red gibi renkler ham paletin parçasıdır ve CSS değişkeni olarak --bs-blue gibi gelir. Tema renkleri ise anlam taşıyan anahtarlardır ve buton, uyarı, yardımcı sınıf gibi bileşen varyantlarını üretir.

lighten() ile tint-color() arasında gerçekten fark var mı?

Evet. Belgeye göre tint-color() rengi beyazla karıştırır, lighten() ise açıklık değerini sabit bir miktar artırır. Bootstrap'in tonları karıştırma yöntemiyle üretildiği için kendi tonlarınızı da tint-color() ve shade-color() ile üretirseniz paletle uyumlu kalırsınız.

Karanlık tema için ayrı bir renk seti var mı?

Bootstrap 5.0 belgeleri bunun için yalnızca color-scheme() mixin'ini sunar; bu mixin prefers-color-scheme medya sorgusunu yazar, içindeki renkleri sizin tanımlamanız gerekir. Ayrıntı Sass yazısında.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap öğrenme rehberi · Sass ile özelleştirme · Renk sınıfları · Buton sınıfları · CSS değişkenleri ve seçenekler · CSS öğrenme rehberi