Temalar ve Tasarım

Karanlık Mod Ayarları

Karanlık mod renklerini nasıl ayarlayacağınızı, karanlık modu nasıl etkinleştireceğinizi veya devre dışı bırakacağınızı ve mağazanızın karanlık mod görünümünü nasıl test edeceğinizi öğrenin.

nuvinode2 dk okuma

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:

  1. Yönetici panelinde Ayarlar > Temalar > Özelleştir seçeneğine gidin.
  2. Standart renk seçicilerin altındaki "Karanlık Mod Renkleri" bölümünü bulun.
  3. Renk seçiciyi kullanarak her rengi ayarlayın veya hex değerlerini doğrudan girin.
  4. 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:

  1. Ayarlar > Temalar > Özelleştir seçeneğine gidin.
  2. "Karanlık Modu Etkinleştir" seçeneğini bulun.
  3. 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:config yazın, ui.systemUsesDarkThemeyazın ve 1.
  • 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.