Bootstrap Renk Sistemi Özelleştirme Rehberi

Bootstrap, tema renkleri, gri tonları ve utility sınıfları ile kapsamlı bir renk sistemi sunar. Bu rehberde Bootstrap renk mimarisinin nasıl çalıştığını, Sass değişkenleri ile nasıl özelleştirileceğini, yeni renk utility'leri oluşturmayı ve Bootstrap 5.3+ dark mode desteğini ele alıyoruz.

Bootstrap Renk Yapısı

Bootstrap'ta renkler iki ana grupta toplanır: tema renkleri (primary, secondary, success, danger vb.) ve gri tonları (gray-100'den gray-900'e). Her tema rengi genellikle $primary, $primary-rgb gibi değişkenlerle tanımlanır. Gri tonlar $gray-100 ile $gray-900 arasında değişir.

// Bootstrap _variables.scss örnek değerler
$primary:       #0d6efd;
$secondary:     #6c757d;
$success:       #198754;
$danger:        #dc3545;
$warning:       #ffc107;
$info:          #0dcaf0;

$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-500: #adb5bd;
$gray-900: #212529;

Sass ile Özelleştirme

Bootstrap'ı derlemeden önce kendi _variables.scss veya custom.scss dosyanızda değişkenleri override edin. Bootstrap'ın değişken dosyasını import ettikten sonra kendi değerlerinizi yazın.

// custom.scss
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";

// Tema renklerinizi override edin
$primary:   #6366f1;
$secondary: #8b5cf6;
$success:   #10b981;
$danger:    #ef4444;

@import "bootstrap/scss/bootstrap";

Sass !default kullanır; sizin tanımlarınız önceliklidir. Sass renk fonksiyonları ile lighten($primary, 10%) gibi türev renkler de üretebilirsiniz.

Renk Utility Sınıfları

Bootstrap, bg-primary, text-danger, border-warning gibi sınıflar sunar. Bu sınıflar tema renkleri ve gri tonlarını kullanır. Yeni bir tema rengi eklediğinizde, $theme-colors map'ine eklemeniz gerekir.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "custom":     #14b8a6
);

Böylece bg-custom, btn-custom, text-custom otomatik üretilir.

Gri Tonları Özelleştirme

$gray-100 ile $gray-900 arasındaki değerleri değiştirerek kendi gri paletinizi oluşturabilirsiniz. Sıcak gri (daha sarı ton) veya soğuk gri (daha mavi ton) için HEX değerlerini ayarlayın.

$gray-100: #f5f5f5;
$gray-200: #eeeeee;
$gray-500: #9e9e9e;
$gray-900: #212121;

Bootstrap 5.3+ Dark Mode

Bootstrap 5.3 ile yerleşik dark mode desteği geldi. data-bs-theme="dark" kullanarak karanlık tema uygulanır. Renk değişkenleri dark modda otomatik değişir; CSS custom properties kullanılır.

<html data-bs-theme="light">
  <body>
    <div class="bg-primary">Tema değiştiğinde renk güncellenir</div>
  </body>
</html>

<!-- Dark mode aktif -->
<html data-bs-theme="dark">...</html>

Özel dark mode renkleri tanımlamak için _variables-dark.scss veya Bootstrap'ın dark tema değişkenlerini override edebilirsiniz.

Gradient Utility'leri

Bootstrap 5, bg-primary yerine bg-gradient sınıfı ile gradient arka plan sunar. İkisini birlikte kullanabilirsiniz.

<div class="bg-primary bg-gradient">
  Primary renkte gradient arka plan
</div>

Özel gradient için CSS gradient bilgisi ve Gradient Oluşturucu ile hazırladığınız değerleri utility sınıf veya custom class olarak ekleyebilirsiniz.

CSS Değişkenleri ile Entegrasyon

Bootstrap 5, tema renklerini CSS custom properties olarak da sunar (--bs-primary, --bs-primary-rgb). Bu sayede sadece CSS ile veya JavaScript ile runtime'da renk değişimi yapabilirsiniz. CSS değişkenleri best practices ve CSS variables ile tema rehberlerimizde bu yaklaşımı inceleyebilirsiniz.

Tailwind ile Karşılaştırma

Tailwind daha atomik ve yapılandırılabilir bir utility-first yaklaşım sunar; Bootstrap ise bileşen odaklı ve daha az utility içerir. Her ikisinde de renk sistemi merkezi bir config'den yönetilir. Tailwind renk sistemi rehberimizde karşılaştırma yapabilirsiniz.

Özet

Bootstrap renk sistemi, tema renkleri ve gri tonları ile esnek bir yapı sunar. Sass değişkenleri ile kolayca özelleştirilebilir; Bootstrap 5.3+ dark mode ile modern tema geçişleri desteklenir. Palet Oluşturucu ile renklerinizi belirleyip Bootstrap değişkenlerinize aktarabilirsiniz.