Karanlık Mod Ayarları
nuvinode temaları, daha koyu arayüzleri tercih eden ziyaretçiler için mağazanızın görünümünü otomatik olarak uyarlayan yerleşik bir karanlık modu destekler. Bu kılavuzda, bu modun nasıl yapılandırılacağı ve test edileceği açıklanmaktadır.
Karanlık Mod Nasıl Çalışır?
Her nuvinode teması iki renk paleti barındırır: colors açık mod için ve colorsDark karanlık mod için. Bir ziyaretçinin cihazı veya tarayıcısı "karanlık mod" olarak ayarlandığında ( prefers-color-scheme: dark medya sorgusu yoluyla), mağaza ön yüzü otomatik olarak koyu palete geçer. Özelleştirebileceğiniz renkler şunlardır:
- Birincil — Markanızın ana vurgu rengi (düğmeler, bağlantılar, vurgular).
- İkincil — Rozetler, etiketler ve ikincil eylemler için destekleyici vurgu rengi.
- Arka Plan — Sayfanın arka plan rengi (genellikle
#121212). - Yüzey — Kart ve kapsayıcı arka planları (sayfa arka planından biraz daha açık).
- Metin — Birincil metin rengi (genellikle beyaz veya açık gri).
- Sessiz — Başlıklar ve ikincil bilgiler için sönük metin.
Karanlık Mod Renklerini Yapılandırma
Karanlık mod paletinizi özelleştirmek için:
- Yönetici panelinde Ayarlar > Temalar > Özelleştir seçeneğine gidin.
- Standart renk seçicilerin altındaki "Karanlık Mod Renkleri" bölümünü bulun.
- Renk seçiciyi kullanarak her rengi ayarlayın veya hex değerlerini doğrudan girin.
- Değişikliklerinizi uygulamak için "Kaydet"i tıklayın.
Karanlık mod renklerini özelleştirmezseniz, nuvinode, açık mod paletinizi tersine çevirip ayarlayarak uygun varsayılan değerler oluşturur.
Karanlık Modu Etkinleştirme ve Devre Dışı Bırakma
Karanlık mod, tüm temalarda varsayılan olarak etkindir. Tamamen devre dışı bırakmak için:
- Ayarlar > Temalar > Özelleştir seçeneğine gidin.
- "Karanlık Modu Etkinleştir" seçeneğini bulun.
- Anahtarı kapatın ve kaydedin.
Karanlık mod devre dışı bırakıldığında, tüm ziyaretçiler sistem tercihlerinden bağımsız olarak açık mod renk paletini görür.
Karanlık Modu Test Etme
Sistem ayarlarınızı değiştirmeden karanlık modu test edebilirsiniz:
- Chrome DevTools — F12 tuşuna basın, üç noktalı menüye tıklayın, Diğer Araçlar > Görüntüleme'yi seçin ve "CSS medya özelliği prefers-color-scheme'i taklit et" seçeneğini
dark. - Firefox — Adres çubuğuna
about:configyazın,ui.systemUsesDarkThemeyazın ve1. - AI Asistanı — Mevcut paleti incelemek için AI'ya "Bana karanlık mod renklerimi göster" diye sorun.
Metnin koyu arka planlara karşı yeterli kontrasta sahip olup olmadığını her zaman kontrol edin. WCAG, normal metinler için en az 4,5:1 kontrast oranı önerir.