Tema Değiştirme¶

Bileşenlerin bağlı olduğu ve Mkdocs Material stili üzerine uyarlanan tema sistemimiz hem açık hem de koyu temaları destekler. Tüm bileşenler CSS değişkenleri kullanarak seçilen temaya otomatik olarak adapte olur.

CSS Değişkenleri¶

Tema sistemimiz, tema değiştirildiğinde otomatik olarak güncellenen CSS özel özellikleri (değişkenler) üzerine inşa edilmiştir.

Temel Değişkenler¶

:root {
  /* Arka plan renkleri */
  --md-default-bg-color: #ffffff; /* Arka plan rengi */
  --md-default-fg-color: #000000; /* Ön plan/metin rengi */

  /* Vurgu renkleri */
  --md-primary-fg-color: #1976d2; /* Birincil vurgu rengi */
  --md-accent-fg-color: #ff6b35; /* İkincil vurgu rengi */

  /* Özel değişkenler */
  --phantom-bg-secondary: #f5f5f5; /* İkincil arka plan */
  --phantom-border: #e0e0e0; /* Kenarlık rengi */
  --phantom-accent: #1976d2; /* Vurgu rengi */
  --phantom-text-secondary: #666666; /* İkincil metin rengi */
}

Görsel Örnekler¶

Varsayılan Arka Plan
--md-default-bg-color

İkincil Arka Plan
--phantom-bg-secondary

Birincil Renk
--md-primary-fg-color

Vurgu Rengi
--phantom-accent

Tema Değişikliğine Duyarlı Bileşenler¶

Tüm özel bileşenlerimiz mevcut temaya otomatik olarak adapte olur:

Açık Mod Örneği¶

✓

Açık Mod

Nasıl Çalışır¶

Temel Değişkenler: MkDocs Material temel tema değişkenleri sağlar
Özel Değişkenler: Kendi --phantom-* değişkenlerimizle kendi stil yaklaşımımızı uyarlayarak bunları genişletir
Otomatik Değiştirme: Tema değiştiğinde değişkenler güncellenir

Tüm bileşenlerin nasıl adapte olduğunu görmek için başlıktaki tema değiştirici düğmesini kullanarak açık ve koyu mod arasında geçiş yapmayı deneyin!

Renk Paleti¶

Birincil Renkler¶

Birincil
--md-primary-fg-color

Vurgu
--md-accent-fg-color

Phantom Vurgu
--phantom-accent

Durum Renkleri¶

Başarı
#22c55e

Uyarı
#f59e0b

Hata
#ef4444

Bilgi
#3b82f6

Tema Duyarlı Bileşenler Oluşturma¶

Örnek: Özel Kart¶

.custom-card {
  background: var(--phantom-bg-secondary);
  border: 1px solid var(--phantom-border);
  color: var(--md-default-fg-color);
  padding: 1rem;
  border-radius: 8px;
}

.custom-card:hover {
  border-color: var(--phantom-accent);
}

Bu kart CSS değişkenleri kullanarak mevcut temaya otomatik olarak adapte olur.

Koyu Mod Düşünceleri¶

Her iki tema için tasarım yaparken şunları düşünün:

Kontrast Oranları: Metinlerin her iki modda da okunabilir kaldığından emin olun
Renk Anlamları: Durum renkleri her iki temada da ayırt edilebilir olmalı
Gölgeler: box-shadow kullanımını sınırlayın çünkü koyu modda iyi çalışmayabilir
Resimler: Gerektiğinde temaya özel resimler sağlamayı düşünün

Temanızı Test Etme¶

Kontrast Kontrolcüsü¶

Varsayılan Arka Planda Varsayılan Metin
Bu metin hem açık hem de koyu modlarda net okunabilir olmalıdır.

İkincil Arka Planda İkincil Metin
Bu kombinasyon daha az önemli içerik için kullanılır.

Tema Değiştiricinin Konumu¶

Tema değiştirici düğmesi başlık navigasyon çubuğunda bulunur. Açık ve koyu mod arasında geçiş yapmak için güneş/ay simgesini arayın.

En İyi Uygulamalar¶

CSS Değişkenleri Kullanın: Sabit kodlu renkler yerine her zaman tema değişkenlerini kullanın
Her İki Modu Test Edin: İçeriğinizi hem açık hem de koyu temalarda kontrol edin
Semantik Renkler: Görünüm değil amacı açıklayan anlamlı değişken adları kullanın
Yedek Değerler: Gerekirse eski tarayıcılar için yedek renkler sağlayın
Medya Sorguları: prefers-color-scheme ile kullanıcının sistem tema tercihine saygı gösterin